Color the record list


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.

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.


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...

...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
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!