Color Texts in the Record List

Contents

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 (External link) named “To do” with the following fields.

Field Type Field Name Field Code Options
Text To Do todo
Date Due Date duedate
User selection Assigned To assignedto
Drop-down Status status Set the following options:
  • Not started
  • In progress
  • Complete

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

Screenshot of Kintone's record list.

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 (External link).

 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.

Screenshot of Kintone's record list with some colored text.

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.