How to change background color based on field value

[Hari1]

Hi All,

I have a requirement to change the table <td> tag background color as the field value changes at the time of insertion.

When the value of INC field value is "true" i want the <td> tag background colour to be red

When the value of INC field value is "false" i want the <td> tag background colour to be yellow.

Script:

(function runMailScript(/* GlideRecord */ current, /* TemplatePrinter */ template,
          /* Optional EmailOutbound */ email, /* Optional GlideRecord */ email_action,
          /* Optional GlideRecord */ event) 
{
	var baseUrl = gs.getProperty("glide.servlet.uri");
    email.setSubject("Applications - Last created Incidents (Days & Date) Report as on " + gs.now());
	var finalJSONArray =[];
	var obj = {};
	var url,shortDesc,assignGroup,escalated,inc;
	var gr = new GlideRecord('incident');
	gr.addQuery('active','true');
	gr.addQuery('assigned_to','46d44a23a9fe19810012d100cca80666');
	gr.query();
	while(gr.next())
	{
		shortDesc = gr.short_description.getDisplayValue();
		assignGroup = gr.assignment_group.getDisplayValue();
		complex = gr.u_complexity.getDisplayValue();
		inc = gr.u_inc.getDisplayValue();
		url = '<a href="' + baseUrl + 'sp?id=ticket&table=' + gr.getTableName() + '&sys_id=' + gr.sys_id + '">' + gr.number + '</a>';
		gs.log("url: " + url);
		
		obj = {URL : url ,ShortDesc : shortDesc, AssignmentGroup : assignGroup,Complexity: complex, IncGreq : inc};
		finalJSONArray.push(obj);
		}
	gs.info("obj is" + JSON.stringify(obj));
	gs.info("finalJSONArray is" + JSON.stringify(finalJSONArray));
	
	template.print("<p><table border=3>");
    template.print("<tr bgcolor=yellow><td colspan=3 align =center><b>Incident details</b></td></tr>");
    template.print("<tr><th>Number</th><th>Short Desc</th><th>Assignment Group</th><th>INC</th></tr>");
	for (var i in finalJSONArray) 
	{
		 template.print("<tr><td>" + finalJSONArray[i].URL + "</td><td>" + finalJSONArray[i].ShortDesc + "</td><td>" + finalJSONArray[i].AssignmentGroup + "</td><td>" + finalJSONArray[i].Complexity + "</td><td bgcolor=#FF0000>(finalJSONArray[i].IncGreq["true"] </td> ? <td bgcolor=yellow>(finalJSONArray[i].IncGreq["false"] </td> + "</td></tr>");
	}
	template.print("</table></p><br/>");
})(current, template, email, email_action, event);

[Hari1]

It's working Ankur. Thanks a lot.

[Geetanjali Khy2]

Hi Hemanth,

You can use something like this in your code.

$('#mytable tr td').each(function(){
   var cellValue = $(this).html();

  if(!isNaN(parseFloat(cellValue)))

 {
     if (cellValue == true) {
      $(this).css('background-color','red');
     }
 
     if(cellValue=false){
      $(this).css('background-color','Yellow');
     }

 }

It may help you to add in your code.

Please refer below links for your reference.

https://www.sanwebcorner.com/2017/03/set-background-color-based-on-table.html

https://stackoverflow.com/questions/4880595/html-table-set-some-cell-text-colours-based-on-value

Kindly mark the answer as Correct and Helpful if this answers your question.

Thank You.

Regards,

Geetanjali Khyale

[Swapnil Soni1]

Hi,

Please refer the following links.

How to change the background color of labels on a form

http://wiki.servicenow.com/index.php?title=Defining_Field_Styles#gsc.tab=0 

Here's an example from my instance.

Table: Incident

Field name: Caller

Value: javascript:current.caller_id.vip == true;

Style: background-image: url('images/icons/vip.gif');

background-repeat: no-repeat;

background-position:2 2;

text-indent: 15px;

Please mark correct or helpful.

Thanks

Swapnil

[Tejas Tamboli]

Hi Hemanth,

I was unable to get the color of the text to change to red. I think that may be related to the fact that this is a link, but you can change the background color. Here's what I did:

Navigate to Table.

Right-click any column header and select Configure > All.

Go to the Styles tab.

Complete the form as follows:

This has the following result in the list view for inactive users:

If you would like it to be a bit more "in your face," you can turn off "Modern cell coloring" in the list preferences. It makes this look like this:

You'll want to leverage Field Styles. You can refer below link:

https://docs.servicenow.com/bundle/jakarta-servicenow-platform/page/administer/navigation-and-ui/tas...  

There's lots of great examples on the platform already in the field style list.

hope this will helps you.

Mark ✅ Correct if this solves your issue and also mark 👍 Helpful if you find my response useful to you and help others to find information faster.

Thanks,

Tejas