Field background color based on drop down value

Go to solution
Sreedhar Mamill
Giga Expert

‎03-03-2022 01:03 AM

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


}

 

 

0 Helpfuls
  • 1,416 Views
1 ACCEPTED SOLUTION

Go to solution
eumak
Tera Guru

‎03-03-2022 01:32 AM

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

 

Mark it as helpful or correct, If Applicable


Cheers..!

Happy Learning:)

Tushar

View solution in original post

7 REPLIES 7

Go to solution
eumak
Tera Guru
In response to Sreedhar Mamill

‎03-03-2022 01:53 AM

@Sreedhar Mamilla ,

Happy to know, you got the solution.

Mark my answer correct, If Applicable

Cheers..!
Happy Learning:)
Tushar

Mark it as helpful or correct, If Applicable


Cheers..!

Happy Learning:)

Tushar
0 Helpfuls

Go to solution
Sreedhar Mamill
Giga Expert
In response to eumak

‎03-03-2022 01:57 AM

yes Tushar. done.

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎03-03-2022 01:45 AM

@Sreedhar Mamilla 

make your client script run when form loads as well

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

	// comment these so that it runs on load also
	/*
	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';
	}

}

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader