How to move the VIP Icon inside the caller field

[Atheher Fathima]

Hi All,

I would like to display the VIP Icon inside the caller field. I was able to update this in sys_user table using the styles however this is not working in Incident form.

I would like the VIP image to show up as below

Below is the field style :

below is the client script. If I try the bgposition greater than 100% it gets hidden

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.u_vip == "vip") {
var bgPosition = "100% 100%";
if (document.documentElement.getAttribute('data-doctype') == 'true')
bgPosition = "100% 100%";

callerLabel.setStyle({backgroundImage: "url('6.png')", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, paddingright: '20px' });
callerField.setStyle({color: "red"});


} else {
callerLabel.setStyle({backgroundImage: ""});
callerField.setStyle({color: ""});
}
}

[Paul Curwen]

You will not be able to insert the VIP icon (as per your first image) inside the fields area without heavy DOM manipulation which is not recommended, or future proof. Advice is stick to the standard way of highlighting the field. 

If users are missing the icon, then other options are to color the background of the filed or this can also be done using g_form.addDecoration

see: https://developer.servicenow.com/dev.do#!/reference/api/tokyo/client/c_GlideFormAPI#r_GlideFormAddDe...