GlideModal \(Next Experience\) - Client

concept australia Updated Sep 10, 2026 12 min read GModClientAPINX.md
Raw file servicenow.com

The GlideModal API provides methods for displaying a content overlay, known as a modal. Modals are interactive windows that appear above a page and close when a user takes an action. You can use a modal to display information, ask questions, or perform actions.

Use the GlideModal methods in scripts anywhere that you can use client-side JavaScript. These methods are most often called from a UI action with the Client check box selected.

Modals can contain different types of content such as:

  • Static text
  • Dynamic text
  • Forms
  • Images
  • Buttons

Using this API you can:

  • Get an existing modal.
  • Create modal content from a UI page or from passed HTML.
  • Set the title in the modal.
  • Set the width of the modal.
  • Get and set preferences.
  • Switch modal views.

To make a modal appear in the UI you must call one of the render methods:

The following code example shows how to create and render a modal using the UI page "UI_dialog_name".

JavaScript
var dialog = new nowapi.GlideModal("UI_dialog_name");
//Set the dialog titledialog.setTitle('Show title');
//Set the dialog width		      	dialog.setWidth(550);
//Display the modaldialog.render();

Parent Topic:Client Next Experience API reference

GlideModal (Next Experience) - GlideModal(String id, Boolean readOnly, Number/String width)

Creates an instance of the GlideModal class.

Name

Type

Description

id

String

Name of theUI page to load into the modal.You can also specify either the glide_modal_confirm or glide_modal_info modals that are provided in the base system.

Table: UI Page [sys_ui_page]

readOnly

Boolean

Optional. Flag that indicates whether the content in the modal is read-only.Valid values:

  • true: Content is read only.
  • false: User can modify the content.

Default: false

width

Number or String

Optional. Width of the modal in pixels or the modal CSS class. If a pixel width is passed, it aligns the specified width with the corresponding CSS class.Possible modal CSS classes:

  • modal-alert: (300 px) Assigned when the specified width is 0 to 349 pixels.
  • modal-sm: (400 px) Assigned when the specified width is 350 to 449 pixels.
  • modal-md: (600 px) Assigned when the specified width is 450 to 649 pixels.
  • modal-lg: (900 px) Assigned when the specified width is 650 to 900 pixels.

Default: modal-md

Maximum width: 900 pixels

Note: You can also set the modal width using the setWidth() method.
The following code example shows how to create a GlideModal object using an existing UI page.
JavaScript
var dialog = new nowapi.GlideModal('UI_dialog_name');
//Set the dialog titledialog.setTitle('Show title'); 
//Set the desired preferencesdialog.setPreference('table', 'task'); 			dialog.setPreference('name', 'value');        	
//Opens the dialogdialog.render();

The following code example shows how to create a GlideModal object using the glide_modal_confirm file.

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

Closes the current modal.

Name Type Description
None
Type Description
None

The following code example shows how to use the destroy() method to close a modal.

JavaScript
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 task but keep 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"){        // Closed Incomplete -- will close the Requested Item and all other open tasks        g_form.setValue('state',4);      }else{        // Closed Skipped -- will only close this task        g_form.setValue('state',7);      }         //Regular ServiceNow form submission         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');      }   };
   // Prevents the form from submitting when the dialog first loads   return false;}

The following code example shows how to use GlideModal.get().destroy() to close a modal in a client script. The following button should be declared in the UI page HTML: <button onclick="closeMe()">close</button>.

JavaScript
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(String id)

Returns the GlideModal object identified by the specified UI page name.

Use this method to obtain the GlideModal object to use in other GlideModal operations such as, GlideModal.get().destroy().

Name

Type

Description

id

String

Name of theUI page associated with the modal.You can also specify either the glide_modal_confirm or glide_modal_info modals that are provided in the base system.

Table: UI Page [sys_ui_page]
|Type|Description| |----|-----------| |GlideModal|Requested GlideModal object.|

This example shows how to use the get() method to obtain the modal that you want to close using the destroy() method.

JavaScript
// If the modal was initially created like this:
var dialog = new nowapi.GlideModal("glide_modal_confirm"); dialog.render();
// Code using the modal...
// Now use the get() and destroy() methods to close the modalvar 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()

