Icon styles beside fields

[Vedavalli]

Hi 
BESIDE CALLER FIELD vip icon is coming so i wanted show another icon like occ if called location starts with SH . If caller is vip then vip icon if caller location name starts with occ then occ icon is it possible?if yes how we can do

[GlideFather]

@Vedavalli usually the icons can be stored at UI System > Images, but the VIP.gif is not there...

I googled and found this:

https://yourinstance.service-now.com/image_picker.do

But you can upload your picture to the Images and link it..

[ArpithaMenden]

Hello @Vedavalli 

Yes, it is possible , there is already a OOB script showing the VIP badge for the callers. You can extend this exact script to add your OCC icon logic

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading) return;

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

if (!newValue) {
callerLabel.setStyle({ backgroundImage: "" });
callerField.setStyle({ color: "" });
return;
}

// Get caller reference
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;

// Reset styles
callerLabel.setStyle({ backgroundImage: "", paddingLeft: '' });
callerField.setStyle({ color: "" });

// Default background position
var bgPosition = "95% 55%";
if (document.documentElement.getAttribute('data-doctype') == 'true')
bgPosition = "5% 45%";

// ✅ Check VIP condition
if (caller.vip == 'true') {
callerLabel.setStyle({
backgroundImage: "url(images/icons/vip.gif)",
backgroundRepeat: "no-repeat",
backgroundPosition: bgPosition,
paddingLeft: '30px'
});
callerField.setStyle({ color: "red" });
}

// ✅ Check OCC condition (if location starts with 'SH')
else if (caller.location && caller.location.display_value.startsWith('SH')) {
callerLabel.setStyle({
backgroundImage: "url(images/icons/building.gif)", // replace with your OCC icon path
backgroundRepeat: "no-repeat",
backgroundPosition: bgPosition,
paddingLeft: '30px'
});
callerField.setStyle({ color: "blue" }); // optional style for OCC users
}
}

Please mark this response as correct and helpful if it assisted you with your question.

Regards,

Arpitha M

[Ankur Bawiskar]

@Vedavalli 

where you want this? native or workspace?