ご存じのように、テーブルのフォームを装飾するようなすぐに使える方法が多くないです。

例えば、GlideForm - addDecorationとか、フィールドスタイル設定のことです。

そんな方法の例は、「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 = "

"; 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://.service-now.com/nav_to.do?uri=%2Fimage_picker.do

オシポワ オリガ

ITエンジニア

ICL Services

Labels:

• Multiple Versions
• User Experience and Design