Change field text colors

Kintone JavaScript API

Kintone provides JavaScript APIs that allow you to interact with Kintone data, making it easy to create various event handlers, and get Kintone record data.

In the following example, we will be using Kintone JavaScript APIs in our script.
An event will be triggered when the list of records is displayed. The code will check the value of the "Status" field for each row, and find which rows hold the value of "Not started". The code will then proceed to change the style of the "To Do" and "Status" values where the row includes a "Not started" value.

Make changes to your Kintone App

Before we start writing the code, we first need to make changes to the Kintone App that we used in the previous tutorial, by applying field code names to the fields. Field codes are unique IDs that are given to the fields, that can be identified by the Kintone JavaScript API.

Open your App Settings and have the Form tab selected. Hover your mouse over the "To do" field to have a cogwheel appear. Hover over the cog wheel, click on "Settings", and change the field code to "todo".


Do the same for the "Status" drop-down field, and change the field code to "status".
Once you are done, save the form, and update the App.

Code Example

Follow these steps to apply the code to your Kintone App

Step 1. Open the "sample_customize.js" file you were working on in the previous tutorial.

Step 2. Overwrite the current code with the below code, and save your file.

Step 3.
Go to the JavaScript and CSS customization settings, delete the previous file that was uploaded, and upload the new file. Save the settings and apply the changes.

Step 4. View your record list to see the color changes made to your record list.



Code Explanation

Kintone Events

The event handler in kintone is added using, with the event (such as and the handler as the parameters. If written with pure JavaScript, you could write object.addEventListener("load", myFunction); to run a function when the page loads - in kintone you can write this instead as'', myFunction); . will only run when kintone loads the record list page, and also allows users to use the Event Object that contains record data of each row on the page.

There are of course other events that can be called, such as the event that will run when the record create page loads.

Field Elements

The elements of the fields are retrieved using'fieldcode'); .
You could technically get the elements of the fields by using document.getElementsByClassName('classname'); , but class names in Kintone have a risk of changing on a product update. As'fieldcode'); only specifies the field code of the field, any changes to class names will have no effect on retrieving the element.


Did your code run successfully?
If not, there's nothing to worry about. It may most likely be due to incorrect field codes. The field codes are case sensitive, so have a check in your App Settings again to see if the field codes you specified are correct (and make sure you are not specifying the "field name" instead).
If this still doesn't solve the issue, have a look through the Debugging Tips for Kintone JS article for any hints.

We will look into running a script with a different event in the next tutorial




<<< Go back to JavaScript Tutorial 1                                    Go to JavaScript Tutorial 3 >>>

Was this article helpful?
2 out of 2 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!