Returns the GlideModal ID.

Name Type Description
None
Type Description
String ID of the GlideModal.

The following example demonstrates how to get the GlideModal ID on the instance.

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

GlideModal (Next Experience) - getPreference(String name, String value)

Returns the value of the specified preference (property).

Invoking actions that create the modal typically also create the necessary preferences for the modal using the GlideModal (Next Experience) - setPreference(String name, String value) method. The UI page client script can then consume these preferences using this method.

Name Type Description
name String Name of the preference value to retrieve. This value must have previously been set on the modal using the setPreference() method.
value String Value of the preference to retrieve. This value must have previously been set on the modal using the setPreference() method.
Type Description
String Specified preference's value.

This example shows a simple case of setting a preference and then retrieving that preference from a specified modal.

JavaScript
var dialog = new nowapi.GlideModal('UI_dialog_name');//Sets the dialog titledialog.setTitle('Modal title');
//Sets the value of the preference tabledialog.setPreference('table', 'incident');
//Gets the value of the preference tablevar title = dialog.getPreference('table');

GlideModal (Next Experience) - getPreferences()

Returns all preferences and values associated with the modal.

Name Type Description
None
Type Description
String Specified preference's value.

This example shows a simple case of setting a preference and then retrieving that preference from a specified modal.

JavaScript
var dialog = new nowapi.GlideModal('UI_dialog_name');//Sets the dialog titledialog.setTitle('Modal title');
//Sets the value of the preference tabledialog.setPreference('table', 'incident');
//Gets the value of the preference tablevar title = dialog.getPreference('table');

GlideModal (Next Experience) - render()

Renders the UI page specified when the API was instantiated in the modal. You must call this method after you define the modal for it to appear in the UI.

Call this method when you use a UI page to generate the content in your modal. If you want to display HTML within a modal, call renderWithContent(String html) to render the modal.

Name Type Description
None
Type Description
None

The following code example shows how to instantiate a GlideModal object using the UI page "UI_dialog_name", set the title and width of the modal, and then display the modal in the UI (render).

JavaScript
var dialog = new nowapi.GlideModal("UI_dialog_name");
//Set the dialog title and widthdialog.setTitle('Show title');		      	dialog.setWidth(550);
//Display the dialogdialog.render();

GlideModal (Next Experience) - renderWithContent(String html)

Displays a modal with the specified string-based HTML content.

Use the renderWithContent() method in lieu of the render() method when deriving the modal content from HTML.

Name Type Description
html String HTML content to display in the modal.
Type Description
None

This code example shows how to display a modal that is constructed using the passed HTML string which contains a list of choices that the user can select from.

JavaScript
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 task but keep 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"){        // Closed Incomplete -- will close the Requested Item and all other open tasks        g_form.setValue('state',4);      }else{        // Closed Skipped -- will only close this task        g_form.setValue('state',7);      }         //Regular ServiceNow form submission         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');      }   };
   // Prevents the form from submitting when the dialog first loads   return false;}

GlideModal (Next Experience) - setDialog(String dialogName)

Sets the dialog name as a table preference for the GlideModal.

Name

Type

Description

dialogName

String

The name of the modal dialog to be used as the dialog name and corresponding preference table.See also:
|Type|Description| |----|-----------| |None| |

This example shows how to set a modal dialog name as a table preference.

JavaScript
var dialog = new nowapi.GlideModal('change_confirm_reason', false, 648, 250);dialog.setTitle(new GwtMessage().getMessage('Cancel Change Request'));dialog.setPreference('focusTrap', true);dialog.setDialog('onPromptComplete');dialog.setPreference('onPromptCancel', onPromptCancel);dialog.on('closeconfirm', onPromptCancel);dialog.setPreference('buttonLabelComplete', new GwtMessage().getMessage('OK'));dialog.setPreference('buttonLabelCancel', new GwtMessage().getMessage('Cancel'));dialog.render();

GlideModal (Next Experience) - setPreferenceAndReload(Object properties)

Sets the specified preferences and then reloads the modal.

