Overview

This article introduces how to add colors to texts of fields within the Record List page. Colors are assigned to the texts based on values within the records.

Prepare the App

Create an App named "To do" with the following fields.

Add a few records into the App. Make sure to include some records with the Status set as "Not Started".

Sample Code

Type the following code into a text editor and save it as a JavaScript file. Upload it to the App's JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

(function() {
  'use strict';

  // Create an event handler for the Record List
  kintone.events.on('app.record.index.show', function(event) {
    // Set a color
    let fontColor = '#ff0000';

    // Retrieve elements for the "To Do" and "status" fields
    let todoName = kintone.app.getFieldElements('todo');
    let statusName = kintone.app.getFieldElements('status');

    for (let i = 0; i < statusName.length; i++) {
      // Access record data from the event object
      let record = event.records[i];

      // If the Status is "Not started", color the To Do and Status text
      if (record.status.value === 'Not started') {
        todoName[i].style.color = fontColor;
        statusName[i].style.color = fontColor;
      }
    }
  });
})();

After saving the settings and clicking on Update App, navigate to the Record list page. Records that contain Status with "Not started" will have their To do value colored in Red.

Make modifications

The code in this sample is only referencing values in the To Do field and the Status field. This code can be further customized by accessing vaulues in the Due Date field. Fields can then be colored in based on when the Due Date is compared to the user's local date.