クライアント側スクリプトのユースケース

クライアントサイドスクリプトのユースケースには、フィールドメッセージの表示、フォームの色の変更、フィールドの追加、UI ルーティングアクションの作成などがあります。

サービスカタログのチェックアウトへのフィールドの追加

これは、カート以外のレイアウトマクロを使用して、[要求元：] フィールドの下のチェックアウトに [会社 (Company)] フィールドを追加する例です。つまり、glide.sc.use_cart_layouts は falseです。

始める前に

必要なロール：admin

このタスクについて

図 : 1. フィールドの要求元

このフィールドは、指定された値をサービスカタログ要求の [会社 ] フィールドに渡します。

この例では、次のことを前提としています。

• 2 ステップチェックアウトを使用するインスタンス。2 ステップチェックアウトが有効になっていない場合は、開始する前に有効にします。詳細については、「Service Catalog checkout models」を参照してください。
• この例では、サービスカタログ要求フォームの [会社] フィールドに値を入力します。フィールドがフォームに表示されない場合は、開始する前にフォームを設定します。手順については、「Personalize a form」を参照してください。

手順

1. [システム UI] > [UI マクロ] に移動し、[servicecatalog_cart_template] を選択します。
2. 非表示の変数が宣言されている箇所を見つけて、次の行を追加します。

   <input type="HIDDEN" name="cart_id" id="cart_id" value="$[sc_cart.sys_id]" />

3. 要求元コードを生成する次のコードを探します。

   <tr class="header">
   <td width = "30%">
     ${gs.getMessage('Requested for')}:
     </td>
     <td width="70%">
       <label for="requestor_location">${gs.getMessage('Deliver to')}:</label>
     </td>
   </tr>
   <tr><td>$[SP]</td> 
   </tr>
     <tr><td valign="top">
       <j2:if test="$[jvar_can_delta_rf == false]">
         $[sc_cart.requested_for.getDisplayValue()]
       </j2:if>
       <j2:if test="$[jvar_can_delta_rf != false]">
         <g2:catalog_requested_for />
       </j2:if>
     </td>
     <td>
       <textarea id="requestor_location" style="width:100%" rows="4"       name="requestor_location" wrap="soft" onChange="catDeliveryAddress('$[sc_cart.sys_id]', 'requestor_location');"> 
         $[sc_cart.delivery_address]
       </textarea>
     </td>
   </tr>
   <tr>
     <td>$[SP]</td>
   </tr>

4. その後に次のコードを追加します。

   <tr class="header">
     <td colspan="2">Company</td>
   </tr>
   <tr>
     <td>$[SP]</td>
   </tr>
   <tr>
     <td colspan="2">
       <g2:ui_reference name="core_company" table="core_company" onchange="setCartValue()"/>
     </td>
   </tr>
   <tr>
     <td>$[SP]</td>
   </tr>

   注:

   ui_reference マクロは参照フィールドを定義します。さまざまなフィールドタイプにいくつかのマクロがあります。これらのフィールドタイプの例は、[システム UI] -> [UI マクロ]で確認できます。これらのマクロは先頭が「 ui_」で始まります。この例では、作成される参照フィールドの名前は core_company です。詳細については、「UI マクロ」を参照してください。
5. [システム UI] > [UI ページ] に移動し、[servicecatalog_checkout_one] UI ページを選択します。
6. 次のスクリプトを [クライアントスクリプト] フィールドに追加します。

   function setCartValue() { 
     var newField = gel('core_company'); 
     var myCart = gel('cart_id'); 
     var cart_item = new GlideRecord('sc_cart_item');
     cart_item.addQuery('cart', myCart.value);
     cart_item.query(); 
     if(cart_item.next()) {
       cart_item.hints = "<hints><entry key='sysparm_processing_hint' value='setfield:request.company=" + newField.value + "'/></hints>";
       cart_item.update(); 
     } 
   }

   この例では、参照フィールドは core_company と呼ばれ、要求に応じて入力されるフィールドは company です。異なるフィールドを使用する場合：

   • 次の行を探します。var company = gel('core_company');。次に、core_company をチェックアウトのフィールドの名前に置き換えます。
   • 先頭が「cart_item.hints」で始まる行で、「request.company」を要求チケットに応じて入力されるフィールドの名前に置き換えます。ここで、「request」は生成される要求であり、「company」はフィールドの名前です。

