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

Randy Spindel · ‎02-24-2020

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

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

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.

Allen Andreas · ‎02-25-2020

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:

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

Randy Spindel · ‎02-25-2020

Thank you, this did the trick. Much appreciated!

Adam Flagg · ‎10-23-2020

Hey Allen,

I'm using essentially the same script and for the life of me I cannot get the field color to set. I tried it your way, and also a switch case way - even the default flag on the switch case method isn't working. Any thoughts?

I verified that the currency fields are parsing correctly into numbers, and reporting those numbers, via logging. I also added an 'alert' into Try 1, which works. Not sure what the issue is here.

function onChange(control, oldValue, newValue, isLoading) {

    var element = g_form.getElement('u_actual_cost');
    var formElement = g_form.getFormElement();

    var actualCost = g_form.getValue('u_actual_cost');
    var plannedCost = g_form.getValue('u_total_planned_cost');

    var actual = parseFloat(actualCost.split(';')[1]);
    var planned = parseFloat(plannedCost.split(';')[1]);

    // Try 1
    /* if (actual > planned) {
        element.style.backgroundColor = "red";
    } */

    // Try 2
    switch (newValue) {
        case (actual > planned):
            element.style.backgroundColor = "tomato";
            break;
        default:
            element.style.backgroundColor = "tomato";
            break;
    }
}

Thank you.

Allen Andreas · ‎10-23-2020

Hi Adam,

If you don't mind, can you create a new question and put all of this in that? That way we can assist you within that context? Feel free to @mention me there.

Thanks!

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

servicenow14710 · ‎05-25-2023

Hello Allen ,

Can we implement similar color update via business rule?.

Thanks.

Saroj Patel · ‎07-25-2023

please let me know how do i change color of the text not just background color