---
sourceDocument: Xanadu API Reference
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu API Reference

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# GlideModal - Client

# GlideModal - Client {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read

The GlideModal API provides methods for displaying a content overlay.

Use these 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.  
This is a fully-featured replacement for the GlideWindow and GlideDialogWindow APIs.Figure 1. Example overlay

## GlideModal - GlideModal(String id, Boolean readOnly, Number width) {#ariaid-title2}

Creates an instance of the GlideModalV3 class.
{#r_GMODV3-GlideModal_S_B_N__table_ups_b4s_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| id | String | UI page to load into the modal. |
| readOnly | Boolean | Flag that indicates whether to hide the close button in the modal. Valid values: * true: Don't display the close button in the modal. * false: Display the close button in the modal. Default: false |
| width | Number | Width of modal in pixels. Default: Maximum width: 900 pixels Note: You can also set the modal width using the [GlideModal - setWidth(Number width)](https://servicenow-prod.fluidtopics.net/991VdsfRLVSGIAiz0zj4Dw#r_GMODV3-setWidth_N "Sets the width of the modal in pixels.") method. |
[Table 1. Parameters]

{#r_GMODV3-GlideModal_S_B_N__table_ups_b4s_3v}

## GlideModal - get(String id) {#ariaid-title3}

Get a GlideModal object by ID.
{#r_GMODV3-get_S__table_vwy_xjz_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| id | String | The element id of the GlideModal object. |
[Table 2. Parameters]

{#r_GMODV3-get_S__table_vwy_xjz_3v} {#r_GMODV3-get_S__table_wwy_xjz_3v__entry__2}

| Type | Description |
|-|-|
| GlideModal | The object. |
[Table 3. Returns]

{#r_GMODV3-get_S__table_wwy_xjz_3v}

## GlideModal - getPreference(String name) {#ariaid-title4}

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 - setPreference(String name, String value)](https://servicenow-prod.fluidtopics.net/991VdsfRLVSGIAiz0zj4Dw#r_GMODV3-setPreference_S_S "Sets the specified field on the current form to the specified value.") method. The UI page
client script then consumes these preferences using this method.
{#r_GMODV3-getPreference_S__table_r2h_mrs_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| name | String | Name of the preference value to retrieve. This value must have previously been set on the modal using the [GlideModal - setPreference(String name, String value)](https://servicenow-prod.fluidtopics.net/991VdsfRLVSGIAiz0zj4Dw#r_GMODV3-setPreference_S_S "Sets the specified field on the current form to the specified value.") method. |
[Table 4. Parameters]

{#r_GMODV3-getPreference_S__table_r2h_mrs_3v} {#r_GMODV3-getPreference_S__table_s2h_mrs_3v__entry__2}

| Type | Description |
|-|-|
| String | Specified preference's value. |
[Table 5. Returns]

{#r_GMODV3-getPreference_S__table_s2h_mrs_3v}  
This example shows a simple case of setting a preference and then retrieving that
preference from a specified modal.

    var gm = new GlideModal('UI_dialog_name');
    //Sets the dialog title
    gm.setTitle('Show title');

    //sets the value of the preference table
    gm.setPreference('table', 'incident');

    //gets the value of the preference table
    var title = gm.getPreference('table');

## GlideModal - render() {#ariaid-title5}

Renders the UI page in the modal.
{#r_GMODV3-render__table_zky_hpy_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| None |   |   |
[Table 6. Parameters]

{#r_GMODV3-render__table_zky_hpy_3v} {#r_GMODV3-render__table_aly_hpy_3v__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 7. Returns]

{#r_GMODV3-render__table_aly_hpy_3v}  

    var gm = new GlideModal("UI_dialog_name");

    //Sets the dialog title
    gm.setTitle('Show title');		      	
    gm.setWidth(550);

    //Opens the dialog
    gm.render();

## GlideModal - renderWithContent(String html) {#ariaid-title6}

Display a modal with the specified HTML content.
The renderWithContent() method replaces the render()
method, and does not request a UI page to render.
{#r_GMODV3-renderWithContent_S__table_xss_3hz_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| html | String | The HTML content to be shown in the modal. |
[Table 8. Parameters]

{#r_GMODV3-renderWithContent_S__table_xss_3hz_3v} {#r_GMODV3-renderWithContent_S__table_yss_3hz_3v__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 9. Returns]

{#r_GMODV3-renderWithContent_S__table_yss_3hz_3v}

## GlideModal - setPreference(String name, String value) {#ariaid-title7}

Sets the specified field on the current form to the specified value.
{#r_GMODV3-setPreference_S_S__table_cvd_zqs_3v__entry__3}

| 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. |
[Table 10. Parameters]

{#r_GMODV3-setPreference_S_S__table_cvd_zqs_3v} {#r_GMODV3-setPreference_S_S__table_dvd_zqs_3v__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 11. Returns]

{#r_GMODV3-setPreference_S_S__table_dvd_zqs_3v}  

    var gm = new GlideModal('UI_dialog_name');
    //Sets the dialog title
    gm.setTitle('Show title'); 
    gm.setPreference('table', 'task'); 			
    gm.setPreference('name', 'value');        	

    //Opens the dialog
    gm.render();

## GlideModal - setPreferenceAndReload(Array properties) {#ariaid-title8}

Set the properties and reload the modal.
{#r_GMODV3-setPrefAndReload_A__table_u3v_jqy_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| properties | Array | An array of name-value pairs to be set. |
[Table 12. Parameters]

{#r_GMODV3-setPrefAndReload_A__table_u3v_jqy_3v} {#r_GMODV3-setPrefAndReload_A__table_v3v_jqy_3v__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 13. Returns]

{#r_GMODV3-setPrefAndReload_A__table_v3v_jqy_3v}

## GlideModal - setTitle(String title) {#ariaid-title9}

Sets the title of the modal.
{#r_GMODV3-setTitle_S__table_kxd_l5s_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| title | String | Title to be displayed |
[Table 14. Parameters]

{#r_GMODV3-setTitle_S__table_kxd_l5s_3v} {#r_GMODV3-setTitle_S__table_lxd_l5s_3v__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 15. Returns]

{#r_GMODV3-setTitle_S__table_lxd_l5s_3v}  

    var dialog = new GlideModal('UI_dialog_name');

    //Sets the dialog title
    dialog.setTitle('Show title');
    dialog.setPreference('name', 'value');
     			      	        
    //Opens the dialogdialog.render(); 

## GlideModal - setWidth(Number width) {#ariaid-title10}

Sets the width of the modal in pixels.
You can also set the width of a modal when you first instantiate it using the [GlideModal - GlideModal(String id, Boolean readOnly, Number width)](https://servicenow-prod.fluidtopics.net/991VdsfRLVSGIAiz0zj4Dw#r_GMODV3-GlideModal_S_B_N "Creates an instance of the GlideModalV3 class.") method.
{#r_GMODV3-setWidth_N__table_msx_wts_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| width | Number | Number of pixels to set as the width of the modal. Maximum: 900 pixels |
[Table 16. Parameters]

{#r_GMODV3-setWidth_N__table_msx_wts_3v} {#r_GMODV3-setWidth_N__table_nsx_wts_3v__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 17. Returns]

{#r_GMODV3-setWidth_N__table_nsx_wts_3v}  

    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(String newView) {#ariaid-title11}

Change the view and reload the modal.
{#r_GMODV3-switchView_S__table_ovv_5py_3v__entry__3}

| Name | Type | Description |
|-|-|-|
| newView | String | The view to use. |
[Table 18. Parameters]

{#r_GMODV3-switchView_S__table_ovv_5py_3v} {#r_GMODV3-switchView_S__table_pvv_5py_3v__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 19. Returns]

{#r_GMODV3-switchView_S__table_pvv_5py_3v}