GlideModal : client

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 10 minutes de lecture

    • L’API GlideModal fournit des méthodes d’affichage d’une superposition de contenu, appelée modal. Les fenêtres modales sont des fenêtres interactives qui apparaissent au-dessus d’une page et se ferment lorsqu’un utilisateur effectue une action. Vous pouvez utiliser un modal pour afficher des informations, poser des questions ou effectuer des actions.

    Utilisez les méthodes GlideModal dans les scripts partout où vous pouvez utiliser JavaScript côté client. Ces méthodes sont le plus souvent appelées à partir d’une action d’interface utilisateur avec la case Client cochée.

    Pour connaître les options modales et la compatibilité dans Espace de travail configurable l’interface Next Experience utilisateur, consultez les rubriques suivantes :
    Figure 1. Exemple de modal
    Exemple de superposition
    Les fenêtres modales peuvent contenir différents types de contenu, notamment :
    • Texte statique
    • Texte dynamique
    • Formulaires
    • Images
    • Boutons
    À l’aide de cette API, vous pouvez :
    • Récupérer un modal existant.
    • Créez du contenu modal à partir d’une page d’interface utilisateur ou à partir d’un code HTML transmis.
    • Définissez le titre dans le modal.
    • Définissez la largeur du modal.
    • Obtenir et définir les préférences.
    • Changer de vue modale.
    Pour faire apparaître un modal dans l’interface utilisateur, vous devez appeler l’une des méthodes de rendu :
    L’exemple de code suivant montre comment créer et afficher un modal à l’aide de la page d’interface utilisateur « 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();

    Cet exemple de code montre comment créer et afficher un modal à l’aide de la méthode renderWithContent() et du HTML pour définir le contenu du modal.

    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
}
    Remarque :
    Il s’agit d’un remplacement complet des API GlideWindow et GlideDialogWindow .

    GlideModal : GlideModal(ID de chaîne, booléen en lecture seule, largeur de nombre/chaîne)

    Crée une instance de la classe GlideModal .

    Tableau 1. Paramètres
    Nom Type Description
    id Chaîne Nom de lapage de l’interface utilisateur à charger dans le modal.

    Vous pouvez également spécifier les modaux glide_modal_confirm ou glide_modal_info fournis dans le système de base.

    Table : Page de l’interface utilisateur [sys_ui_page]
    readOnly Booléen Facultatif. Marqueur indiquant si le contenu du modal est en lecture seule.
    Valeurs valides :
    • vrai : le contenu est en lecture seule.
    • faux : l’utilisateur peut modifier le contenu.

    Valeur par défaut : false
    largeur Numéro ou chaîne Facultatif. Largeur du modal en pixels ou classe CSS du modal. Si une largeur de pixel est dépassée, il aligne la largeur spécifiée sur la classe CSS correspondante.
    Classes CSS modales possibles :
    • modal-alert : (300 px) Affecté lorsque la largeur spécifiée est comprise entre 0 et 349 pixels.
    • modal-sm : (400 px) Attribué lorsque la largeur spécifiée est comprise entre 350 et 449 pixels.
    • modal-md : (600 px) Attribué lorsque la largeur spécifiée est comprise entre 450 et 649 pixels.
    • modal-lg : (900 px) Attribué lorsque la largeur spécifiée est comprise entre 650 et 900 pixels.

    Valeur par défaut : modal-md

    Largeur maximale : 900 pixels

    Remarque :
    Vous pouvez également définir la largeur du modal à l’aide de la méthode setWidth( ).

    L’exemple de code suivant montre comment créer un objet GlideModal à l’aide d’une page d’interface utilisateur existante.

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

    L’exemple de code suivant montre comment créer un objet GlideModal à l’aide du fichier glide_modal_confirm .

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

    Ferme la fenêtre modale actuelle.

    Tableau 2. Paramètres
    Nom Type Description
    Aucun Aucun Aucun
    Tableau 3. Renvoie
    Type Description
    Aucun Aucun

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

    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
}

    L’exemple de code suivant montre comment utiliser GlideModal.get().destroy() pour fermer un modal.

    // 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 de chaîne)

    Renvoie l’objet GlideModal identifié par le nom de page d’interface utilisateur spécifié.

    Utilisez cette méthode pour obtenir l’objet GlideModal à utiliser dans d’autres opérations GlideModal telles que GlideModal.get().destroy().

    Tableau 4. Paramètres
    Nom Type Description
    id Chaîne Nom de lapage d’interface utilisateur associée au modal.

    Vous pouvez également spécifier les modaux glide_modal_confirm ou glide_modal_info fournis dans le système de base.

    Table : Page de l’interface utilisateur [sys_ui_page]
    Tableau 5. Renvoie
    Type Description
    Modal GlideModal Objet GlideModal demandé.

    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 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(nom de chaîne)

    Renvoie la valeur de la préférence spécifiée (propriété).

    L’invocation des actions qui créent le modal crée généralement également les préférences nécessaires pour le modal à l’aide de la GlideModal : setPreference(nom de chaîne, valeur de chaîne) méthode. Le script client de page d’interface utilisateur peut ensuite utiliser ces préférences à l’aide de cette méthode.

    Tableau 6. Paramètres
    Nom Type Description
    nom Chaîne Nom de la valeur de préférence à récupérer. Cette valeur doit avoir été préalablement définie sur le modal à l’aide de la méthode setPreference( ).
    Tableau 7. Renvoie
    Type Description
    Chaîne Valeur de préférence spécifiée.

    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 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 : render()

    Affiche la page d’interface utilisateur spécifiée lorsque l’API a été instanciée dans le modal. Vous devez appeler cette méthode après avoir défini le modal pour qu’il apparaisse dans l’interface utilisateur.

    Appelez cette méthode lorsque vous utilisez une page d’interface utilisateur pour générer le contenu dans votre fenêtre modale. Si vous souhaitez afficher du HTML dans un modal, appelez GlideModal : renderWithContent(String html) pour afficher le modal.

    Tableau 8. Paramètres
    Nom Type Description
    Aucun
    Tableau 9. Renvoie
    Type Description
    nul Aucun

    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 GlideModal("UI_dialog_name");

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