タスクの結果

アイテムが注文されると、会社フィールドがカタログフォームに表示されます。

オートフィル機能の追加

オートフィル機能の追加は、インシデントテンプレート、自動アサイン、クイックコール、コールスクリプト、または自動入力とも呼ばれます。

選択したサブカテゴリに基づいて [簡単な説明] フィールドを自動入力するには:

1. ルックアップテーブルを作成します。
2. キーフィールドの [Subcategory] に入力します。
3. オートフィルされた [ 簡単な説明] フィールドに入力します。

function onChange(control, oldValue, newValue, isLoading) { 
  if (isLoading) { return; } 
  var newrec = gel('sys_row');
  //Check if new record
  if (newrec.value == -1) { 
    var lookup = new GlideRecord('u_short_desc_lookup'); 
    lookup.addQuery('u_subcategory', g_form.getValue('subcategory'));
    lookup.query();
    var temp; //temp var - reusable
    if (lookup.next()) {
      temp = lookup.u_short_description;
        if (null != temp) { //Set the form value from lookup if there is a lookup value
          g_form.setValue('short_description', temp); } 
        else {
          g_form.setValue('short_description', "" ); } } 
   else { 
     //If a lookup record does not exist based on lookup.addQuery 
     //Then set to UNDEFINED or NULL depending on type
      g_form.setValue('short_description', ""); } } 
}

多くのフィールドに入力したり、コールスクリプトの質問を [コメント ] フィールドに取り込んだりして、コールセンターの担当者が技術者に渡すための適切な情報を収集することができます。

パスワードをリセットするフィールドの設定

ルックアップテーブルに、次のキーとオートフィル設定を持つレコードがあります。

• サブカテゴリ = パスワード
• 簡単な説明 = パスワードリセット

クライアントスクリプト設定：

• タイプ = onChange
• テーブル名 = incident
• フィールド名 = サブカテゴリ

ユーザーがインシデントフォームで パスワード のサブカテゴリを選択すると、クライアントスクリプトは一致するレコードを検索し、簡単な説明を パスワードリセットに設定します。

ステータス変更時のフォームの色の変更

ステータス変更時にフォームのフォームフィールドの色を変更します。スクリプトは、HTML DOM を介してアクセス可能なページ上のオブジェクトのプロパティを調整するために、簡単に変更できます。

警告:

ここに記載されているカスタマイズは、特定のインスタンスで使用するために開発されたものであり、Now Support ではサポートされていません。この方法は現状のまま提供され、実装の前に完全にテストする必要があります。このカスタマイズに関するすべての質問およびコメントは、コミュニティフォーラムに投稿してください。

名前：ステータス変更時のフォームの色の変更

タイプ:クライアントスクリプト

説明：ステータス変更時にフォームのフォームフィールドの色を変更します。スクリプトは、HTML DOM を介してアクセス可能なページ上のオブジェクトのプロパティを調整するために、簡単に変更できます。

Script (スクリプト)：

function onChange(control, oldValue, newValue, isLoading) { 
  var elementID = gel("incident.priority");
    switch(newValue) { 
      case "1": elementID.style.backgroundColor = "red"; break; 
      case "2": elementID.style.backgroundColor = "tomato"; break;
      case "3": elementID.style.backgroundColor = "orange"; break;
      case "4": elementID.style.backgroundColor = "yellow"; break;
      case "5": elementID.style.backgroundColor = "green"; break; 
      default: elementID.style.backgroundColor = "white"; break; } }

UI ルーティングアクションの作成

このソリューションを使用すると、インシデントまたは要求アイテムのどちらであるかを知らなくても、サービスデスクでレコードを作成できます。その後、サービスデスクはレコードを適切なテーブルにルーティングできます。

始める前に

