GlideModal - クライアント

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：23分

    • GlideModal API は、モーダルと呼ばれるコンテンツオーバーレイを表示するためのメソッドを提供します。モーダルは、ページの上に表示され、ユーザーがアクションを実行すると閉じるインタラクティブなウィンドウです。モーダルを使用して、情報を表示したり、質問したり、アクションを実行したりすることができます。

    クライアントサイド JavaScript を使用できる任意の場所で、スクリプトで GlideModal メソッドを使用します。これらのメソッドは、ほとんどの場合 [クライアント] チェックボックスがオンになっている UI アクションから呼び出されます。

    ネクストエクスペリエンス UI の 構成可能ワークスペース でのモーダルオプションと互換性については、以下を参照してください。
    図 : 1. モーダルの例
    オーバーレイの例
    モーダルには、次のようなさまざまなタイプのコンテンツを含めることができます。
    • 静的テキスト
    • 動的テキスト
    • Forms
    • イメージ
    • ボタン
    この API を使用すると、次のことができます。
    • 既存のモーダルを取得します。
    • UI ページまたは渡された HTML からモーダルコンテンツを作成します。
    • モーダルでタイトルを設定します。
    • モーダルの幅を設定します。
    • 設定を取得して設定します。
    • モーダルビューを切り替えます。
    モーダルを UI に表示するには、次のいずれかの render メソッドを呼び出す必要があります。
    次のコード例は、UI ページの「UI_dialog_name」を使用してモーダルを作成およびレンダリングする方法を示しています。
    var dialog = new GlideModal("UI_dialog_name");

//Set the dialog title
dialog.setTitle('Show title');

//Set the dialog width		      	
dialog.setWidth(550);

//Display the modal
dialog.render();

    このコード例は、 renderWithContent() メソッドと HTML を使用してモーダルを作成およびレンダリングし、モーダルのコンテンツを定義する方法を示しています。

    function cancelDialog(){

  var dialog = new GlideModal('cancelTask');
  //Sets the dialog title
  dialog.setTitle('Cancel Task');
  //Set up valid custom HTML to display
  dialog.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
    <p><select name="cancellation" id="taskCancellation" class="form-control">
    <option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
    <option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
    </select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())"      class="btn btn-default">Abort</button><button style="padding:5px" class="btn btn-primary"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">Cancel Task</button></div></div>');

  //Use the windows object to ensure the code is accessible from the modal dialog
  window.changeTaskAction = function(thisButton, thisAction){

    //Close the GlideModal dialog window
    dialog.destroy();

    //Submit to the back-end
    if(thisButton=='Cancel Task'){
      if(thisAction=="cancelAll"){
        g_form.setValue('state',4);//Closed Incomplete -- will close the Requested Item and all other open tasks
      }else{
        g_form.setValue('state',7);//Closed Skipped -- will only close this task
      }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };
   return false;//Prevents the form from submitting when the dialog first load
}
    注:
    これは、 GlideWindow API と GlideDialogWindow API のフル機能の代替です。

    GlideModal - GlideModal(文字列 id, ブール readOnly, 数値/文字列の幅)

    GlideModal クラスのインスタンスを作成します。

    表 : 1. パラメーター
    名前 タイプ 説明
    ID 文字列 モーダルにロードするUI ページ の名前。

    ベースシステムで提供される glide_modal_confirm モーダルまたはモーダル glide_modal_info のいずれかを指定することもできます。

    テーブル:UI ページ [sys_ui_page]
    readOnly ブーリアン オプション。モーダルのコンテンツが読み取り専用かどうかを示すフラグ。
    有効な値：
    • true:コンテンツは読み取り専用です。
    • false:ユーザーはコンテンツを変更できます。

    デフォルト値：false
    幅 数値または文字列 オプション。モーダルの幅 (ピクセル単位) またはモーダル CSS クラス。ピクセル幅が渡されると、指定された幅が対応する CSS クラスに揃えられます。
    可能なモーダル CSS クラス:
    • modal-alert:(300 px) 指定された幅が 0〜349 ピクセルの場合に割り当てられます。
    • modal-sm:(400 px) 指定された幅が 350〜449 ピクセルの場合に割り当てられます。
    • modal-md:(600 px) 指定された幅が 450〜649 ピクセルの場合に割り当てられます。
    • modal-lg:(900 px) 指定された幅が 650〜900 ピクセルの場合に割り当てられます。

    デフォルト:modal-md

    最大幅:900 ピクセル

    注:
    setWidth() メソッドを使用してモーダルの幅を設定することもできます。

    次のコード例は、既存の UI ページを使用して GlideModal オブジェクトを作成する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

