GlideModal ( Next Experience) – Client

Zürich-API-Referenz

Release

zurich

ft:locale

de-DE

ft:publication_title

Zürich-API-Referenz

ft:clusterId

crapiref

bundleId

crapiref

workflow

Creator

GlideModal ( Next Experience) – Client

Freigeben Version: Zurich

Aktualisiert 31. Juli 2025

10 Minuten Lesedauer

Die GlideModal Die API stellt Methoden zum Anzeigen einer Inhaltsüberlagerung bereit, die als modales Element bezeichnet wird. Modale Elemente sind interaktive Fenster, die über einer Seite angezeigt und geschlossen werden, wenn ein Anwender eine Aktion ausführt. Sie können ein Modal verwenden, um Informationen anzuzeigen, Fragen zu stellen oder Aktionen auszuführen.

Verwenden Sie GlideModal Methoden in Skripts an einem beliebigen Ort, an dem Sie clientseitiges JavaScript verwenden können. Diese Methoden werden meistens aus einer UI Action mit ausgewählten Checkboxen Client aufgerufen.

Modale Elemente können verschiedene Arten von Inhalten enthalten, z. B.:

Statischer Text
Dynamischer Text
Formulare
Images
Schaltflächen

Mit dieser API können Sie:

Ruft ein vorhandenes modales Element ab.
Erstellen Sie modalen Inhalt aus einer UI-Seite oder aus übergebenem HTML.
Legen Sie den Titel im Modal fest.
Legen Sie die Breite des Modals fest.
Rufen Sie Einstellungen ab, und legen Sie sie fest.
Modale Ansichten wechseln.

Damit ein modales Element in der Anwenderoberfläche angezeigt wird, müssen Sie eine der Rendermethoden aufrufen:

Das folgende Codebeispiel zeigt, wie ein modales Element mithilfe der UI-Seite „UI_Dialog_Name“ erstellt und gerendert wird.

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

GlideModal ( Next Experience) – GlideModal (Zeichenfolgen-ID, schreibgeschützter boolescher Wert, Zahl-/Zeichenfolgenbreite)

Erstellt eine Instanz von GlideModal Klasse.

Tabelle : 1. Parameter
Name	Typ	Beschreibung
id	Zeichenfolge	Name des UI-Seite Zum Laden in das modale Element. Sie können auch entweder angeben `Glide_Modal_confirm` Oder `Glide_Modal_Info` Modale Elemente, die im Basissystem bereitgestellt werden. Tabelle: UI-Seite [sys_ui_page]
Monatlich	Boolean	Optional. Kennzeichnung, die angibt, ob der Inhalt im Modal schreibgeschützt ist. Gültige Werte: Wahr: Inhalt ist schreibgeschützt. Falsch: Der Anwender kann den Inhalt ändern. Standardwert: false
width	Zahl oder Zeichenfolge	Optional. Breite des modalen Elements in Pixel oder der modalen CSS-Klasse. Wenn eine Pixelbreite übergeben wird, richtet sie die angegebene Breite an der entsprechenden CSS-Klasse aus. Mögliche modale CSS-Klassen: Modal-Alert: (300 px) zugewiesen, wenn die angegebene Breite 0 bis 349 Pixel beträgt. Modal-sm: (400 px) zugewiesen, wenn die angegebene Breite 350 bis 449 Pixel beträgt. Modal-md: (600 px) zugewiesen, wenn die angegebene Breite 450 bis 649 Pixel beträgt. Modal-lg: (900 px) zugewiesen, wenn die angegebene Breite 650 bis 900 Pixel beträgt. Standard: Modal-md Maximale Breite: 900 Pixel Hinweis: Sie können die Breite des modalen Elements auch mit festlegen SetWidth() Methode.

Das folgende Codebeispiel zeigt, wie ein GlideModal-Objekt mithilfe einer vorhandenen UI-Seite erstellt wird.

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

Das folgende Codebeispiel zeigt, wie ein GlideModal-Objekt mit erstellt wird Glide_Modal_confirm Datei.

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

GlideModal ( Next Experience) – Destroy()

Schließt das aktuelle modale Element.

Tabelle : 2. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 3. Ergebnisse
Typ	Beschreibung
Keine

Das folgende Codebeispiel zeigt die Verwendung von Vernichtung () Methode zum Schließen eines modalen Elements.

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
}

Das folgende Codebeispiel zeigt die Verwendung GlideModal.GET().Destroy() Zum Schließen eines modalen Elements.

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

GlideModal ( Next Experience) – GET(Zeichenfolgen-ID)

Gibt das GlideModal-Objekt zurück, das durch den angegebenen UI-Seitennamen identifiziert wird.

