Client script to change the background color of a field

Go to solution
AEterni
Mega Guru

‎11-08-2021 07:20 AM

Hello Team,

Requirement

Change the background color of a field in the incident/request item form when a specific condition is met.

The field we want to change is the "Company" field. The company field in the incident table is a reference to the core_company table

The condition (must be TRUE) is based on a field of the core_company table.

Actions taken

Checked other posts in the community forum. I have found this one that seems to seems to be the right for me.

  • Created a new "Client Scripts"
    • Table "Incident"
    • UI Type "Desktop"
    • Type onLoad
    • Script:
function onLoad() {
    //Type appropriate comment here, and begin script below
    var company = g_form.getElement('company');
    var gcn = g_form.getValue('core_company.u_global_corporate_network_firm');
    if (gcn == 'true') {
        company.style.backgroundColor = "red";
    }
}

It doesn't work not I get any error message when I load the incident form.

Can you please help?

Thanks.

0 Helpfuls
  • 8,170 Views
1 ACCEPTED SOLUTION

Go to solution
Simon Abildgaar
Tera Contributor

‎11-12-2021 03:38 AM

Hi, the reason the above client scripts will not work, is because company is a reference field. So when you use the g_form.getControl('company') the returned html element is a hidden input field and not the shown reference/lookup field, so adding styles to that will not do anything.
To get the correct visible field on the form, use g_form.getControl('sys_display.incident.company').

I will also suggest doing the script in an "onChange", as that will make it work dynamically when you change the value of the company field. An "onChange" script is also triggered "onLoad".

Below you can se a working implementation of an on change script for you problem.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	var displayControl = g_form.getControl('sys_display.incident.company'); 
    if (newValue === '') {
        displayControl.style.background = '';
    } 
	else {
        g_form.getReference('company', callBack);
    }

    function callBack(ref) {
        if (ref.u_global_corporate_network_firm === 'true') {
            displayControl.style.background = 'red';
        } 
		else {
            displayControl.style.background = '';
        }
    }
}

View solution in original post

13 REPLIES 13

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎11-08-2021 07:22 AM

Hi,

update as this

I assume on form load the company is populated

function onLoad() {
	//Type appropriate comment here, and begin script below
	var ref = g_form.getReference('core_company', callBackMethod);
}

function callBackMethod(ref){
	if (ref.u_global_corporate_network_firm.toString() == 'true') {
		var control = g_form.getControl('company');
		control.style.backgroundColor = "red";
	}
}

you might also require onChange to set color based on company change

you can use only this script so that it works onload and onchange as well

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

	//Type appropriate comment here, and begin script below
	var ref = g_form.getReference('core_company', callBackMethod);
}

function callBackMethod(ref){
	var control = g_form.getControl('company');
	if (ref.u_global_corporate_network_firm.toString() == 'true') {
		control.style.backgroundColor = "red";
	}
	else{
		control.style.backgroundColor = ""; // clear it when condition not met
	}

}

Regards
Ankur

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

Go to solution
AEterni
Mega Guru
In response to Ankur Bawiskar

‎11-08-2021 07:36 AM

Hi,

thank you for your feedback. I tested:

  • updated the script
  • created a brand new incident
  • opened the incident form

It didn't work.

I noticed this in your code

if (ref.u_global_corporate_network_firm.toString() == 'true') {

The u_global_corporate_network_firm is a boolean type field.

Could it be the problem?

Thanks.

 

0 Helpfuls

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to AEterni

‎11-08-2021 07:42 AM

Hi,

if it is boolean then we are comparing it with 'true' by converting it to string

You should use this script; Also is company field auto-populated

Did you try changing the company and see the color?

my mistake small update

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

    //Type appropriate comment here, and begin script below
    var ref = g_form.getReference('company', callBackMethod);
}

function callBackMethod(ref){
    var control = g_form.getControl('company');
    if (ref.u_global_corporate_network_firm.toString() == 'true') {
        control.style.backgroundColor = "red";
    }
    else{
        control.style.backgroundColor = ""; // clear it when condition not met
    }

}

Regards
Ankur

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

Go to solution
AEterni
Mega Guru
In response to Ankur Bawiskar

‎11-08-2021 08:04 AM

Ok...so. I used your script.

find_real_file.png

But it still doesn't work.

I have a created a new incident user a user that belongs to a company, but the "Company" field didn't change color, so I tried to change the company (which will never happen) and nothing happened. So I changed the company back to its original value, but nothing happend.

I then removed the company and I got this error.

 

find_real_file.png

I think this error makes sense...because the script doesn't find any value in the company field.

I went back to the first script you sent me because I am interested in the field to change color when the form is loaded, but it doesn't work.

find_real_file.png

 

 

Preview file
56 KB
Preview file
24 KB
Preview file
56 KB
Preview file
11 KB
0 Helpfuls