必要なロール: admin

手順

1. タスクテーブルを拡張する新しいテーブルを作成します (「新規コール」など)。
2. 新しい新規コールレコードを作成するモジュールを作成します。
3. 新規コールテーブルに必要なフィールドを作成します。

   新規コールをインシデントまたは要求アイテムのどちらにルーティングするかを決定するために必要なフィールドのみが必要とされます。フォームに、インシデントまたは要求アイテムに渡すフィールドが含まれていることを確認します。この例では、フォームに次のものが作成されます。

   • 要求元 (参照)
   • 場所 (参照)
   • コールタイプ (インシデントと要求の 2 つの値を持つ選択肢)
   • 要求アイテム (sc_cat_item アイテムテーブルへの参照)
4. いくつかの UI ポリシーを追加して、いくつかのフィールドを必須に設定し、[コールタイプ] の選択に基づいて [要求アイテム] フィールドを非表示にします。
5. 不要なボタンや機能をフォームから削除します。
6. 新しい UI アクションボタンを作成します。
   このボタンにより、ユーザーはインシデントまたは要求にリダイレクトされます。また、インシデントレコードが作成され、インシデントと要求アイテムフォームに値がコピーされます。

   var reqItem = current.u_item;
   var requestedFor = current.u_requested_for;
   var location = current.location;
   
   if(current.u_incident_request == 'Incident'){
     //Create a new incident record and redirect to the new incident
     var rec = new GlideRecord('incident');
     rec.initialize();
     rec.caller_id = requestedFor;
     rec.location = location;
     rec.insert();
     action.setRedirectURL(rec);
   }
   
   if(current.u_incident_request == 'Request'){
     //Build the url and route the user to the request item
     var url = '';
     if(current.u_item.sys_class_name == 'sc_cat_item_guide'){
       url = 'com.glideapp.servicecatalog_cat_item_guide_view.do?sysparm_initial=true&sysparm_guide=' + 
         reqItem + '&sysparm_user=' + requestedFor + '&sysparm_location=' + location;
     }
     else{
       url = 'com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=' + reqItem + '&sysparm_user=' +  
         requestedFor + '&sysparm_location=' + location;
     }
     action.setRedirectURL(url);
   }

7. 前の例の [ルーティング] ボタンは、URL の [要求元] と [場所] の値を [要求アイテム] フォームに渡します。
   次のクライアントスクリプトを使用して、これらの値をマッピングするアイテム、レコードプロデューサー、または注文ガイドに requested_for および location と呼ばれる変数があることを確認します。URL の長さには制限があるため、渡すことができる情報の量には制限があります。この方法を使用して長いテキストフィールドからの情報は送信しないでください。

   function onLoad() {
     var url = document.location.toString();
     var userKey = 'sysparm_user=';
     var locKey = 'sysparm_location=';
     var userPosition = url.indexOf(userKey);
     var locPosition = url.indexOf(locKey)
     if (userPosition != -1) {
       var user = url.substr(userPosition+userKey.length, 32);
       g_form.setValue('requested_for', user);
     }
     if (locPosition != -1) {
       var loc = url.substr(locPosition+locKey.length, 32);
       g_form.setValue('location', loc);
     }
   }

フィールドメッセージの表示

JavaScript alert() を使用する代わりに、見た目をすっきりさせるために、フォーム自体にエラーを表示できます。メソッド showFieldMsg() および hideFieldMsg() を使用して、フィールド自体のすぐ下にメッセージを表示できます。

showFieldMsg と hideFieldMsg は、g_form オブジェクトで使用できるメソッドです。

これらのメソッドは、レコード (インシデント、問題、および変更フォーム) のフォームビューを変更するために使用されます。これらのメソッドは他のクライアントスクリプトでも使用できますが、期待どおりに機能するかどうかを確認するためにテストする必要があります。

ロード時にフォームにフィールドメッセージが表示されると、フォームがスクロールしてフィールドメッセージが表示されます。フィールドメッセージが画面の外にあったためにユーザーが見落とすということがないようにします。