Verwenden Sie diese Methode, um das GlideModal-Objekt abzurufen, das in anderen GlideModal-Vorgängen verwendet werden soll, z. B. GlideModal.GET().Destroy() .

Tabelle : 4. Parameter
Name	Typ	Beschreibung
id	Zeichenfolge	Name des UI-Seite Dem modalen Element zugeordnet. Sie können auch entweder angeben `Glide_Modal_confirm` Oder `Glide_Modal_Info` Modale Elemente, die im Basissystem bereitgestellt werden. Tabelle: UI-Seite [sys_ui_page]

Tabelle : 5. Ausgabe
Typ	Beschreibung
GlideModal	Angefordertes GlideModal-Objekt.

Dieses Beispiel zeigt die Verwendung von Get() Methode zum Abrufen des modalen Elements, das Sie mit schließen möchten Vernichtung () Methode.

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

GlideModal ( Next Experience) – GetId()

Gibt die GlideModal-ID zurück.

Tabelle : 6. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 7. Ergebnisse
Typ	Beschreibung
Zeichenfolge	ID des Glide-Modals.

Das folgende Beispiel zeigt, wie die modale Glide-ID für die Instanz abgerufen wird.

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

GlideModal ( Next Experience) – GetPreference(Zeichenfolgenname, Zeichenfolgenwert)

Gibt den Wert des angegebenen zurück Einstellung (Eigenschaft) .

Durch das Aufrufen von Aktionen, die das Modal erstellen, werden normalerweise auch die erforderlichen Einstellungen für das Modal mithilfe von erstellt GlideModal ( Next Experience) – SetPreference(Zeichenfolgenname, Zeichenfolgenwert) Methode.Das Clientskript der UI-Seite kann diese Einstellungen dann verwenden Mit dieser Methode.

Tabelle : 8. Parameter
Name	Typ	Beschreibung
Name	Zeichenfolge	Name des abzurufenden Einstellungswerts. Dieser Wert muss zuvor im Modal mit festgelegt worden sein SetPreference() Methode.
Wert	Zeichenfolge	Wert der abzurufenden Einstellung. Dieser Wert muss zuvor im Modal mit festgelegt worden sein SetPreference() Methode.

Tabelle : 9. Rückgaben
Typ	Beschreibung
Zeichenfolge	Angegebener Wert der Einstellung.

Dieses Beispiel zeigt eine einfache Fall, in dem eine Einstellung festgelegt und diese Einstellung dann aus einem angegebenen modalen Element abgerufen wird.

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

Gibt alle Einstellungen und Werte zurück, die dem Modal zugeordnet sind.

Tabelle : 10. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 11. Ergebnisse
Typ	Beschreibung
Keine

GlideModal ( Next Experience) – Rendern()

Rendert die UI-Seite, die angegeben wurde, als die API im Modal instanziiert wurde. Sie müssen diese Methode aufrufen, nachdem Sie das Modal definiert haben, damit sie in der Anwenderoberfläche angezeigt wird.

Rufen Sie diese Methode auf, wenn Sie eine UI-Seite verwenden, um den Inhalt in Ihrem modalen Element zu generieren. Wenn Sie HTML in einem modalen Element anzeigen möchten, rufen Sie auf RenderWithContent (Zeichenfolge HTML) Zum Rendern des Modals.

Tabelle : 12. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 13. Ergebnisse
Typ	Beschreibung
Keine

Das folgende Codebeispiel zeigt, wie ein instanziiert wird GlideModal Legen Sie auf der UI-Seite „UI_Dialog_Name“ den Titel und die Breite des modalen Elements fest, und zeigen Sie dann das modale Element in der Anwenderoberfläche an (Rendern).

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

GlideModal ( Next Experience) – RenderWithContent (Zeichenfolge HTML)

Zeigt ein modales Element mit dem angegebenen zeichenbasierten HTML-Inhalt an.

Verwenden Sie RenderWithContent() Methode anstelle von Rendern () Methode zum Ableiten des modalen Inhalts aus HTML.

Tabelle : 14. Parameter
Name	Typ	Beschreibung
HTML	Zeichenfolge	HTML-Inhalt, der im Modal angezeigt werden soll.

Tabelle : 15. Ausgabe
Typ	Beschreibung
Keine

Dieses Codebeispiel zeigt, wie ein modales Element angezeigt wird, das mit der übergebenen HTML-Zeichenfolge erstellt wird, die eine Liste von Auswahlmöglichkeiten enthält, aus denen der Anwender auswählen kann.

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
}

GlideModal ( Next Experience) – SetDialog(ZeichenfolgendialogName)

