Is it possible to do equivalent of addDecoration on List view?

[Shane J]

I've setup a Client script to replace the VIP icon with one of the retina icons ( https://your_instance/styles/retina_icons/retina_icons.html) on the Incident form.  I'd like to do the same thing in the List view via Field style but have no idea how to do so.

Here is the Field style OOB that shows the VIP icon instead (it's very similar to the OOB onChange Client Script that shws it on the form):

background-image: url('images/icons/vip.gif');
background-repeat: no-repeat;
background-position: 98% 55%;
padding-right: 30px;

[Mike Patel]

I have below but not sure if it will work on UI16. It works on UI15

[Shane J]

That's the OOB one that shows the VIP icon.  I want to replace it with one of the retina icons, like alert-star.

This is the onChange Client Script doing it on the form right now (important bits bolded😞

function onChange(control, oldValue, newValue, isLoading) {
var callerLabel = $('label.incident.caller_id');
var callerField = $('sys_display.incident.caller_id');
if (!callerLabel || !callerField)
return;

if (!newValue) {
callerLabel.setStyle({backgroundImage: ""});
callerField.setStyle({color: ""});
return;
}
g_form.getReference('caller_id', vipCallerCallback);
}

function vipCallerCallback(caller) {
var callerLabel = $('label.incident.caller_id').down('label');
var callerField = $('sys_display.incident.caller_id');
if (!callerLabel || !callerField)
return;

//check for VIP status
if (caller.vip == 'true') {
var bgPosition = "95% 55%";
if (document.documentElement.getAttribute('data-doctype') == 'true')
bgPosition = "5% 45%";

callerLabel.setStyle({color: "#e34234" });
callerField.setStyle({color: "#e34234"});
g_form.addDecoration('caller_id', 'icon-star', 'VIP');
} else {
callerLabel.setStyle({backgroundImage: "", color: ""});
callerField.setStyle({color: ""});
g_form.removeDecoration('caller_id', 'icon-star', 'VIP');
}
}

[Jim Coyne · Accepted solution]

I don't know if you found a solution to this or not, but the nice thing about ServiceNow is there are so many ways to get it to do what we want.

Instead of using an actual retina icon in the list view, grab a screenshot of it from the form view and then upload it as a new 16x16 Image (System UI \ Images) record and then use it in the Style record:

background-image: url('u_retina-vip.pngx');
background-repeat: no-repeat;
background-position: 98% 5px;
padding-right: 30px;

The list view will look better if you add another style where vip == false and reference an image that has a transparent background:

background-image: url('_blank16x16.gifx');
background-repeat: no-repeat;
background-position: 98% 5px;
padding-right: 30px;

The retina "icon" will look best with a transparent background as well (I did not bother here).

[Jim Coyne]

Forgot to add the "_blank16x16.gif" in the previous post in case anyone wants it.