//Set the dialog title
dialog.setTitle('Show title'); 

//Set the desired preferences
dialog.setPreference('table', 'task'); 			
dialog.setPreference('name', 'value');        	

//Opens the dialog
dialog.render();

    次のコード例は、 glide_modal_confirm ファイルを使用して GlideModal オブジェクトを作成する方法を示しています。

    var dialog = new GlideModal('glide_modal_confirm', true, 300);
dialog.setTitle(new GwtMessage().getMessage('Confirmation'));
dialog.setPreference('body', new GwtMessage().format("This will complete all update sets in the batch. Continue changing state to complete?"));
dialog.setPreference('focusTrap', true);
dialog.setPreference('onPromptComplete', doComplete);
dialog.setPreference('onPromptCancel', doCancel);
dialog.render();
	
function doComplete() {
  callback(true);
}
	
function doCancel() {
  callback(false);
}

    GlideModal - destroy()

    現在のモーダルを閉じます。

    表 : 2. パラメーター
    名前 タイプ 説明
    なし なし なし
    表 : 3. 返される内容
    タイプ 説明
    なし なし

    次のコード例は、 destroy() メソッドを使用してモーダルを閉じる方法を示しています。

    function cancelDialog(){

var gmod = new GlideModal('cancelTask');
  //Sets the dialog title
  gmod.setTitle('Cancel Task');
  //Set up valid custom HTML to be displayed
  gmod.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
    <p><select name="cancellation" id="taskCancellation" class="form-control">
    <option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
    <option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
    </select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())"      class="btn btn-default">Abort</button><button style="padding:5px"      class="btn btn-primary" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">
    Cancel Task</button></div></div>');

  //Use the windows object to ensure our code is accessible from the modal dialog
  window.changeTaskAction = function(thisButton, thisAction){

    //Close the glide modal dialog window
    gmod.destroy();

    //Submit to the back-end
    if(thisButton=='Cancel Task'){
      if(thisAction=="cancelAll"){
        g_form.setValue('state',4); //Closed Incomplete -- closes the Requested Item and all other open tasks
      }else{
        g_form.setValue('state',7); //Closed Skipped -- only closes this task
      }
      //Regular ServiceNow form submission
      gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
    }
  };
  return false; //Prevents the form from submitting when the dialog first load
}

    次のコード例は、 GlideModal.get().destroy() を使用してモーダルを閉じる方法を示しています。

    // The following button should be declared somewhere in the UI page HTML.
<button onclick="closeMe()">close</button>

// The following code is in the client script.
function closeGlideModal() {
  try {
    GlideModal.get().destroy();
  }catch(err){
    console.warn("closeGlideModal ERROR: "+err.message);
    var x = document.getElementById('THE_NAME_OF_YOUR_UI_PAGE' + '_closemodal');
    if (x) {
      x.click();
    } else {
      console.warn("No 'X' close button found!");
    }
  }
}
function closeMe() {
  setTimeout(function(){
    closeGlideModal();
  },100);
}

    GlideModal - get(文字列 id)

    指定された UI ページ名で識別される GlideModal オブジェクトを返します。

    このメソッドを使用して、 GlideModal.get().destroy() などの他の GlideModal 操作で使用する GlideModal オブジェクトを取得します。

    表 : 4. パラメーター
    名前 タイプ 説明
    ID 文字列 モーダルに関連付けられたUI ページ の名前。

    ベースシステムで提供される glide_modal_confirm モーダルまたはモーダル glide_modal_info のいずれかを指定することもできます。

    テーブル:UI ページ [sys_ui_page]
    表 : 5. 返される内容
    タイプ 説明
    GlideModal 要求された GlideModal オブジェクト。

    この例では、 get() メソッドを使用して、 destroy() メソッドを使用して閉じるモーダルを取得する方法を示します。

    // If the modal was initially created like this:

