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

function cancelDialog(){

  var dialog = new nowapi.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 task but keep 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"){
        // Closed Incomplete -- will close the Requested Item and all other open tasks
        g_form.setValue('state',4);
      }else{
        // Closed Skipped -- will only close this task
        g_form.setValue('state',7);
      }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };

   // Prevents the form from submitting when the dialog first loads
   return false;
}

次のコード例は、 GlideModal.get().destroy() を使用してクライアントスクリプトでモーダルを閉じる方法を示しています。次のボタンは、UI ページの HTML で宣言<button onclick="closeMe()">する必要があります。</button>

function closeGlideModal() {
  try {
    nowapi.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);
}

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

// If the modal was initially created like this:

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

// Code using the modal
...

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

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

次の例は、インスタンスで GlideModal ID を取得する方法を示しています。

var id = modal.getID();
console.log('modal id', id);

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

var dialog = new nowapi.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');

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

var dialog = new nowapi.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');

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

var dialog = new nowapi.GlideModal("UI_dialog_name");

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

//Display the dialog
dialog.render();

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

function cancelDialog(){

  var dialog = new nowapi.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 task but keep 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"){
        // Closed Incomplete -- will close the Requested Item and all other open tasks
        g_form.setValue('state',4);
      }else{
        // Closed Skipped -- will only close this task
        g_form.setValue('state',7);
      }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };

   // Prevents the form from submitting when the dialog first loads
   return false;
}

この例では、モーダルダイアログ名をテーブル設定として設定する方法を示します。

var dialog = new nowapi.GlideModal('change_confirm_reason', false, 648, 250);
dialog.setTitle(new GwtMessage().getMessage('Cancel Change Request'));
dialog.setPreference('focusTrap', true);
dialog.setDialog('onPromptComplete');
dialog.setPreference('onPromptCancel', onPromptCancel);
dialog.on('closeconfirm', onPromptCancel);
dialog.setPreference('buttonLabelComplete', new GwtMessage().getMessage('OK'));
dialog.setPreference('buttonLabelCancel', new GwtMessage().getMessage('Cancel'));
dialog.render();

この例では、 setPreferenceAndReload() 関数が設定を行い、更新された設定でモーダルを再ロードします。モーダルは初期設定でレンダリングされ、5 秒後に setPreferenceAndReload() が呼び出され、更新された設定でモーダルが再ロードされます。

 // UI Page to render in the GlideModal is 'glide_modal_confirm'
 var glideModal = new nowapi.GlideModal("glide_modal_confirm", false, 600);
 glideModal.setTitle(getMessage("Confirmation"));
 glideModal.setPreference("body", getMessage("Are you sure you want to reject this deal registration? This action cannot be undone."));
 glideModal.setPreference('buttonLabelComplete', getMessage("Reject"));
 glideModal.setPreference('buttonLabelCancel', getMessage("Cancel"));
 glideModal.render();

 var preferences = {
     "body": "THIS IS THE UPDATED BODY PREFERENCE",
     "buttonLabelComplete": "NEW REJECT",
     "buttonLabelCancel": "NEW CANCEL"
 };

 setTimeout(function() {
     glideModal.setPreferenceAndReload(preferences);
 }, 5000);

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

var dialog = new nowapi.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();

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

var dialog = new nowapi.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();

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

var dialog = new nowapi.GlideModal('UI_dialog_name');

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

//Opens the dialog
dialog.render();

次の例は、 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);