Conditional Formatting the Record List

Contents

Overview

This article introduces how to apply conditional formatting to Kintone's Record List. Colors of the fields' text and background will be colored when they hold certain values.

Prepare the App

Create an App (External link) named "Customer Database" with the following fields.

Field Type Field Name Field Code Options
User selection Representative rep --
Date First Contact first_contact --
Drop-down Lead Status lead_status Set the following options:
  • Fresh
  • Quote Approved
  • Called
Text Company company --
Drop-down Industry industry Set the following options:
  • Media
  • Sports
  • Tech

Add a few records into the App. Make sure to include some records with the Lead Status set as Fresh and Quote Approved.

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

(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';
      }
    }
  });
})();

After saving the settings and clicking on Update App, navigate to the Record list page. Fields with the Lead Status set as Fresh will have red text and yellow background. Fields with the Lead Status set as Quote Approved will have blue text and the default background.