Tips: Using JQuery on Table Form.

[ICL Services EM]

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 = "<div id='incidentBanner'>";
          bannerContent += "<img id='bannerIcon' src='/images/icons/icon-warning@2x.png'>"; 
          bannerContent += "<div><strong>" + number + "</strong></div>";
          bannerContent += "<div><strong>State:</strong>&nbsp;" + stateLabel + "</div>";
          bannerContent += "<div><strong>Priority:</strong>&nbsp;" + priorityLabel + "</div></div>";
  
    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://<Instance_Name>.service-now.com/nav_to.do?uri=%2Fimage_picker.do


Olga Osipova
ServiceNow developer
ICL Services

[PoojashreeP]

Hi,

I need a help on jQuery, to hide and show the fields in Embedded list based on form field changes.

Best Regards,

Pooja