sys_ui_style not applying CSS

[VedantK]

Hello there,

I was applying CSS to state field on incident form using .sys_ui_style.

Whenever I was not giving value in "Value" field it's working (but only for one color) again If I am giving any condition in field nothing is working.

Is there any way to achieve this

I want the behavior like below
if state ==new--> background color green for state field
if state ==Work in progress background color red for state field

if state ==Resolved background color blue for state field.

PS. My requirement is to achieve this through sys_ui_style only.

Thanks,

Vedant

[Ct111]

Hello,

You can try something like below script  onChange of state field 

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue === '') {
return;
}

var stateField = g_form.getControl('state');
if (newValue == 'New') {
stateField.style.backgroundColor = 'green';
} else if (newValue == 'Work in progress') {
stateField.style.backgroundColor = 'red';
} else if (newValue == 'Resolved') {
stateField.style.backgroundColor = 'blue';
} else {
stateField.style.backgroundColor = ''; // Reset to default
}
}

I hope this helps.

[Ankur Bawiskar]

@VedantK 

on form you can use onChange client script

field style with dynamic condition don't work on form

this KB mentions the same

Field styles on forms and lists do not behave as expected 

Sample onChange client script here

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }

    var stateField = g_form.getControl('state');
    stateField.style.backgroundColor = '';
    if (newValue == '1') {
        stateField.style.backgroundColor = 'green';
    } else if (newValue == '2') {
        stateField.style.backgroundColor = 'red';
    } else if (newValue == '6') {
        stateField.style.backgroundColor = 'blue';
    }
}

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Runjay Patel]

Hi @VedantK ,

Create onload client script and use below code. Make sure "Isolate script" filed is unchecked on client script.

  var stateField = g_form.getControl('state');

    var state = g_form.getValue('state');
    if (state == 1)
        stateField.style.backgroundColor = 'green';
    else if (state == 2) // work in progress
        stateField.style.backgroundColor = 'red';
    else if (state == 6) // resolved
        stateField.style.backgroundColor = 'red';

Output:

-------------------------------------------------------------------------

If you found my response helpful, please consider selecting "Accept as Solution" and marking it as "Helpful." This not only supports me but also benefits the community.

Regards
Runjay Patel - ServiceNow Solution Architect
YouTube: https://www.youtube.com/@RunjayP
LinkedIn: https://www.linkedin.com/in/runjay

-------------------------------------------------------------------------