Change Style on form reference field based on condition

[Panos Alexakis1]

I am trying to change the color background of a reference field on a table based on a specific value. It is a string value 

I used the below style for that field but the result only affects the list and not the form. How can this be reflected also in the form: 

Table: Case [sn_customerservice_case]

Value: Javascript: current.account.u_account_owner_name== "xxx"

Style: background-color: red;
          color: red;

I have tried also a client script but my scripting is not that advanced. 

Could someone help me on this one?

[Rishabh Jha · Accepted solution]

Hi @Panos Alexakis ,

You can achieve this by client scripts. If you want the color to be changed on load of the form, you'd need to create an onLoad client script, and if you also want the color to be changed on change of value of the reference field, you'd need to create an onChange client script on your table as well.

To create a client script, from the application navigator, navigate to "System Definition --> Client Scripts".

Create New. Give it a desired name, select your table (i.e. Case [sn_customerservice_case]), UI Type select All, Type select "onLoad".

Refer to the screenshot below:

Now, on the script section, put the below script (please note that you might need to change the account owner comparison value,table and field names according to your desired values)

function onLoad() {
   var name = g_form.getReference('account', getOwnerName);
   
   function getOwnerName(selectedAcct) {
	   var owner_name = selectedAcct.u_account_owner_name;
	   var accountField = g_form.getElement('sys_display.sn_customerservice_case.account');
	   if(owner_name == 'XXX') {
		   accountField.setStyle({color: "white"});
		   accountField.setStyle({backgroundColor: "red"});
	   }
   }
   
}

Similarly, for an onChange script, if you want to change the color if the value is changed to the desired value from some other value, you'd need to create an onChange client script. Follow the same steps as above, and for the Type, select "onChange", and the field select your reference field whose value should drive the style change (i.e. account field in your case)

Refer to the screenshot below:

On the script section, put in the below script, and make changes according to your need, if necessary:

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

   var name = g_form.getReference('account', getOwnerName);
   
   function getOwnerName(selectedAcct) {
	   var owner_name = selectedAcct.u_account_owner_name;
	   var accountField = g_form.getElement('sys_display.sn_customerservice_case.account');
	   if(owner_name == 'XXX') {
		   accountField.setStyle({color: "white"});
		   accountField.setStyle({backgroundColor: "red"});
	   }
   }
   
}

Please don't forget to mark the answer as correct/helpful, if it has helped you in solving your problem.

Thanks & Regards,

Rishabh Jha

Aavenir (https://www.aavenir.com/)

[Panos Alexakis1]

Hi Rishabh for the fast response! I managed to make it to work with the above script! thanks!!