Multiple style's on field based on date

[Carl Fransen1]

Hi All,

I'm trying to work out how to put some styles onto the HR Case 'state' field when the state is 'Suspended' — but I also want to have a different colour based on the new date field I created 'u_suspend_till'.

What I want to achieve is the following:

1. If the date is in the future — upto a day from today colour it green
2. If the date is today — colour it yellow
3. If the date is yesterday or older colour it red

I have setup 3 styles as per below, but I can't seem to get it working correctly —   Any ideas what I'm doing wrong?

javascript:current.u_suspend_till = gs.daysAgo(1) && current.u_suspend_till != "";  

background-color:yellow

javascript:current.u_suspend_till > gs.daysAgo(1) && current.u_suspend_till != "";  

background-color:green

javascript:current.u_suspend_till > gs.hoursAgo(-1) && current.u_suspend_till != "";  

background-color:tomato

[Gowrisankar Sat]

Hi Carl,

Try this:

GlideDate.subtract(new GlideDate(), new GlideDate(current.opened_at.getDisplayValue())).getNumericValue()>86400000

The value you get is in milliseconds, 86400000 is for 1 day.

[Gowrisankar Sat]

Hi Carl,

Try this:

GlideDate.subtract(new GlideDate(), new GlideDate(current.opened_at.getDisplayValue())).getNumericValue()>86400000

The value you get is in milliseconds, 86400000 is for 1 day.

-86400000 is for 1 day before, i.e yesterday or before.

+86400000 is for 1 day after, i.e tomorrow or later.

Add the condition accordingly.

[Carl Fransen1]

thanks for your help - although now it doesn't show anything at all...

I tried removing all except one style - to check for less than so anythig older than today, but still doesn't work - note i've changed the field from the 'opened by' to the 'suspend_till'

javascript:GlideDate.subtract(new GlideDate(), new GlideDate(current.u_suspend_till.getDisplayValue())).getNumericValue()<86400000

[Carl Fransen1 · Accepted solution]

Hi All,

Update to this as I got it working. It was too much to code each individual style record, so I had to create a Script Include' to do the calculations and call this from my Field Style record. 

Script include is:

var OpusHRfieldStyle = Class.create();
OpusHRfieldStyle.prototype = {
    initialize: function() {
		this.timeDiff = gs.dateDiff(gs.now().getDisplayValue(), current.u_suspend_till.getDisplayValue(), true);
    },

	//True if u_suspend_till is less than 1 day from now
	redTime: function() {
		return this.timeDiff <= 0;
	},
	
	//True if u_suspend_till is within 1 day from now
	orangeTime: function() {
		return this.timeDiff > 0 && this.timeDiff < 86400;
	},
	
	//True if u_suspend_till is more than  1 day and less than 21 days
	greenTime: function() {
		return this.timeDiff >= 86400 && this.timeDiff < 1814400;
	},
		
    type: 'OpusHRfieldStyle'
};

Each individual Field Style is then set as per below, calling the appropriate function:

javascript:new global.OpusHRfieldStyle().greenTime() && current.state == 24;

Then in the Style field I enter the required colour/style for the field - in my case it's 3 colours as per example below:

background-color:tomato;
color:red;

Now the field changes as needed based on the date field and the HR team is able to manage these much easier visually, see below

Hope this helps someone.

Cheers

Carl.

[pavan9885]

Hi,

Please find the below article this will help you 

https://docs.servicenow.com/bundle/newyork-platform-administration/page/administer/navigation-and-ui...