//Display the dialog
dialog.render();

    GlideModal : renderWithContent(String html)

    Affiche un modal avec le contenu HTML basé sur une chaîne spécifié.

    Utilisez la méthode renderWithContent() au lieu de la méthode render() lors de la dérivation du contenu modal à partir de HTML.

    Tableau 10. Paramètres
    Nom Type Description
    HTML Chaîne Contenu HTML à afficher dans le modal.
    Tableau 11. Renvoie
    Type Description
    nul Aucun

    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 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(nom de chaîne, valeur de chaîne)

    Définit le champ spécifié sur le formulaire actuel sur la valeur spécifiée.

    Tableau 12. Paramètres
    Nom Type Description
    nom Chaîne Nom du champ de formulaire à mettre à jour.

    Si ce champ n’existe pas sur le formulaire actuel, la demande est ignorée.
    valide Chaîne Valeur à stocker dans le champ de formulaire spécifié.
    Tableau 13. Renvoie
    Type Description
    nul Aucun

    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 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 (propriétés du tableau)

    Définit les préférences spécifiées, puis recharge le modal.

    Tableau 14. Paramètres
    Nom Type Description
    Propriétés de Tableau Paires nom-valeur à définir en tant que préférences.
    Tableau 15. Renvoie
    Type Description
    nul Aucun

    GlideModal : setTitle(titre de chaîne)

    Définit le titre du modal.

    Tableau 16. Paramètres
    Nom Type Description
    Titre Chaîne Texte à afficher dans le titre du modal.
    Tableau 17. Renvoie
    Type Description
    nul Aucun

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

    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(Number/String width)

    Définit la largeur du modal.

    Vous pouvez également définir la largeur d’un modal lorsque vous instanciez l’API pour la première fois à l’aide de la GlideModal : GlideModal(ID de chaîne, booléen en lecture seule, largeur de nombre/chaîne) méthode.

    Tableau 18. Paramètres
    Nom Type Description
    largeur Numéro ou chaîne Largeur du modal en pixels ou classe CSS du modal. Si une largeur de pixel est dépassée, il aligne la largeur spécifiée sur la classe CSS correspondante.
    Classes CSS modales possibles :
    • modal-alert : (300 px) Affecté lorsque la largeur spécifiée est comprise entre 0 et 349 pixels.
    • modal-sm : (400 px) Attribué lorsque la largeur spécifiée est comprise entre 350 et 449 pixels.
    • modal-md : (600 px) Attribué lorsque la largeur spécifiée est comprise entre 450 et 649 pixels.
    • modal-lg : (900 px) Attribué lorsque la largeur spécifiée est comprise entre 650 et 900 pixels.

    Largeur maximale : 900 pixels
    Tableau 19. Renvoie
    Type Description
    nul Aucun

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

    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(Chaîne newView)

    Changez la vue et rechargez le modal.

    Tableau 20. Paramètres
    Nom Type Description
    newView Chaîne Vue à utiliser.
    Tableau 21. Renvoie
    Type Description
    nul Aucun

    GlideModal : updateTitle(

    Met à jour le titre spécifié à l’aide de la méthode GlideModal setTitle().

    Vous devez toujours d’abord appeler GlideModalNext Experience() - setTitle(titre de chaîne) pour spécifier le titre du modal à l’aide de updateTitle() afin de valider le changement.

    Tableau 22. Paramètres
    Nom Type Description
    Aucun
    Tableau 23. Renvoie
    Type Description
    Aucun

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