Field background color based on drop down value

[Sreedhar Mamill]

I'm trying to fill the background color based on drop down values. Using onChange Client Script like below, but it is showing background color only while selecting the value, once I save he form, the color getting disappeared. Any help would be appreciate.

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

    if (isLoading || newValue === '') {
        return;
    }
    var healthCheck = g_form.getValue('u_health_checking_status');

    alert('clean' + newValue);

    if (healthCheck == 'clean') {
        alert('clean' + healthCheck);
        var health1 = g_form.getControl('u_health_checking_status');
        health1.style.backgroundColor = 'green';
        health1.style.fontWeight = 'bold';
    } else if (healthCheck == 'not clean/has minor issues') {
        var health2 = g_form.getControl('u_health_checking_status');
        health2.style.backgroundColor = 'yellow';
    }


}

[Mark Guldhammer]

Hi

Well the onChange only works on onChange, so you would need a nearly identical onLoad script also. The onLoad should then set the colors and fonts, when you open it up. Then it should work.

[Sreedhar Mamill]

Thanks Mark for you response. I have removed the below code part from the onChange client script  and it did the trick.

   if (isLoading || newValue === '') {
        return;
    }

[eumak · Accepted solution]

Hello @Sreedhar Mamilla ,

For achieving the above case, the script should works on both onLoad & onChange.

I have tried running on incident form while changing the state to IN progress, Its working fine for me.

You can try 

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
       var element = g_form.getElement('state');
    var accessType = g_form.getValue('state');
    if (accessType == 2) { //checking state is in progress
        element.style.backgroundColor = "red";
    }
   
}

You can try the below code for your use case use the below code in onChange client script.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    var healthCheck = g_form.getValue('u_health_checking_status');
    var element = g_form.getElement('u_health_checking_status');
    alert('clean' + newValue);
    if (healthCheck == 'clean') {
        alert('clean' + healthCheck);
        element.style.backgroundColor = 'green';

    } else if (healthCheck == 'not clean/has minor issues') {
        element.style.backgroundColor = 'yellow';
    }
}

Mark Correct/Helpful , if it helped you.

Cheers..!
Happy Learning:)
Tushar

[Sreedhar Mamill]

Yes @Tushar I just removed the below code part from onChange client script and it worked fine now. thanks.

   if (isLoading || newValue === '') {
        return;
    }