GlideModalNext Experience() : client

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.

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 :

• GlideModalNext Experience() - render()
• GlideModalNext Experience() : renderWithContent(String html)

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

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

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

//Display the modal
dialog.render();

GlideModalNext Experience() : 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 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 créer un objet GlideModal à l’aide du fichier glide_modal_confirm .

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

GlideModalNext Experience() - destroy()

Ferme la fenêtre modale actuelle.

Tableau 2. Paramètres

Nom	Type	Description
Aucun

Tableau 3. Renvoie

Type	Description
Aucun

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

function cancelDialog(){

var gmod = new nowapi.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 {
    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);
}

GlideModalNext Experience() : 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 nowapi.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 nowapi.GlideModal().get("glide_modal_confirm");
glideModal.destroy();

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

GlideModalNext Experience() - getID()

Renvoie l’ID GlideModal.

Tableau 6. Paramètres

Nom	Type	Description
Aucun

Tableau 7. Renvoie

Type	Description
Chaîne	ID de la fenêtre modale Glide.

L’exemple suivant montre comment obtenir l’ID de la fenêtre modale Glide sur l’instance.

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

GlideModalNext Experience() : getPreference(nom de chaîne, valeur 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 GlideModalNext Experience() : 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 8. 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( ).
valide	Chaîne	Valeur de la 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 9. 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 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');

GlideModal(Next Experience) – getPreferences()

Renvoie toutes les préférences et valeurs associées au modal.

Tableau 10. Paramètres

Nom	Type	Description
Aucun

Tableau 11. Renvoie

Type	Description
Aucun

GlideModalNext Experience() - 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 renderWithContent(String html) pour afficher le modal.

Tableau 12. Paramètres

Nom	Type	Description
Aucun

Tableau 13. Renvoie

Type	Description
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 nowapi.GlideModal("UI_dialog_name");

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

//Display the dialog
dialog.render();

GlideModalNext Experience() : 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 14. Paramètres

Nom	Type	Description
HTML	Chaîne	Contenu HTML à afficher dans le modal.

Tableau 15. Renvoie

Type	Description
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 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 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
}

GlideModalNext Experience() - setDialog(String dialogName)

Définit le nom de la boîte de dialogue pour GlideModal.

Tableau 16. Paramètres

Nom	Type	Description
dialogName	Chaîne	Le nom de la boîte de dialogue modale. Le nom de la boîte de dialogue est défini comme en-tête modal dans un style H1.

Tableau 17. Renvoie

Type	Description
Aucun

GlideModalNext Experience() : setPreferenceAndReload(Array properties)

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

Tableau 18. Paramètres

Nom	Type	Description
Propriétés de	Tableau	Paires nom-valeur à définir en tant que préférences.

Tableau 19. Renvoie

Type	Description
Aucun

GlideModalNext Experience() : 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 20. 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 21. Renvoie

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

GlideModalNext Experience() - setTitle(titre de chaîne)

Définit le titre du modal.

Tableau 22. Paramètres

Nom	Type	Description
Titre	Chaîne	Texte à afficher dans le titre du modal.

Tableau 23. Renvoie

Type	Description
Aucun

L’exemple de code suivant montre comment définir le titre 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();

GlideModalNext Experience() : setWidth(largeur du numéro/de la chaîne)

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 du constructeur GlideModal( ).

Tableau 24. 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 25. Renvoie

Type	Description
Aucun

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

GlideModalNext Experience() : switchView(Chaîne newView)

Changez la vue et rechargez le modal.

Tableau 26. Paramètres

Nom	Type	Description
newView	Chaîne	Vue à utiliser.

Tableau 27. Renvoie

Type	Description
Aucun

GlideModal(Next Experience) - type()

Renvoie le type de GlideModal.

Tableau 28. Paramètres

Nom	Type	Description
Aucun

Tableau 29. Renvoie

Type	Description
Aucun

GlideModal(Next Experience) - 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 30. Paramètres

Nom	Type	Description
Aucun

Tableau 31. 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);