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


---

# g_modal - Client

# g_modal - Client {#ariaid-title1}

* Release version: Xanadu
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 15 minutes to read

The g_modal API enables you to display a modal window to enhance application functionality.

Use this API to display modals in workspaces.  
Using this API you can:

* Display input type fields in a modal window.
* Show something in a frame such as a UI page or external link.
* Perform an action on user confirmation.
* Load a component.
* Use HTML to populate the contents of a modal.

## g_modal - alert(String title, String message, Function callback, style Object) {#ariaid-title2}

Displays an alert message relating to a UI action.
{#g_modal_alert_S_S_F__table_ed2_wwj_xnb__entry__3}{#g_modal_alert_S_S_F__g_modal-title-entry}{#g_modal_alert_S_S_F__g_modal-message-entry}{#g_modal_alert_S_S_F__g_modal-callback-entry}

| Name | Type | Description |
|-|-|-|
| title | String | Optional. Title to display in the header of the modal. Default: Alert |
| message | String | Message to display in the modal body. Note: If you only pass one parameter, the method treats it as the message parameter. |
| callback | Function | Optional. Function to call after the form has been submitted and processed on the server. The callback function has the form `callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where: * action_verb: Name of the UI action executed. Examples: * sysverb_cancel (Cancel button) * sysverb_insert (Submit button) * sysverb_save (Save button) * sys_id: Sys_id of the affected record. * table: Name of the table containing the record. * displayValue: Value that appears on the form. Default: No additional processing |
| style | Object | Optional. Style of the confirmation button to display in the modal. "style": { "buttonTitle": "String", "buttonType": "String" } |
| style.buttonTitle | String | Optional. Text to display on the confirmation button. Default: OK |
| style.buttonType | String | Optional. Type of confirmation button to display. Default: default |
[Table 1. Parameters]

{#g_modal_alert_S_S_F__table_ed2_wwj_xnb} {#g_modal_alert_S_S_F__table_fd2_wwj_xnb__entry__2}{#g_modal_alert_S_S_F__g_modal-promise-entry}

| Type | Description |
|-|-|
| Promise | If a callback parameter is passed, returns promise if successful, error otherwise. If a callback parameter isn't passed, the method always returns success. |
[Table 2. Returns]

{#g_modal_alert_S_S_F__table_fd2_wwj_xnb}  
The following code example shows how to call this method to display an alert message 'Only the assigned to can end this action.'.

    function onClick(g_form) {

      if (g_user.userID != g_form.getValue('assigned_to')) {
        g_modal.alert('Only the assigned to can end this action.');
        return;
      }

      var msg = getMessage("Are you sure you want to take this action?");
      g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
        if (confirmed) {
          g_form.setValue('state', 'closed_complete');
          g_form.save();
        }
      });

      return false;
    }

## g_modal - confirm(String title, String message, Function callback, style Object) {#ariaid-title3}

Displays a confirm message relating to a UI action.
{#g_modal_confirm_S_S_F__table_ed2_wwj_xnb__entry__3}{#g_modal_confirm_S_S_F__g_modal-message-entry}{#g_modal_confirm_S_S_F__g_modal-callback-entry}{#g_modal_confirm_S_S_F__g_modal-style-entry}{#g_modal_confirm_S_S_F__g_modal-style_cancelTitle-entry}{#g_modal_confirm_S_S_F__g_modal-style_cancelType-entry}{#g_modal_confirm_S_S_F__g_modal-style_confirmTitle-entry}{#g_modal_confirm_S_S_F__g_modal-style_confirmType-ph}

| Name | Type | Description |
|-|-|-|
| title | String | Optional. Title to display in the header of the modal. Default: Confirm |
| message | String | Message to display in the modal body. Note: If you only pass one parameter, the method treats it as the message parameter. |
| callback | Function | Optional. Function to call after the form has been submitted and processed on the server. The callback function has the form `callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where: * action_verb: Name of the UI action executed. Examples: * sysverb_cancel (Cancel button) * sysverb_insert (Submit button) * sysverb_save (Save button) * sys_id: Sys_id of the affected record. * table: Name of the table containing the record. * displayValue: Value that appears on the form. Default: No additional processing |
| style | Object | Optional. Style of the confirm and cancel buttons to display in the modal. "style": { "cancelTitle": "String", "cancelType": "String", "confirmTitle": "String", "confirmType": "String" } |
| style.cancelTitle | String | Optional. Text to display on the cancel button. Default: Cancel |
| style.cancelType | String | Optional. Type of cancel button to display. Valid values: * confirm (blue background) * default (white background) * destructive (red background) Default: confirm |
| style.confirmTitle | String | Optional. Text to display on the confirm button. Default: OK |
| style.confirmType | String | Optional. Type of confirm button to display. Valid values: * confirm (blue background) * default (white background) * destructive (red background) Default: default |
[Table 3. Parameters]

{#g_modal_confirm_S_S_F__table_ed2_wwj_xnb} {#g_modal_confirm_S_S_F__table_fd2_wwj_xnb__entry__2}{#g_modal_confirm_S_S_F__g_modal-promise-entry}

| Type | Description |
|-|-|
| Promise | If a callback parameter is passed, returns promise if successful, error otherwise. If a callback parameter isn't passed, the method always returns success. |
[Table 4. Returns]

{#g_modal_confirm_S_S_F__table_fd2_wwj_xnb}  
The following code example shows how to call this method to display the confirmation message "Are you sure you want to take this action?"

    function onClick(g_form) {

      if (g_user.userID != g_form.getValue('assigned_to')) {
        g_modal.alert('Only the assigned to can end this action.');
        return;
      }

      var msg = getMessage("Are you sure you want to take this action?");
      g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
        if (confirmed) {
          g_form.setValue('state', 'closed_complete');
          g_form.save();
        }
      });

      return false;
    }

Output:  

<br />

## g_modal - confirmDestroy(String title, String message, Function callback, style Object) {#ariaid-title4}

Displays a confirm message related to a UI action, with the confirm button displaying a destructive style.
{#g_modal_confirmDestroy_S_S_F__table_ed2_wwj_xnb__entry__3}{#g_modal_confirmDestroy_S_S_F__g_modal-message-entry}{#g_modal_confirmDestroy_S_S_F__g_modal-callback-entry}{#g_modal_confirmDestroy_S_S_F__g_modal-style-entry}{#g_modal_confirmDestroy_S_S_F__g_modal-style_cancelTitle-entry}{#g_modal_confirmDestroy_S_S_F__g_modal-style_cancelType-entry}{#g_modal_confirmDestroy_S_S_F__g_modal-style_confirmTitle-entry}

| Name | Type | Description |
|-|-|-|
| title | String | Optional. Title to display in the header of the modal. Default: Confirm |
| message | String | Message to display in the modal body. Note: If you only pass one parameter, the method treats it as the message parameter. |
| callback | Function | Optional. Function to call after the form has been submitted and processed on the server. The callback function has the form `callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where: * action_verb: Name of the UI action executed. Examples: * sysverb_cancel (Cancel button) * sysverb_insert (Submit button) * sysverb_save (Save button) * sys_id: Sys_id of the affected record. * table: Name of the table containing the record. * displayValue: Value that appears on the form. Default: No additional processing |
| style | Object | Optional. Style of the confirm and cancel buttons to display in the modal. "style": { "cancelTitle": "String", "cancelType": "String", "confirmTitle": "String", "confirmType": "String" } |
| style.cancelTitle | String | Optional. Text to display on the cancel button. Default: Cancel |
| style.cancelType | String | Optional. Type of cancel button to display. Valid values: * confirm (blue background) * default (white background) * destructive (red background) Default: confirm |
| style.confirmTitle | String | Optional. Text to display on the confirm button. Default: OK |
| style.confirmType | String | Optional. Type of confirm button to display. Default: destructive |
[Table 5. Parameters]

{#g_modal_confirmDestroy_S_S_F__table_ed2_wwj_xnb} {#g_modal_confirmDestroy_S_S_F__table_fd2_wwj_xnb__entry__2}{#g_modal_confirmDestroy_S_S_F__g_modal-promise-entry}

| Type | Description |
|-|-|
| Promise | If a callback parameter is passed, returns promise if successful, error otherwise. If a callback parameter isn't passed, the method always returns success. |
[Table 6. Returns]

{#g_modal_confirmDestroy_S_S_F__table_fd2_wwj_xnb}  
This code example shows how to call the confirmDestroy() method to display a confirmation modal with a red OK button.

    function callback(value){ 
      value ? console.log("confirm destroy callback") : console.log('cancel callback'); 
    }

    function onClick(g_form) {
      g_modal.confirmDestroy("Confirm Destroy Title", "Confirm Destroy Message", callback, {
        cancelTitle: "Cancel",
        confirmTitle: "Confirm",
        cancelType: "destructive",
        confirmType: "confirm"
      })

      .then( 

        function test() {
          g_form.setValue("state', '7");
        }, 

        function fail() {
          g_form.setValue("state", 2)
        } 
      )
    }

Output:  

<br />

## g_modal - richText(String title, String richText, Function callback, String size, String cancelTitle, String confirmTitle, String cancelType, String confirmType) {#ariaid-title5}

Displays a modal that uses passed HTML to generate the content within the modal.
{#g_modal_richText_S_S_F__table_nnj_pgb_h2c__entry__3}{#g_modal_richText_S_S_F__g_modal-title-ph}{#g_modal_richText_S_S_F__g_modal-callback-entry}{#g_modal_richText_S_S_F__g_modal-style_confirmType-ph}

| Name | Type | Description |
|-|-|-|
| title | String | Optional. Title to display in the header of the modal. Default: blank |
| richText | String | HTML content to display in the modal. Note: This method removes `<script>` tags, inline JavaScript, and other elements that might pose security exploits. |
| callback | Function | Optional. Function to call after the form has been submitted and processed on the server. The callback function has the form `callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where: * action_verb: Name of the UI action executed. Examples: * sysverb_cancel (Cancel button) * sysverb_insert (Submit button) * sysverb_save (Save button) * sys_id: Sys_id of the affected record. * table: Name of the table containing the record. * displayValue: Value that appears on the form. Default: No additional processing |
| cancelTitle | String | Optional. Text to display on the cancel button. Default: Cancel |
| confirmTitle | String | Optional. Text to display on the confirm button. Default: OK |
| cancelType | String | Optional. Type of cancel button to display. Valid values: * confirm (blue background) * default (white background) * destructive (red background) Default: confirm |
| confirmType | String | Optional. Type of confirm button to display. Valid values: * confirm (blue background) * default (white background) * destructive (red background) Default: default |
[Table 7. Parameters]

{#g_modal_richText_S_S_F__table_nnj_pgb_h2c} {#g_modal_richText_S_S_F__table_onj_pgb_h2c__entry__2}{#g_modal_richText_S_S_F__g_modal-promise-entry}

| Type | Description |
|-|-|
| Promise | If a callback parameter is passed, returns promise if successful, error otherwise. If a callback parameter isn't passed, the method always returns success. |
[Table 8. Returns]

{#g_modal_richText_S_S_F__table_onj_pgb_h2c}  
The following code example shows how to display the text "This is rich text" in bold in the associated modal.

    function callback(value){
      value ? console.log("confirm richtext callback") : console.log('cancel rich text callback'); 
    } 

    function onClick(g_form) {
      g_modal.richText("RichTextTitle", "<b>This is rich text</b>", callback, {
        cancelTitle: "Rich Cancel",
        confirmTitle: "Rich Confirm"
      }) 

      .then(
        function test() {
          g_form.setValue("state', '7"); 
        }, 

        function fail() {
          g_form.setValue("state", 2) 
        }
      )
    }

Output:  

<br />

## g_modal - showFields(String title, Array fields, Function callback, String size, String cancelTitle, String confirmTitle, String cancelType, String confirmType, String instruction) {#ariaid-title6}

Displays a modal window that contains the specified fields and an OK and Cancel buttons by default.
{#g_modal_showFields_S_S_F__table_ed2_wwj_xnb__entry__3}{#g_modal_showFields_S_S_F__g_modal-title-entry}{#g_modal_showFields_S_S_F__g_modal-callback-entry}{#g_modal_showFields_S_S_F__g_modal-size-entry}{#g_modal_showFields_S_S_F__g_modal-style_confirmType-ph}

| Name | Type | Description |
|-|-|-|
| title | String | Optional. Title to display in the header of the modal. Default: " " |
| fields | Array of Objects | List of fields to display in the modal. Each field is defined in a separate object. The fields parameters that you pass are dependent on the type of field (fields.type) specified. The fields display in the modal in the same order as they appear in the array. fields: [ { autoFocus: Boolean, choices: "Array", display_value_list: "String", enableMentions: Boolean, label: "String", mandatory: Boolean, name: "String", referringTable: "String", referringRecordId: "String", type: "String", value: "String" } ] |
| fields.​autoFocus | Boolean | Optional. Flag that indicates whether the field should default to auto focus when the modal loads. Only one field should have this value set to true. Valid values: * true: Auto focus. * false: Don't auto focus. {#g_modal_showFields_S_S_F__ul_u1y_fm2_3fc} Default: false |
| fields.​choices | Array of Objects | Required if the fields.type parameter is set to `choice`. List of options to display in the associated list field. Each entry in the choice list must be specified as a separate object in the `choices` array. For example: choices: [ { displayValue: "String", value: "String } ] |
| fields.​choices.​displayValue | String | Optional. Value to display in the list field. Default: Blank |
| fields.choices.value | String | Optional. Internal value of the value displayed in the list field. Default: Null |
| fields.​display_value_list | Array of Strings | Optional. List of strings to display. For example, `['item1', 'item2', 'item3']`. |
| fields.​enableMentions | Boolean | Required if fields.type is `html`. Flag that indicates whether you can mention a user in the modal. Valid values: * true: Users can be mentioned in the modal. * false: Users can't be mentioned in the modal. {#g_modal_showFields_S_S_F__ul_vtq_jzc_cgc} Default: false |
| fields.label | String | Optional. Text to display as the label for this field in the modal. Default: Blank |
| fields.​mandatory | Boolean | Optional. Flag that indicates whether the field is mandatory. Valid values: * true: Field is mandatory. * false: Field is optional. {#g_modal_showFields_S_S_F__ul_wtq_jzc_cgc} Default: false |
| fields.​name | String | Internal name of the field. If the fields.type parameter is set to `reference` or `glide_list`, it is the reference field on the current record being used to search. |
| fields​.referringTable | String | Required if the fields.type parameter is set to `reference` or `glide_list`. Name of the table that you are referencing from. For example: `incident` |
| fields.​referringRecordId | String | Required if the fields.type parameter is set to `reference`. Sys_id of the record that you're calling in the UI action form. |
| fields.type | String | Type of field to display in the modal. Each field type has a set of fields.\<\> elements that can be passed. The values in brackets \[ \] below are the fields elements supported by the associated fields type. Valid values: * boolean \[autofocus, label, mandatory, name, value\] * choice \[autofocus, choices, label, mandatory, name, value\] * domain_id \[label, referringRecordId, referringTable, value\] * [glide_list](https://www.servicenow.com/community/in-other-news/managing-glide-lists/ba-p/2279191) \[autofocus, display_value_list, label, name, mandatory, referringRecordId, referringTable, value\] * html \[autofocus, enableMentions, label, mandatory, name, referringRecordId, referringTable, value\] * reference \[autofocus, label, mandatory, name, reference, referringRecordId, referringTable, value\] * string \[autofocus, label, mandatory, name, value\] * textarea \[autofocus, label, mandatory, name, value\] {#g_modal_showFields_S_S_F__ul_rby_fm2_3fc} |
| fields.value | String | Optional. Value to display in the field. For example, for a choice field you might display a user prompt: `value: getMessage(' -- Select -- ')` Or for a reference field you might display the value of a field on the associated form: `g_form.getValue('caller_id')` Default: Blank |
| callback | Function | Optional. Function to call after the form has been submitted and processed on the server. The callback function has the form `callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where: * action_verb: Name of the UI action executed. Examples: * sysverb_cancel (Cancel button) * sysverb_insert (Submit button) * sysverb_save (Save button) * sys_id: Sys_id of the affected record. * table: Name of the table containing the record. * displayValue: Value that appears on the form. Default: No additional processing |
| size | String | Optional. Size of the modal. Valid values: * fw: Full-width * sm: 420px by 315px * md: 600px by 450px * lg: 800px by 600px Note: If a pixel value is specified, the modal takes up the whole browser. For example, passing "1px" makes the modal full-width. Default: sm |
| cancelTitle | String | Optional. Text to display on the cancel button. Default: Cancel |
| confirmTitle | String | Optional. Text to display on the confirm button. Default: OK |
| cancelType | String | Optional. Type of cancel button to display. Valid values: * confirm (blue background) * default (white background) * destructive (red background) Default: confirm |
| confirmType | String | Optional. Type of confirm button to display. Valid values: * confirm (blue background) * default (white background) * destructive (red background) Default: default |
| instruction | String | Optional. Instructions to display in the modal. This content appears below the modal title and above the first field in the modal. Default: No instructions displayed |
[Table 9. Parameters]

{#g_modal_showFields_S_S_F__table_ed2_wwj_xnb} {#g_modal_showFields_S_S_F__table_fd2_wwj_xnb__entry__2}

| Type | Description |
|-|-|
| Promise | Returns promise if successful, error otherwise. |
[Table 10. Returns]

{#g_modal_showFields_S_S_F__table_fd2_wwj_xnb}  
The following example shows prompting a user for a reason using a modal window, and then passing it back to the work notes field on the record. The then() method returns a promise, which returns what the modal
returns; <var class="keyword varname">fieldValues</var> in this case. The work notes field on the client-side, with the field value, are in the <var class="keyword varname">updatedFields</var> array. Since only one field is returned, the example assumes an
index position of <var class="keyword varname">0</var>.

    function onClick(g_form) {
        g_modal.showFields({
            title: "Enter your reason",
            fields: [{
                type: 'textarea',
                name: 'work_notes',
                label: getMessage('Reason'),
                mandatory: true
            }],
            size: 'lg'
        }).then(function(fieldValues) {
            g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
            g_form.save();
        });
    }

Output:

The following example expands on the example above, adding choice and a reference fields.

    function onClick(g_form) {

        var fields = [{
            type: 'textarea',
            name: 'work_notes',
            label: getMessage('Reason'),
            mandatory: true
        },
        {
            type: 'choice',
            name: 'reason_code',
            label: getMessage('Reason code'),
            value: getMessage(' -- Select -- '),
            choices: [
              {
                displayValue: 'Duplicate',
                value: 'duplicate'
              },
              {
                displayValue: 'Canceled',
                value: 'canceled'
              }
            ],
            mandatory: true
        },
        {
            type: 'reference',
            name: 'caller_id',
            label: getMessage('What is your name?'),
            mandatory: true,
            reference: 'sys_user',
            referringTable: 'incident',
            referringRecordId: g_form.getUniqueValue(),
    	 value: g_form.getValue('caller_id'),
    	 displayValue: g_form.getDisplayValue('caller_id')
        }
      ];

      g_modal.showFields({
        title: "Enter your reason",
        fields: fields,
        size: 'lg'
      }).then(function(fieldValues) {
            g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
            g_form.setValue('caller_id', fieldValues.updatedFields[2].value);
            g_form.save();
      });
    }

Output:

The following example shows how to use this method to display a modal that contains textarea, choices, reference, glide_list, and domain_id field types.

    function onClick(g_form) {
      var fields = [
        {
          type: 'textarea',
          name: 'work_notes',
          label: getMessage('Reason'),
          mandatory: true
        },
        {
          type: 'choice',
          name: 'reason_code',
          label: getMessage('Reason code'),
          value: getMessage(' -- Select -- '),
          choices: [
            {
              displayValue: 'Duplicate',
              value: 'duplicate'
            },
            {
              displayValue: 'Canceled',
              value: 'canceled'
            }
          ],
          mandatory: true
        },
        {
          type: 'reference',
          name: 'caller_id',
          label: getMessage('What is your name?'),
          mandatory: true,
          referringTable: 'incident',
          referringRecordId: g_form.getUniqueValue(),
          value: g_form.getValue('caller_id')
        },
        {
          type: 'glide_list',
          name: 'watch_list',
          label: 'A list', 
          mandatory: false,
          referringTable: 'incident',
          referringRecordId: g_form.getUniqueValue(),
          value: '628,9ee1,f298d',
          display_value_list: ['item1', 'item2', 'item3']
        },
        {
          label: 'Domain ID',
          type: 'domain_id',
          value: 'c90d4b084a362312013398f051272c0d',
          displayValue: 'TOP/ACME',
          referringRecordId: '552c48888c033300964f4932b03eb092',
          referringTable: 'incident'
        }
      ];

      g_modal.showFields({
        title: "Enter your reason",
        fields: fields,
        size: 'lg'
      }).then(function(fieldValues) {

      });
    }

Output:  

<br />

## g_modal - showFrame(String title, String url, Function callback, String size, String height, String modalHeight, String modalWidth, Boolean showClose, String autoCloseOn, Boolean hasLoadingMessage, Boolean closeOnEscape, Boolean
hideOverlay) {#ariaid-title7}

Displays a modal that uses a link to an external URL or UI page for its content.
{#g_modal_showFrame_S_S_F__table_ed2_wwj_xnb__entry__3}{#g_modal_showFrame_S_S_F__g_modal-title-ph}{#g_modal_showFrame_S_S_F__g_modal-callback-entry}{#g_modal_showFrame_S_S_F__g_modal-size-entry}

| Name | Type | Description |
|-|-|-|
| title | String | Optional. Title to display in the header of the modal. Default: blank |
| url | String | URL of the information to load in the IFrame. Note: If only one argument is passed, it is treated as the url parameter. |
| callback | Function | Optional. Function to call after the form has been submitted and processed on the server. The callback function has the form `callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where: * action_verb: Name of the UI action executed. Examples: * sysverb_cancel (Cancel button) * sysverb_insert (Submit button) * sysverb_save (Save button) * sys_id: Sys_id of the affected record. * table: Name of the table containing the record. * displayValue: Value that appears on the form. Default: No additional processing |
| size | String | Optional. Size of the modal. Valid values: * fw: Full-width * sm: 420px by 253.25px * md: 600px by 253.25px * lg: 800px x 254px {#g_modal_showFrame_S_S_F__ul_sdg_lzc_cgc} Default: lg |
| height | String | Optional. Height of the content section in the modal. This value is in the format of "\<number\>\<unit\>", such as "80%" or "300px". If you only pass a number, the method assumes the unit of measure is pixels. Valid units of measure: * % * em * px * vh {#g_modal_showFrame_S_S_F__ul_tdg_lzc_cgc} Default: 100% or 153.75px |
| modalHeight | String | Optional. Height of the modal. This value is in the format of "\<number\>\<unit\>", such as "80%" or "300px". If you only pass a number, the method assumes the unit of measure is pixels. Valid units of measure: * % * em * px * vh {#g_modal_showFrame_S_S_F__ul_udg_lzc_cgc} Default: 254px |
| modalWidth | String | Optional. Width of the modal. This value is in the format of "\<number\>\<unit\>", such as "80%" or "300px". If you only pass a number, the method assumes the unit of measure is pixels. Valid units of measure: * % * em * px * vh {#g_modal_showFrame_S_S_F__ul_vdg_lzc_cgc} Default: 800px |
| showClose | Boolean | Optional. Flag that indicates whether the close icon (X) appears in the upper-right corner of the modal. Valid values: * true: Display the close icon. * false: Don't display the close icon. {#g_modal_showFrame_S_S_F__ul_wdg_lzc_cgc} Default: true |
| autoCloseOn | String | Optional. Condition on which to automatically close the modal. Valid values: * EMPTY_BODY * URL_CHANGED {#g_modal_showFrame_S_S_F__ul_xdg_lzc_cgc} Default: Don't automatically close modal. |
| hasLoadingMessage | Boolean | Optional. Flag that indicates whether to display the Loading... message in the content slot of the modal before loading the modal content. Valid values: * true: Display loading message. * false: Don't display the loading message. The content slot of the modal is empty before content is loaded. {#g_modal_showFrame_S_S_F__ul_ydg_lzc_cgc} Note: You can't customize the "Loading..." message; only configure whether it displays or not. Default: false |
| closeOnEscape | Boolean | Optional. Flag that indicates whether the user can close the modal by pressing the escape key. Valid values: * true: Modal closes when the user presses the escape key. * false: Modal doesn't close when the user presses the escape key. {#g_modal_showFrame_S_S_F__ul_zdg_lzc_cgc} Default: false |
| hideOverlay | Boolean | Optional. Flag that indicates whether to display the transparent gray overlay over the record page. Valid values: * true: Hide the transparent gray overlay over the record page. * false: Display the transparent gray overlay over the record page. {#g_modal_showFrame_S_S_F__ul_a2g_lzc_cgc} Default: false |
[Table 11. Parameters]

{#g_modal_showFrame_S_S_F__table_ed2_wwj_xnb} {#g_modal_showFrame_S_S_F__table_fd2_wwj_xnb__entry__2}

| Type | Description |
|-|-|
| Promise | Returns promise if successful, error otherwise. This promise is resolved when the IFrame modal is closed. |
[Table 12. Returns]

{#g_modal_showFrame_S_S_F__table_fd2_wwj_xnb}  
The following example shows how to display a KB article in a model using the sys_id of the KB article record and a base URL.

    function onClick(g_form) {
      var kbId = '24d9243187032100deddb882a2e3ec33'; //sysId of KB article
      g_modal.showFrame({
        url: '/kb_view.do?sys_kb_id=' + kbId,
        title: 'Test Knowledge Article',
        size: 'lg',
        height: 500px
      });
    }

Output:

This example shows how to use an embedded UI page when creating a modal. It uses window.parent.postMessage() in the UI page to pass data from the iFrame back to the workspace since the
g_form API is not accessible in a UI page when it is in the iFrame.

    function onClick(g_form) {
      function proposeMIC(data) {
        var workNotes = data.msg + "\n" + data.workNotes;
        var notes = g_form.getValue('work_notes') + ' ' + workNotes;
        var bi = g_form.getValue('business_impact') + ' ' + data.businessImpact;
        g_form.setValue('work_notes', notes.trim());
        g_form.setValue('business_impact', bi.trim());
        g_form.submit('sysverb_mim_propose');
      }
    	
      function openPopup() {
        if(!g_form.getControl('work_notes')) {
          getMessage('Cannot propose major incident as "Worknotes" is not visible', function(msg) {
    	 g_form.addErrorMessage(msg);
          });
          return false;
        }

        var url = "/sn_major_inc_mgmt_mim_propose.do?sysparm_stack=no&sysparm_workspace=" + true;
        g_modal.showFrame({
          title: getMessage("Propose Major Incident"),
          url: url,
          size: 'lg',
          autoCloseOn: 'URL_CHANGED',
          callback: function (ret, data) {
            if (ret)
              proposeMIC(data);
          }
        });
      }
    	
      openPopup();
    }

Output:  

<br />