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

[Randy Spindel]

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]

Hi,

You can make an onLoad client script (or onChange but remove the onLoad check as well to treat it for onLoad) and use script with something like:

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";
    }
}

So you'd need to change user_access_type listed above (both places) to the correct name for the field and also 'delete' to the value for delete.

Please mark reply as Helpful/Correct, if applicable. Thanks!

[Randy Spindel]

The task is generating with the User Access Type field already set to delete, would onChange still be appropriate here? I attempted to use the script you provided, updating the variable name to what we use, but it is still not working.

[Allen Andreas]

If it's already set, you can just use onLoad. If not, and there's a possibility it can be set from within, you'd want to use onChange and then remove the isLoading check at the top of the OOB script that is provided in the client script when you select "onChange" as the type.

As far as it not working, please provide exactly what you've tried.

Thanks!

[Allen Andreas · 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:

Please mark reply as Helpful/Correct.

Thanks!