グローバルプロパティ glide.ui.scroll_to_message_field は、フォームフィールドが画面外にある場合の自動メッセージのスクロール (フォームからコントロールまたはフィールドまでスクロール) を制御します。

表 : 1. メソッドの詳細

メソッドの詳細	パラメーター	例
showFieldMsg(input, message, type, [scrollform])	入力：フィールドまたはコントロールの名前 メッセージ：表示するメッセージ タイプ：「情報」、「エラー」、または「警告」。指定しない場合のデフォルトは「情報」 スクロールフォーム：(オプション) フィールドメッセージが画面外にスクロールしないようにするには、scrollForm を false に設定します	エラーメッセージ g_form.showFieldMsg('impact','Low impact not allowed with High priority','error'); 情報メッセージ g_form.showFieldMsg('impact', 'Low impact response time can be one week','info'); //or this defaults to info type //g_form.showFieldMsg('impact', 'Low impact response time can be one week');
hideFieldMsg(input)	入力：フィールドまたはコントロールの名前 clearAll：(オプション) すべてのメッセージをクリアするかどうかを示すブールパラメーター。true の場合、フィールドのすべてのメッセージがクリアされます。false または空の場合、最初のメッセージのみが削除されます	メッセージの削除 //this will clear the first message printed to the field g_form.hideFieldMsg('impact');

従来のサポート

showErrorBox() メソッドと hideErrorBox() メソッドは推奨されません。

UI アクションでのクライアントおよびサーバーコードの使用

スクリプトを使用して、サーバー側でレコードを更新する前に、クライアント側で UI アクションがクリックされたときに入力を検証できます。ユーザーは、必須フィールドを検証してレコードを更新するのにボタンを 2 回クリックする必要はありません。

スクリプトはクライアント側の検証のためにクライアント関数を呼び出し、合格すると UI アクションがタスクを完了します。onclick なしで実行されるコードのステートメントは 、クライアント関数が実行されなくなるまでサーバー側の関数が実行されないようにします。成功すると、サーバー側の関数が実行され、レコードが更新されます。

// Client-side onclick function
function resolveIncident() {
  // Set the 'Incident state' and 'State' values to 'Resolved', and display mandatory fields
  g_form.setValue('incident_state', 6);
  g_form.setValue('state', 6);
  g_form.setValue('resolved_by', g_user.userID);

  // Call the UI action and skip the 'onclick' function
  gsftSubmit(null, g_form.getFormElement(), 'resolve_incident'); //MUST call the 'Action name' set in this UI Action
}

// Code that runs without 'onclick'
// Ensure call to server-side function with no browser errors
if (typeof window == 'undefined')
  serverResolve();

// Server-side function
function serverResolve() {
  current.incident_state = IncidentState.RESOLVED;
  current.state = IncidentState.RESOLVED;
  current.resolved_by = gs.getUserID();
  current.update();
}

gsftSubmit(文字列 control, オブジェクト form, 文字列 action_name)

必須フィールドを確認し、onSubmit() クライアントスクリプトを実行した後、ユーザーが UI アクションをクリックした場合と同様にフォームを送信します。単一の UI アクションでクライアント側のコードとサーバー側のコードを呼び出すことができます。

表 : 2. パラメーター

名前	タイプ	説明
コントロール	文字列	ユーザーのクリックをシミュレートするフォームボタンの名前。それ以外の場合は null を使用します。
フォーム	オブジェクト	オプション。送信された入力を含むフォーム要素。この値を取得するには、g_form.getFormElement() メソッドを呼び出します。
action_name	文字列	アクション名。この値は、UI アクション [sys_ui_action] テーブルにリストされているレコードで提供されます。 たとえば、'resolve_incident' は、インシデント [incident] テーブルの [解決] ボタンのアクション名です。

関連概念

• GlideUser - クライアント

関連資料

• GlideForm - getFormElement()
• スコープ対象 GlideSystem - eventQueue(文字列 name, オブジェクト instance, 文字列 parm1, 文字列 parm2, 文字列 queue)

関連情報

• Defining UI actions