ServiceNowでJQueryを使う方法。

[ICL Services EM]

ご存じのように、テーブルのフォームを装飾するようなすぐに使える方法が多くないです。
例えば、GlideForm - addDecorationとか、フィールドスタイル設定のことです。

「addDecoration」はフィールドにアイコンを付ける簡単な強調表示の方法です。フィールドに条件付きもっと高度な強調表示を適用したい場合は、フィールドスタイル設定はリストでしか動きませんので、他の方法が要ります。

HIナレッジ記事はいいアイディアを提供します：How to add an image icon next to a field value on a form.

そんな方法の例は、「Highlight VIP Caller」と言うすぐに使えるクライアントスクリプトです。
一般的には、Prototype.js フレームワークが使用されています。でも、Prototype.jsよりJQueryの方がもっと人気がある強力なフレームワークです。

したがって、ページ装飾のにJQueryライブラリを使ってみましょう。

以下には、クライアントスクリプトのいくつかの例があります。
まず、「Isolate script」オプションをfalseに設定することは大切です。

次に、ネーミング問題を除外するようにjQuery.noConflict(); を使用しましょう。

最初の簡単な例 🢥 「Caller」が管理者の場合にインシデントの「Caller」フィールドにアイコンを追加すること：

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); 
     }
}

2番目の例 🢥 インシデントフォームに固定位置のバナーを追加することです。これは警告/リマインダーとして関係者に役に立てます。バナーはクリックで非表示できるし、フォームコンテンツの視認性を低下させないように透明です。

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();
        });
    }
}

注 🢥 スクリプトで使えるアイコンのライブラリカタログは以下のリンクに見つかれます：
https://<Instance_Name>.service-now.com/nav_to.do?uri=%2Fimage_picker.do


オシポワ　オリガ

ITエンジニア
ICL Services