How do I change the background color of a field based on content?

Randy Spindel
Giga Contributor

We have a field on a task form called User Access Type.

find_real_file.png

By default, this field has a light yellow background via a configured style.

find_real_file.png

We would like to change the background color of this field to red when the field is Delete rather than Add.

I attempted to set another style that would set the background to red when the value was delete, but that does not appear to work. When I attempt to set a value on the existing configured style, it also appears to stop working for reasons I can't figure out.

I attempted to create a client script to change the background onLoad when the field value is delete, but scripting is not my strong suit and I have not been successful so far.

1 ACCEPTED SOLUTION

Updating my code to have you use:

function onLoad() {
    //Type appropriate comment here, and begin script below
    var element = g_form.getElement('u_user_access_type');
    var accessType = g_form.getValue('u_user_access_type');
    if (accessType == 'delete') {
        element.style.backgroundColor = "red";
    }
}

Simply replace 'u_user_access_type' with the actual back-end name of the field (not label) and this will work.

I did this with the number field on Incident just to play around and this is how it turned out:

find_real_file.png

Please mark reply as Helpful/Correct.

Thanks!


Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

View solution in original post

10 REPLIES 10

Arvind21
ServiceNow Employee
ServiceNow Employee

You can use the table sys_ui_style . You can write the condition in the value column using javascript tag and then write the style you needed to achieve in the style column. This is if you want on list view. If you want on form view then you have to write a client script like mentioned by Allen above and instead of using element.style.backgroundColor use element.style.color

Screenshot 2023-08-23 at 7.52.05 PM.png