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,171 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
In response to AEterni

‎11-12-2021 03:46 AM

Hi,

script mentioned by Simon should work.

for reference field the syntax is different

Regards
Ankur

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

Go to solution
Alex Coope - SN
ServiceNow Employee
ServiceNow Employee

‎11-12-2021 03:22 AM

@Alessandro Eterni,

Are you familiar with "Field Styles" as this is exactly what they are for, otherwise you run the risk of introducing technical debt via DOM manipulation which may not work in the future or other UI's such as Workspace,

Many thanks,
Kind regards 

--------------------------------------------------------------------
Director of Globalization Deployment, Internationalization

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

Go to solution
AEterni
Mega Guru
In response to Simon Abildgaar

‎11-14-2021 02:32 AM

It works.

Thank you for your help.

0 Helpfuls