var dialog = new GlideModal("glide_modal_confirm"); 
dialog.render();

//Some code using the modal
.
.
.

//Now use the get() and destroy() methods to close the modal
var glideModal = new GlideModal().get("glide_modal_confirm");
glideModal.destroy();

//You could also code it like this:
GlideModal.prototype.get('glide_modal_confirm').destroy();

    GlideModal - getPreference(文字列名)

    指定された preference (プロパティ) の値を返します。

    モーダルを作成するアクションを呼び出すと、通常は GlideModal - setPreference(文字列名, 文字列値) メソッドを使用してモーダルに必要な設定も作成されます。 UI ページクライアントスクリプトは このメソッドを使用してこれらの設定を使用できます。

    表 : 6. パラメーター
    名前 タイプ 説明
    名前 文字列 取得する設定値の名前。この値は、 setPreference() メソッドを使用してモーダルで事前に設定されている必要があります。
    表 : 7. 返される内容
    タイプ 説明
    文字列 指定された設定の値。

    この例は 設定を設定し、指定されたモーダルからその設定を取得する簡単なケースを示しています。

    var dialog = new GlideModal('UI_dialog_name');
//Sets the dialog title
dialog.setTitle('Modal title');

//Sets the value of the preference table
dialog.setPreference('table', 'incident');

//Gets the value of the preference table
var title = dialog.getPreference('table');

    GlideModal:レンダリング()

    モーダルで API がインスタンス化されたときに指定された UI ページをレンダリングします。UI に表示するには、モーダルを定義した後にこのメソッドを呼び出す必要があります。

    UI ページを使用してモーダルのコンテンツを生成する場合は、このメソッドを呼び出します。モーダル内に HTML を表示する場合は、 GlideModal - renderWithContent(文字列 html) を呼び出してモーダルをレンダリングします。

    表 : 8. パラメーター
    名前 タイプ 説明
    なし
    表 : 9. 返される内容
    タイプ 説明
    なし なし

    次のコード例は、UI ページ「UI_dialog_name」を使用して GlideModal オブジェクトをインスタンス化し、モーダルのタイトルと幅を設定してから、UI (レンダリング) にモーダルを表示する方法を示しています。

    var dialog = new GlideModal("UI_dialog_name");

//Set the dialog title and width
dialog.setTitle('Show title');		      	
dialog.setWidth(550);

//Display the dialog
dialog.render();

    GlideModal - renderWithContent(文字列 html)

    指定された文字列ベースの HTML コンテンツを含むモーダルを表示します。

    HTML からモーダルコンテンツを派生させる場合は、render() メソッドの代わりに renderWithContent() メソッドを使用します。

    表 : 10. パラメーター
    名前 タイプ 説明
    html 文字列 モーダルに表示する HTML コンテンツ。
    表 : 11. 返される内容
    タイプ 説明
    なし なし

    このコード例は、ユーザーが選択できる選択肢のリストを含む、渡された HTML 文字列を使用して構築されたモーダルを表示する方法を示しています。

    function cancelDialog(){

  var dialog = new GlideModal('cancelTask');
  //Sets the dialog title
  dialog.setTitle('Cancel Task');
  //Set up valid custom HTML to display
  dialog.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
    <p><select name="cancellation" id="taskCancellation" class="form-control">
    <option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
    <option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
    </select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())"      class="btn btn-default">Abort</button><button style="padding:5px" class="btn btn-primary"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">Cancel Task</button></div></div>');

  //Use the windows object to ensure the code is accessible from the modal dialog
  window.changeTaskAction = function(thisButton, thisAction){

    //Close the GlideModal dialog window
    dialog.destroy();

    //Submit to the back-end
    if(thisButton=='Cancel Task'){
      if(thisAction=="cancelAll"){
        g_form.setValue('state',4);//Closed Incomplete -- will close the Requested Item and all other open tasks
      }else{
        g_form.setValue('state',7);//Closed Skipped -- will only close this task
      }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };
   return false;//Prevents the form from submitting when the dialog first load
}

    GlideModal - setPreference(文字列名, 文字列値)

    現在のフォームの指定されたフィールドを指定された値に設定します。

    表 : 12. パラメーター
    名前 タイプ 説明
    名前 文字列 更新するフォームフィールドの名前。

    このフィールドが現在のフォームに存在しない場合、要求は無視されます。
    value 文字列 指定されたフォームフィールドに格納する値。
    表 : 13. 返される内容
    タイプ 説明
    なし なし

    次のコード例は、 table 設定を「task」に設定し、 name 設定を「value」に設定する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

