GlideModal : 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.
À l’aide de l’API GlideModal , vous pouvez créer des modaux personnalisés ou exploiter des modaux de système de base existants.
GlideModal ne fonctionne pas dans l’espace de travail, utilisez plutôt l’API g_modal .
- Texte statique
- Texte dynamique
- Formulaires
- Images
- Boutons
- Récupérez un modal du système de base tel que
glide_confirm,glide_infoouglide_alert. - 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 le contenu du corps du modal.
- Définissez la largeur du modal.
- Obtenir et définir les préférences.
- Changer de vue modale.
var dialog = new GlideModal("my_modal");
//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
}Modaux du système de base
Une instance de base ServiceNow fournit les fenêtres modales suivantes, définies comme des pages de l’interface utilisateur, que vous pouvez utiliser lors de l’affichage d’une fenêtre modale avec GlideModal :
glide_alert_standard: modal d’alerte avec un bouton OK et une icône d’informations ou d’avertissement.-
glide_ask_standard: modal de confirmation avec des boutons Oui et Non . -
glide_confirm: modal de confirmation avec les boutons Ne pas enregistrer, Annuler et Enregistrer . -
glide_confirm_basic: modal de confirmation avec un bouton OK et Annuler , sans icône. -
glide_confirm_standard: modal de confirmation avec un bouton OK et Annuler , et une icône d’informations ou d’avertissement. -
glide_info: modal d’information avec une icône d’informations et un bouton OK de la largeur de la fenêtre modale. -
glide_progress_standard: modal d’informations avec un bouton Fermer , une icône d’informations ou d’avertissement et une barre de progression défilante. La barre de progression est une image GIF animée et ne peut pas être mise à jour comme une barre de progression classique. -
glide_progress_no_button: modal d’information avec une icône d’information ou d’avertissement et une barre de progression défilante. La barre de progression est une image GIF animée et ne peut pas être mise à jour comme une barre de progression classique. -
glide_prompt: un modal avec une zone de texte d’invite et un bouton OK et Annuler . -
glide_warn: modal simple avec un bouton OK , mais pas d’icône.
Préférences
Les préférences modales permettent de transmettre des données au modal en cours de rendu. Vous utilisez les méthodes setPreference() ou setPrefAndReload() pour définir une valeur de préférence. Vous utilisez ensuite la GlideModal : getPreference(nom de chaîne) méthode pour récupérer une préférence définie.
Pour récupérer les préférences dans une page d’interface utilisateur, utilisez la fonction suivante : RP.getWindowProperties().get('preference_name').
- autoFocus : marqueur indiquant si le modal reçoit automatiquement le focus une fois qu’il est rendu. Défini sur vrai lorsque le modal est initialisé.
- body : définit le contenu transmis dans le corps du modal.
- buttonClass : Définit la classe de bouton.
- buttonClassCancel : définit la classe du bouton Annuler sur le modal.
- buttonClassComplete : définit la classe du bouton OK (terminé) sur le modal.
- buttonLabel Définit l’étiquette du bouton.
- buttonLabelCancel : définit l’étiquette du bouton Annuler sur le modal.
- buttonLabelComplete : définit l’étiquette du bouton OK (terminé) sur le modal.
- callbackParam : Définit un paramètre de rappel.
- focusTrap : marqueur indiquant s’il faut bloquer toutes les interactions en dehors du modal lors de l’ouverture. Définissez la valeur sur faux lorsque le modal est initialisé.
- modal_title : définit le titre du modal. Utilisé par la méthode setTitle( ).
- onPromptCancel : définit une fonction à appeler lorsque l’utilisateur sélectionne le bouton Annuler .Par exemple :
dialog.setPreference("onPromptCancel", function() { return false; }); - onPromptComplete : définit une fonction à appeler lorsque l’utilisateur sélectionne le bouton OK .Par exemple :
dialog.setPreference("onPromptComplete", function () { gsftSubmit(null, g_form.getFormElement(), 'check_button'); });
GlideModal : GlideModal(ID de chaîne, booléen en lecture seule, largeur de nombre/chaîne)
Crée une instance de la classe GlideModal .
| Nom | Type | Description |
|---|---|---|
| id | Chaîne | Nom de la page de l’interfaceutilisateur à charger dans le modal. Vous pouvez trouver la liste des pages de l’interface utilisateur disponibles dans |
| readOnly | Booléen | Facultatif. Marqueur indiquant si le contenu du modal est en lecture seule. Valeurs valides :
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 :
Valeur par défaut : modal-md Largeur maximale : 900 pixels Remarque : Vous pouvez également définir la largeur du modal à l’aide de la GlideModal : setWidth(Number/String width) méthode. |
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_confirm .
var dialog = new GlideModal('glide_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.
| Nom | Type | Description |
|---|---|---|
| Aucun |
| Type | Description |
|---|---|
| Néant |
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().
| Nom | Type | Description |
|---|---|---|
| id | Chaîne | Nom de lapage d’interface utilisateur associée au modal. Vous pouvez également spécifier les modaux du système de base fournis dans une instance de base. Vous pouvez trouver la liste des pages de l’interface utilisateur disponibles dans . |
| 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_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_confirm");
glideModal.destroy();
// You could also code it like this:
GlideModal.prototype.get("glide_confirm").destroy();GlideModal : getPreference(nom de chaîne)
Renvoie la valeur de la préférence spécifiée (propriété). Utilisez les préférences pour transmettre les données à la page en cours de rendu.
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 alors utiliser ces préférences à l’aide de cette méthode et de la fonction suivante : RP.getWindowProperties().get('preference_name').
| Nom | Type | Description |
|---|---|---|
| nom | Chaîne | Nom de la valeur de préférence à récupérer. Cette valeur doit avoir été définie précédemment sur le modal à l’aide de la GlideModal : setPreference(nom de chaîne, valeur de chaîne) méthode. |
| 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 code HTML dans un modal, appelez le GlideModal : renderWithContent(Objet html) ou GlideModal : renderWithContent(String html) pour afficher le modal.
| Nom | Type | Description |
|---|---|---|
| Aucun |
| Type | Description |
|---|---|
| nul |
L’exemple de code suivant montre comment instancier un objet GlideModal à l’aide des pages de l’interface utilisateur glide_confirm et glide_info, définir diverses préférences, puis afficher le modal approprié dans l’interface utilisateur (rendu).
var UpdateSetClient = Class.create({
mergeConfirm: function () {
var filterCriteriaMsg = "Please select filter criteria matching two or more update sets to merge";
var messageMap = new GwtMessage().getMessages([filterCriteriaMsg, "Confirmation",
"Are you sure you want to merge these {0} update sets? You will not be able to undo this action",
"Invalid selection", "OK", "Cancel"]);
var list = GlideList2.get('sys_update_set');
var dialog;
if (list.totalRows == 0 || list.totalRows == 1) {
dialog = new GlideModal('glide_info', true, 300);
dialog.setPreference('focusTrap', true);
dialog.setTitle(messageMap["Invalid selection"]);
dialog.setPreference('body', messageMap[filterCriteriaMsg]);
dialog.setPreference('buttonLabel', messageMap["OK"]);
dialog.render();
return;
}
dialog = new GlideModal('glide_confirm', true, 300);
dialog.setTitle(messageMap["Confirmation"]);
dialog.setPreference('focusTrap', true);
dialog.setPreference('body', new GwtMessage().format(
messageMap["Are you sure you want to merge these {0} update sets? You will not be able to undo this action"],
list.totalRows));
dialog.setPreference('buttonLabelComplete', messageMap["OK"]);
dialog.setPreference('onPromptComplete', this.merge);
dialog.setPreference('buttonLabelCancel', messageMap["Cancel"]);
dialog.setPreference('onPromptCancel', this.mergeExit);
dialog.render();
},
merge: function () {
var list = GlideList2.get('sys_update_set');
var query = list.getQuery();
var name = $('update_set_name').value;
var comments = $('update_set_comments').value;
var gurl = new GlideAjax('AngularProcessor','angular.do');
gurl.addParam('sysparm_type', 'hub_client');
gurl.addParam('type', 'merge_update_sets');
gurl.addParam('name', name);
gurl.addParam('comments', comments);
gurl.addParam('query', query);
gurl.getXML(function (response) {
var data = response.responseText.evalJSON();
var p = data.progress;
if (p) {
var progressId = p.progress_id;
var map = new GwtMessage().getMessages(["Close", "Update Set Merge"]);
var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;
var dd = new dialogClass("hierarchical_progress_viewer", false, "40em", "10.5em");
dd.setPreference('focusTrap', true);
dd.setTitle(map["Update Set Merge"]);
dd.setPreference('sysparm_renderer_execution_id', progressId);
dd.setPreference('sysparm_renderer_expanded_levels', '0'); // collapsed root node by default
dd.setPreference('sysparm_button_close', map["Close"]);
dd.render();
//when all trackers are completed
dd.on("executionComplete", function(trackerObj) {
if (trackerObj.state == "2") {
var redirectUrl = new GlideURL('sys_update_set_list.do');
window.location.replace(redirectUrl.getURL());
return;
}
var closeBtn = $("sysparm_button_close");
if (closeBtn) {
closeBtn.onclick = function() {
dd.destroy();
};
}
});
}
});
},
mergeExit: function () {
// Do nothing interesting...
}
});GlideModal : renderWithContent(Objet html)
Affiche une fenêtre modale utilisant le contenu HTML basé sur un objet 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.
| Nom | Type | Description |
|---|---|---|
| HTML | Objet | Contenu HTML à afficher dans le modal. |
| Type | Description |
|---|---|
| nul |
L’exemplesuivant montre comment afficher « Hello World » dans le modal.
var dialog = new GlideModal();
dialog.renderWithContent('<div>Hello World</div>');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.
| Nom | Type | Description |
|---|---|---|
| HTML | Chaîne | Contenu HTML à afficher dans le modal. |
| Type | Description |
|---|---|
| nul |
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 la valeur de la préférence spécifiée (propriété). Utilisez les préférences pour transmettre les données à la page en cours de rendu.
Pour récupérer les préférences dans une page d’interface utilisateur, utilisez la fonction suivante : RP.getWindowProperties().get('preference_name'). Pour plus d’informations sur les préférences, reportez-vous à la section GlideModal : client.
| Nom | Type | Description |
|---|---|---|
| nom | Chaîne | Nom de la préférence dont la valeur doit être définie. |
| valide | Chaîne | Valeur à stocker dans la préférence spécifiée. |
| Type | Description |
|---|---|
| nul |
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();L’exemple suivant montre comment définir les préférences de base dans un modal glide_confirm.
var dialog = new GlideModal('glide_confirm', true, 300);
dialog.setTitle('Example Title');
dialog.setPreference('body', 'Example Body');
dialog.setPreference('focusTrap', true);
dialog.setPreference('callbackParam', 'exampleParameter');
dialog.setPreference('buttonClassComplete', 'btn-primary');
dialog.setPreference('onPromptComplete', function(param) {
console.log('Prompt completed with param: ' + param);
});
dialog.setPreference('onPromptCancel', function(param) {
console.log('Prompt cancelled with param: ' + param);
});
dialog.render();GlideModal : setPreferenceAndReload (propriétés du tableau)
Définit les préférences spécifiées, puis recharge le modal.
| Nom | Type | Description |
|---|---|---|
| Propriétés de | Tableau | Paires nom-valeur à définir en tant que préférences. |
| Type | Description |
|---|---|
| nul |
Cet exemple montre comment créer et afficher un modal, puis mettre à jour la préférence de corps et recharger le modal.
var dialog = new GlideModal('glide_confirm');
dialog.setPreference('body', 'This is a test modal body');
dialog.setTitle('This is a test modal title');
dialog.render();
...
dialog.setPreferenceAndReload({'body': 'this is another body'})GlideModal : setTitle(titre de chaîne)
Définit le titre du modal.
| Nom | Type | Description |
|---|---|---|
| Titre | Chaîne | Texte à afficher dans le titre du modal. |
| Type | Description |
|---|---|
| nul |
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.
| 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 :
Largeur maximale : 900 pixels |
| Type | Description |
|---|---|
| nul |
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.
| Nom | Type | Description |
|---|---|---|
| newView | Chaîne | Vue à utiliser. |
| Type | Description |
|---|---|
| nul |
Cet exemple expliquecomment