Wednesday, June 28, 2017

How to add custom text and icon to fields based on specific conditions in Service Now

Requirement -
1. Based on 'Caller' attribute on Incident form, Display a text(Public Sector Employee) in red color right below the 'Caller' field

2. Display 'Red Color' icon next to 'Caller' field on 'Incident' List view


Solution

1. Create a Client script as shown below
2. Write below script
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;
var bgPosition = "95% 55%";
//check for VIP status
if (caller.vip == 'true') {
g_form.showFieldMsg("caller_id", "VIP", "error");
if (document.documentElement.getAttribute('data-doctype') == 'true')

callerField.setStyle({color: "red"});
}
// Check for federal status
else if(caller.u_company_cd == '198'){

g_form.showFieldMsg("caller_id", "Public Sector Employee", "error");
if (document.documentElement.getAttribute('data-doctype') == 'true')

callerField.setStyle({color: "red"});
}

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

}
}

3. Create a below style , to show 'red color' icon next to 'Caller' field in Incident List view.