L’exemple de code suivant montre comment utiliser la méthode destroy() pour fermer un modal.

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

L’exemple de code suivant montre comment utiliser GlideModal.get().destroy() pour fermer un modal dans un script client. Le bouton suivant doit être déclaré dans la page d’interface utilisateur HTML : <button onclick="closeMe()">fermer</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);
}

Cet exemple montre comment utiliser la méthode get() pour obtenir le modal que vous souhaitez fermer à l’aide de la méthode 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();

L’exemple suivant montre comment obtenir l’ID GlideModal sur l’instance.

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

Cet exemple montre un cas simple de définition d’une préférence, puis de récupération de cette préférence à partir d’une fenêtre modale spécifiée.

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

Cet exemple montre un cas simple de définition d’une préférence, puis de récupération de cette préférence à partir d’une fenêtre modale spécifiée.

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

L’exemple de code suivant montre comment instancier un objet GlideModal à l’aide de la page d’interface utilisateur « UI_dialog_name », définir le titre et la largeur du modal, puis afficher le modal dans l’interface utilisateur (rendu).

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

Cet exemple de code montre comment afficher un modal construit à l’aide de la chaîne HTML transmise qui contient une liste de choix que l’utilisateur peut sélectionner.

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

Cet exemple montre comment définir un nom de boîte de dialogue modale en tant que préférence de table.

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

Dans cet exemple, la fonction setPreferenceAndReload() définit les préférences et recharge le modal avec les préférences mises à jour. Le modal s’affiche avec les préférences initiales, et après 5 secondes, setPreferenceAndReload() est appelé et recharge le modal avec les préférences mises à jour.

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

L’exemple de code suivant montre comment définir la table préférence sur « tâche » et la name préférence sur « valeur ».

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

L’exemple de code suivant montre comment définir le titre du modal sur Table à mettre à jour.

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

L’exemple de code suivant montre comment définir la largeur de la fenêtre modale sur 550 pixels.

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

L’exemple suivant montre comment utiliser set et mettre à jour le titre d’un modal en appelant setTitle() et updateTitle() respectivement.

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