kintone developer network

Coloring the Record List

Follow

Introduction

This sample customization shows how to change the style of the fields in the record list.
By applying this code, fields in the record list will be highlighted when they hold a specific value.

 

 

Let's say we have an app with a list of leads, and the status of those leads are controlled by a drop-down named "Lead Status".
We can read the "Lead Status" fields to see how each lead is doing, but it would be great to be able to highlight those leads that need more priority.

We will apply a JavaScript code to the app that will do this for us. Below is what the app looks like without any customization.

 

 

Setting up the app

Before implementing our JavaScript code, we first need to check the Field code of the "Lead Status" field. Go to the app settings, and edit the form. On the options of the "Lead Status" field, there's an option at the bottom to view/edit the field code.
Let's change this to "lead_status".

 

Note that you can change this to whatever you want as long as it is unique within the app, but if invalid characters are used they will be replaced by other characters. For example, if "my lead status" is used as the field code, the spaces will be replaced by an underscore _ , changing it to "my_lead_status".

 

Also add "Fresh" and "Quote Approved" as the options of the "Lead status" field

Sample code

Copy the following code to a text editor, and save the file as a .js file.

(function() {

    "use strict";
    // Run an event when the record list page is displayed
    kintone.events.on('app.record.index.show', function(event) {

        //Retrieve an array of field elements of the fields with field code of "lead_status"
        var elStatus = kintone.app.getFieldElements('lead_status');

        //Change the properties of the retrieved field elements for each record
        for (var i = 0; i < elStatus.length; i++) {
            var record = event.records[i];
            if (record['lead_status']['value'] === "Fresh") {
                elStatus[i].style.color = 'red';
                elStatus[i].style.backgroundColor = 'cornsilk';
				elStatus[i].style.fontWeight = 'Bold';
            } else if (record['lead_status']['value'] === "Quote Approved") {
                elStatus[i].style.color = 'blue';
            }
        }
    });
})();

Upload the .js file in the "JavaScript and CSS Customization" option of the app's settings. Click Save, and apply the changes.
The color coding should take effect when the record list page is displayed, and color the text and background of the fields.

 

 

And there we have it! Colors have now been applied to fields that match the condition in the code.

Comments

If nothing has been colored even if the field is showing the correct value, check that the string in the drop-down value equals the string written in the code. The string is case-sensitive and must match. This means, writing a code like this...

if (record['lead_status']['value'] === "Fresh") 

...and placing a value of "fresh" in the drop-down field will not work - you must match the capital letter in the code, and use the value of "Fresh" in the drop-down field.

 

You can go ahead to change any styles and "if" statements to match the app scenario that you have. If you wish to change the color depending on the status of the Process Management settings, you'll find that there is no place to edit the field code of the Status. In this case, as explained in the "Field Types" article, the field code of the status is fixed as "Status".

APIs used

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request
Comments