Name Type Description
properties Object Name-value pairs to set as preferences in the format.
Type Description
None

In this example, the setPreferenceAndReload() function sets preferences and reloads the modal with updated preferences. The modal renders with the initial preferences, and after 5 seconds the setPreferenceAndReload() is called and reloads the modal with the updated preferences.

JavaScript
 // UI Page to render in the GlideModal is 'glide_modal_confirm' var glideModal = new nowapi.GlideModal("glide_modal_confirm", false, 600); glideModal.setTitle(getMessage("Confirmation")); glideModal.setPreference("body", getMessage("Are you sure you want to reject this deal registration? This action cannot be undone.")); glideModal.setPreference('buttonLabelComplete', getMessage("Reject")); glideModal.setPreference('buttonLabelCancel', getMessage("Cancel")); glideModal.render();
 var preferences = {     "body": "THIS IS THE UPDATED BODY PREFERENCE",     "buttonLabelComplete": "NEW REJECT",     "buttonLabelCancel": "NEW CANCEL" };
 setTimeout(function() {     glideModal.setPreferenceAndReload(preferences); }, 5000);

GlideModal (Next Experience) - setPreference(String name, String value)

Sets the specified field on the current form to the specified value.

Name

Type

Description

name

String

Name of the form field to update. If this field does not exist on the current form, the request is ignored.

value

String

Value to store in the specified form field.
|Type|Description| |----|-----------| |None| |

The following code example shows how to set the table preference to 'task' and the name preference to 'value'.

JavaScript
var dialog = new nowapi.GlideModal('UI_dialog_name');
//Set the dialog titledialog.setTitle('Show title'); 
//Set the desired preferencesdialog.setPreference('table', 'task'); 			dialog.setPreference('name', 'value');        	
//Opens the dialogdialog.render();

GlideModal (Next Experience) - setTitle(String title)

Sets the title of the modal.

Name Type Description
title String Text to display in the title of the modal.
Type Description
None

The following code example shows how to set the modal title to Table to update.

JavaScript
var dialog = new nowapi.GlideModal('UI_dialog_name');
//Sets the dialog titledialog.setTitle('Table to update'); dialog.setPreference('table', 'task'); 			      	dialog.setWidth(550);
//Opens the dialogdialog.render();

GlideModal (Next Experience) - setWidth(Number/String width)

Sets the width of the modal.

You can also set the width of a modal when you first instantiate the API using the GlideModal() constructor.

Name

Type

Description

width

Number or String

Width of the modal in pixels or the modal CSS class. If a pixel width is passed, it aligns the specified width with the corresponding CSS class.Possible modal CSS classes:

  • modal-alert: (300 px) Assigned when the specified width is 0 to 349 pixels.
  • modal-sm: (400 px) Assigned when the specified width is 350 to 449 pixels.
  • modal-md: (600 px) Assigned when the specified width is 450 to 649 pixels.
  • modal-lg: (900 px) Assigned when the specified width is 650 to 900 pixels.

Maximum width: 900 pixels
|Type|Description| |----|-----------| |None| |

The following code example shows how to set the modal width to 550 pixels.

JavaScript
var dialog = new nowapi.GlideModal('UI_dialog_name');
//Sets the dialog titledialog.setTitle('Show title'); dialog.setPreference('name', 'value'); 			      	dialog.setWidth(550);
//Opens the dialogdialog.render();

GlideModal (Next Experience) - switchView(String newView)

Change the view and reload the modal.

Name Type Description
newView String View to use.
Type Description
None
Text

GlideModal (Next Experience) - type()

Returns the type as GlideModal.

Name Type Description
None
Type Description
String Returns a string indicating that the type is GlideModal.
Text

GlideModal (Next Experience) - updateTitle()

Updates the title specified using GlideModal setTitle() method.

You must always first call GlideModal (Next Experience) - setTitle(String title) to specify the Modal title using updateTitle() to commit the change.

Name Type Description
None
Type Description
None

The following example demonstrates how to use set and update a modal's title by calling setTitle() and updateTitle() respectively.

JavaScript
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);
Search documentation
Search document titles and file paths on the australia branch