GlideModal – 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.

    Für modale Optionen und Kompatibilität in Konfigurierbarer Arbeitsbereich In Next Experience UI, siehe Folgendes:
    Abbildung : 1. Beispiel für Modal
    Beispielüberlagerung
    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 GlideModal("UI_dialog_name");

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

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

//Display the modal
dialog.render();

    Dieses Codebeispiel zeigt, wie ein modales Element mit erstellt und gerendert wird RenderWithContent() Methode und HTML zum Definieren des Inhalts des Modals.

    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
}
    Hinweis:
    Dies ist ein Ersatz mit vollem Funktionsumfang für GlideWindow Und GlideDialogWindow APIs.

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

    Schließt das aktuelle modale Element.

    Tabelle : 2. Parameter
    Name Typ Beschreibung
    Keine Keine Keine
    Tabelle : 3. Ergebnisse
    Typ Beschreibung
    Keine Keine

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

    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
}

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

    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 – setPreference(Zeichenfolgenname, Zeichenfolgenwert) Methode.Das Clientskript der UI-Seite kann diese Einstellungen dann verwenden Mit dieser Methode.

    Tabelle : 6. Parameter
    Name Typ Beschreibung
    name Zeichenfolge Name des abzurufenden Einstellungswerts. Dieser Wert muss zuvor im Modal mit festgelegt worden sein SetPreference() Methode.
    Tabelle : 7. Ausgabe
    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 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 – 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 GlideModal – renderWithContent (Zeichenfolge HTML) Zum Rendern des Modals.

    Tabelle : 8. Parameter
    Name Typ Beschreibung
    Keine
    Tabelle : 9. Ergebnisse
    Typ Beschreibung
    void 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 GlideModal("UI_dialog_name");

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

//Display the dialog
dialog.render();

    GlideModal – 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 : 10. Parameter
    Name Typ Beschreibung
    HTML Zeichenfolge HTML-Inhalt, der im Modal angezeigt werden soll.
    Tabelle : 11. Ausgabe
    Typ Beschreibung
    void 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 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(Zeichenfolgenname, Zeichenfolgenwert)

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

    Tabelle : 12. 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 : 13. Ausgabe
    Typ Beschreibung
    void Keine

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

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

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

    Tabelle : 14. Parameter
    Name Typ Beschreibung
    Eigenschaften Array Name-Wert-Paare, die als Einstellungen festgelegt werden sollen.
    Tabelle : 15. Ausgabe
    Typ Beschreibung
    void Keine

    GlideModal – setTitle(Zeichenfolgentitel)

    Legt den Titel des Modals fest.

    Tabelle : 16. Parameter
    Name Typ Beschreibung
    Titel Zeichenfolge Text, der im Titel des Modals angezeigt werden soll.
    Tabelle : 17. Ausgabe
    Typ Beschreibung
    void Keine

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

    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(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 – GlideModal (Zeichenfolgen-ID, schreibgeschützter boolescher Wert, Zahl-/Zeichenfolgenbreite) Methode.

    Tabelle : 18. 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 : 19. Ausgabe
    Typ Beschreibung
    void Keine

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

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

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

    Tabelle : 20. Parameter
    Name Typ Beschreibung
    newView Zeichenfolge Zu verwendende Ansicht.
    Tabelle : 21. Ausgabe
    Typ Beschreibung
    void Keine

    GlideModal – 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 : 22. Parameter
    Name Typ Beschreibung
    Keine
    Tabelle : 23. 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);