Background colour in fields

[Sanel]

Hi all ,

I want to add some background colours to some fields based on the score in some another field.For e.g the score fields value is 1-5 then the background colour should be green and if between 6-10 it should be yellow.

How can I add colours in the background?

[Eric Le Martre4]

Here is an example of a Client Script written for a Risk form, so to colour the Score.

You can add a similar one to all tables you need to bring colour

function onLoad() {
formColors.doColor('score');
formColors.doColor('calculated_score');
formColors.doColor('residual_score');
}

var formColors={
bgColorSet:["FireBrick","tomato","orange","palegreen","limegreen"],
fieldValues:["5 - Very High","4 - High","3 - Moderate","2 - Low","1 - Very Low"],

doColor: function (fieldName) {
var elementId="sn_risk_risk."+fieldName+"_label";
gel(elementId).style.backgroundColor=this.bgColorSet[this.fieldValues.indexOf(g_form.getDisplayBox(fieldName).value)];
}
};

I hope it helps

Eric

[Jaspal Singh]

Hi Sanel,

You can have an onChange() client script that works when score field is changed. Something as below can be the code.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   
	var riskimpact=g_form.getValue('impact'); //replace impact with your field name
	if(riskimpact == '1'){
		var risk1=g_form.getControl('impact'); //gets control of field to update color accordingly.
	        risk1.style.backgroundColor="red";		
   }
else if (riskimpact == '2') //pass correct dictionary value for the field value
	{
		var risk2=g_form.getControl('impact');
		risk2.style.backgroundColor='green';
	}
		
}
  

[Megha Padale]

Hi,

You can create client script to achieve this. 

Create onChange client script select the field on depend on which you want to change color of field.

In script use getControl method as below:

var sr=g_form.getControl('field name');

sr.style.backgroundColor='red';

If my answer helped you in any way, mark answer as helpful and correct.

Thanks and regards,

Megha.

[Phil Swann · Accepted solution]

Hi all, no need for client scripts ! 

This can be done using the field styles. https://docs.servicenow.com/bundle/orlando-platform-administration/page/administer/navigation-and-ui/task/t_DefineFieldStyles.html

Take the example of Control, being compliant/non-compliant , in List view:

Or Compliance Score Percentage:

in navigation bar type sn_compliance_policy.config and look at the styles list:

you will notice, use of javascript: which enables you to access the current record fields and perform some logic. if this returns true, the style will be applied