As we know, there are not so many out-of-the-box methods for making a table form more good-looking and user-attractive. Speaking about conditional field highlighting, field style settings are not applicable as they would work only on the list.

Positive solution is suggested by HI knowledge article: How to add an image icon next to a field value on a form. An example of this method is an out-of-the-box client script called 'Highlight VIP Caller'. Generally, it uses Prototype.js Javascript framework, which is not so well-known and widely used comparing to JQuery: http://prototypejs.org/.

So, it is worth trying to play with JQuery library that offers much more interesting and optimal methods for page decoration.

Below there is a couple of ideas for including JQuery functions into client scripts.

First of all, we should not forget about setting to false the 'Isolate script' option:

And second, use jQuery.noConflict(); to avoid naming interference.

First example 🢥 Simple case of adding an icon to a caller field on incidents if caller is administrator:

function onChange(control, oldValue, newValue, isLoading, isTemplate) { if (newValue === '') { return; } var $jquery = jQuery.noConflict(); var fieldId = 'sys_display\.incident\.caller_id'; var userField = $jquery('#' + fieldId); userField.css({backgroundImage: ""}); var bgPosition = "95% 55%"; var user = g_form.getValue('caller_id'); if (user == '6816f79cc0a8016401c5a33be04be441') {

var style = {

backgroundImage: "url(images/icons/administration.gif)",

backgroundRepeat: "no-repeat", backgroundPosition: bgPosition }

userField.css(style);

}

}

Second example 🢥 Adding a banner with a fixed position on the incident form which may be useful as a warning/reminder

for involved parties. The banner could be hidden by clicking on it and is transparent to not worsen the visibility of form content.

function onChange(control, oldValue, newValue, isLoading, isTemplate) { if (newValue === '') { return; } var $jquery = jQuery.noConflict(); $jquery('#incidentBanner').remove(); //remove Previous Banner var fieldId = 'element\.incident\.state'; var fieldElem = $jquery('#' + fieldId); var stateValue = g_form.getValue('state'); var stateLabel = g_form.getOption('state', stateValue).text; var priorityValue = g_form.getValue('priority'); var priorityLabel = g_form.getOption('priority', priorityValue).text; var number = g_form.getValue('number'); var bannerContent = "

"; var bannerStyle = { "background-color": "rgba(255, 170, 128, 0.3)", "width": "11%", "border-style": "1px solid", "border": "1px solid rgb(250, 153, 105)", "border-radius": "3px", "position": "fixed", "top": "80px", "right": "30px", "padding": "10px", "z-index": "1000", "color": "rgb(186, 62, 0)" }; var iconStyle = { "position": "fixed", "top": "95px", "right": "50px" }; if ($jquery('document').ready()) {

fieldElem.append(bannerContent); $jquery('#incidentBanner').css(bannerStyle); $jquery('#bannerIcon').css(iconStyle); $jquery('#incidentBanner').click(function() { $jquery(this).slideUp(); $jquery('#bannerIcon').slideUp(); }); }
}

Interesting point 🢥 The icon library catalog is located there:

https://.service-now.com/nav_to.do?uri=%2Fimage_picker.do

Olga Osipova

ServiceNow developer

ICL Services