Legt den Dialognamen für das GlideModal fest.

Tabelle : 16. Parameter
Name	Typ	Beschreibung
Dialogname	Zeichenfolge	Der Name des modalen Dialogfelds. Der Dialogfeldname wird als modaler Header in einem H1-Stil festgelegt.

Tabelle : 17. Rückgaben
Typ	Beschreibung
Keine

GlideModal ( Next Experience) – SetPreferenceAndReload(Array-Eigenschaften)

Legt die angegebenen Einstellungen fest und lädt dann das Modal neu.

Tabelle : 18. Parameter
Name	Typ	Beschreibung
Eigenschaften	Array	Name-Wert-Paare, die als Einstellungen festgelegt werden sollen.

Tabelle : 19. Ausgabe
Typ	Beschreibung
Keine

GlideModal ( Next Experience) – SetPreference(Zeichenfolgenname, Zeichenfolgenwert)

Legt das angegebene Feld im aktuellen Formular auf den angegebenen Wert fest.

Tabelle : 20. Parameter
Name	Typ	Beschreibung
name	Zeichenfolge	Name des zu aktualisierenden Formularfelds. Wenn dieses Feld im aktuellen Formular nicht vorhanden ist, wird die Anforderung ignoriert.
Wert	Zeichenfolge	Wert, der im angegebenen Formularfeld gespeichert werden soll.

Tabelle : 21. Ausgabe
Typ	Beschreibung
Keine

Das folgende Codebeispiel zeigt, wie festgelegt wird tableEinstellung für „Aufgabe“ und nameEinstellung auf „Wert“.

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

GlideModal ( Next Experience) – SetTitle(Zeichenfolgentitel)

Legt den Titel des Modals fest.

Tabelle : 22. Parameter
Name	Typ	Beschreibung
Titel	Zeichenfolge	Text, der im Titel des Modals angezeigt werden soll.

Tabelle : 23. Ausgabe
Typ	Beschreibung
Keine

Das folgende Codebeispiel zeigt, wie der modale Titel auf „zu aktualisierende Tabelle“ festgelegt wird.

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

GlideModal ( Next Experience) – SetWidth (Zahl/Zeichenfolgenbreite)

Legt fest Breite des Modals .

Sie können die Breite eines modalen Elements auch festlegen, wenn Sie die API zum ersten Mal mit instanziieren GlideModal() Konstruktor.

Tabelle : 24. Parameter
Name	Typ	Beschreibung
width	Zahl oder Zeichenfolge	Breite des modalen Elements in Pixel oder der modalen CSS-Klasse. Wenn eine Pixelbreite übergeben wird, richtet sie die angegebene Breite an der entsprechenden CSS-Klasse aus. Mögliche modale CSS-Klassen: Modal-Alert: (300 px) zugewiesen, wenn die angegebene Breite 0 bis 349 Pixel beträgt. Modal-sm: (400 px) zugewiesen, wenn die angegebene Breite 350 bis 449 Pixel beträgt. Modal-md: (600 px) zugewiesen, wenn die angegebene Breite 450 bis 649 Pixel beträgt. Modal-lg: (900 px) zugewiesen, wenn die angegebene Breite 650 bis 900 Pixel beträgt. Maximale Breite: 900 Pixel

Tabelle : 25. Ausgabe
Typ	Beschreibung
Keine

Das folgende Codebeispiel zeigt, wie die Breite des Modals auf 550 Pixel festgelegt wird.

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

GlideModal ( Next Experience) – SwitchView(Zeichenfolge newView)

Ändern Sie Anzeigen Und laden Sie das modale Element neu.

Tabelle : 26. Parameter
Name	Typ	Beschreibung
newView	Zeichenfolge	Zu verwendende Ansicht.

Tabelle : 27. Ausgabe
Typ	Beschreibung
Keine

GlideModal ( Next Experience) – Type()

Gibt den Typ des GlideModals zurück.

Tabelle : 28. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 29. Ergebnisse
Typ	Beschreibung
Keine

GlideModal ( Next Experience) – UpdateTitle()

Aktualisiert den mit angegebenen Titel GlideModal-Satztitel() Methode.

Sie müssen immer zuerst anrufen GlideModal ( Next Experience) – SetTitle(Zeichenfolgentitel) Dient zum Festlegen des modalen Titels mit UpdateTitle() Um den Change zu bestätigen.

Tabelle : 30. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 31. Ergebnisse
Typ	Beschreibung
Keine

Das folgende Beispiel zeigt, wie Sie den Titel eines Modals festlegen und aktualisieren, indem Sie aufrufen SetTitle() Und UpdateTitle() Entsprechend.

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