//Set the dialog title
dialog.setTitle('Show title'); 

//Set the desired preferences
dialog.setPreference('table', 'task'); 			
dialog.setPreference('name', 'value');        	

//Opens the dialog
dialog.render();

    GlideModal - setPreferenceAndReload(アレイプロパティ)

    指定された設定を行い、モーダルを再ロードします。

    表 : 14. パラメーター
    名前 タイプ 説明
    プロパティ アレイ 設定として設定する名前と値のペア。
    表 : 15. 返される内容
    タイプ 説明
    なし なし

    GlideModal - setTitle(文字列タイトル)

    モーダルのタイトルを設定します。

    表 : 16. パラメーター
    名前 タイプ 説明
    title 文字列 モーダルのタイトルに表示するテキスト。
    表 : 17. 返される内容
    タイプ 説明
    なし なし

    次のコード例は、モーダルタイトルを「更新するテーブル」に設定する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

//Sets the dialog title
dialog.setTitle('Table to update'); 
dialog.setPreference('table', 'task'); 			      	
dialog.setWidth(550);

//Opens the dialog
dialog.render();

    GlideModal - setWidth(数値/文字列の幅)

    モーダルの幅 を設定します。

    GlideModal - GlideModal(文字列 id, ブール readOnly, 数値/文字列の幅)メソッドを使用して最初に API をインスタンス化するときに、モーダルの幅を設定することもできます。

    表 : 18. パラメーター
    名前 タイプ 説明
    幅 数値または文字列 モーダルの幅 (ピクセル単位) またはモーダル CSS クラス。ピクセル幅が渡されると、指定された幅が対応する CSS クラスに揃えられます。
    可能なモーダル CSS クラス:
    • modal-alert:(300 px) 指定された幅が 0〜349 ピクセルの場合に割り当てられます。
    • modal-sm:(400 px) 指定された幅が 350〜449 ピクセルの場合に割り当てられます。
    • modal-md:(600 px) 指定された幅が 450〜649 ピクセルの場合に割り当てられます。
    • modal-lg:(900 px) 指定された幅が 650〜900 ピクセルの場合に割り当てられます。

    最大幅:900 ピクセル
    表 : 19. 返される内容
    タイプ 説明
    なし なし

    次のコード例は、モーダルの幅を 550 ピクセルに設定する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

//Sets the dialog title
dialog.setTitle('Show title'); 
dialog.setPreference('name', 'value'); 			      	
dialog.setWidth(550);

//Opens the dialog
dialog.render();

    GlideModal - switchView(文字列 newView)

    ビューを変更し、モーダルを再ロードします。

    表 : 20. パラメーター
    名前 タイプ 説明
    newView 文字列 使用するビュー。
    表 : 21. 返される内容
    タイプ 説明
    なし なし

    GlideModal - updateTitle(

    GlideModal setTitle() メソッドを使用して指定されたタイトルを更新します。

    変更をコミットするには、常に最初に GlideModal (ネクストエクスペリエンス):setTitle(文字列タイトル) を呼び出し、 updateTitle() を使用してモーダルタイトルを指定する必要があります。

    表 : 22. パラメーター
    名前 タイプ 説明
    なし
    表 : 23. 返される内容
    タイプ 説明
    なし

    次の例は、 setTitle() と updateTitle() をそれぞれ呼び出して、モーダルのタイトルを設定および更新する方法を示しています。

    var modal = new nowapi.GlideModal();
		modal.renderWithContent('TEST CONTENT');

		setTimeout(function(){
			modal.setTitle("TEST setTitle() AND updateTitle() METHODS"); // will only update the `title` prop, updateTitle() must be called to see change
			modal.updateTitle();
		}, 3000);