g\_modal \(Next Experience\) - Client

concept brazil Updated Sep 10, 2026 18 min read g_modalClientAPINX.md
Raw file servicenow.com

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.

Parent Topic:Client Next Experience API reference

g_modal (Next Experience) - alert(String title, String message, Function callback, style Object)

Displays an alert message relating to a UI action.

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

Text
</td></tr><tr><td>
style.buttonTitle
</td><td>
String
</td><td id="g_modal-alert-style_buttonTitle-entry">
Optional. Text to display on the confirmation button.Default: OK
</td></tr><tr><td>
style.buttonType
</td><td>
String
</td><td id="g_modal-alert-style_buttonType-entry">
Optional. Type of confirmation button to display.Default: default
</td></tr></tbody></table><table id="table_fd2_wwj_xnb" class="returns"><thead><tr><th>
Type
</th><th>
Description
</th></tr></thead><tbody><tr><td>
Promise
</td><td id="g_modal-promise-entry">
If a **callback** parameter is passed, returns promise if successful, error otherwise.If a **callback** parameter isn't passed, the method always returns success.
</td></tr></tbody></table>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; }

Text
## g\_modal \(Next Experience\) - confirm\(String title, String message, Function callback, style Object\)
Displays a confirm message relating to a UI action.
<table id="table_ed2_wwj_xnb" class="parameters"><thead><tr><th>
Name
</th><th>
Type
</th><th>
Description
</th></tr></thead><tbody><tr><td>
title
</td><td>
String
</td><td>
Optional. Title to display in the header of the modal.Default: Confirm
</td></tr><tr><td>
message
</td><td>
String
</td><td id="g_modal-message-entry">
Message to display in the modal body. **Note:** If you only pass one parameter, the method treats it as the **message** parameter.
</td></tr><tr><td>
callback
</td><td>
Function
</td><td id="g_modal-callback-entry">
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
</td></tr><tr><td>
style
</td><td>
Object
</td><td id="g_modal-style-entry">
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

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.
The following code example shows how to call this method to display the confirmation message "Are you sure you want to take this action?"
JavaScript
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:

[Omitted image "g_modal_confirm-modal_shot.png"] Alt text: Screen shot that shows the confirm modal generated by the code

g_modal (Next Experience) - confirmDestroy(String title, String message, Function callback, style Object)

Displays a confirm message related to a UI action, with the confirm button displaying a destructive style.

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

Text
</td></tr><tr><td>
style.cancelTitle
</td><td>
String
</td><td id="g_modal-style_cancelTitle-entry">
Optional. Text to display on the cancel button.Default: Cancel
</td></tr><tr><td>
style.cancelType
</td><td>
String
</td><td id="g_modal-style_cancelType-entry">
Optional. Type of cancel button to display.Valid values:
-   confirm \(blue background\)-   default \(white background\)-   destructive \(red background\)
Default: confirm
</td></tr><tr><td>
style.confirmTitle
</td><td>
String
</td><td id="g_modal-style_confirmTitle-entry">
Optional. Text to display on the confirm button.Default: OK
</td></tr><tr><td>
style.confirmType
</td><td>
String
</td><td id="g_modal-confirmDestroy-style_confirmType-entry">
Optional. Type of confirm button to display.Default: destructive
</td></tr></tbody></table><table id="table_fd2_wwj_xnb" class="returns"><thead><tr><th>
Type
</th><th>
Description
</th></tr></thead><tbody><tr><td>
Promise
</td><td id="g_modal-promise-entry">
If a **callback** parameter is passed, returns promise if successful, error otherwise.If a **callback** parameter isn't passed, the method always returns success.
</td></tr></tbody></table>This example displays a confirmation modal with a red **Cancel** button and a blue **Confirm** 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", cancelType: "destructive", confirmTitle: "Confirm", confirmType: "confirm" })

.then(

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

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

) }

Text
## g\_modal \(Next Experience\) - richText\(String title, String richText, Function callback, String size, String cancelTitle, String confirmTitle, String cancelType, String confirmType, Object resizableConfig\)
Displays a modal that uses passed HTML to generate the content within the modal.
<table id="table_nnj_pgb_h2c" class="parameters"><thead><tr><th>
Name
</th><th>
Type
</th><th>
Description
</th></tr></thead><tbody><tr><td>
title
</td><td>
String
</td><td id="g_modal-title-entry">
Optional. Title to display in the header of the modal.Default: blank
</td></tr><tr><td>
richText
</td><td>
String
</td><td id="g_modal-richText-richText-entry">
HTML content to display in the modal.**Note:** This method removes `<script>` tags, inline JavaScript, and other elements that might pose security exploits.
</td></tr><tr><td>
callback
</td><td>
Function
</td><td id="g_modal-callback-entry">
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
</td></tr><tr><td>
cancelTitle
</td><td>
String
</td><td id="g_modal-richText-cancelTitle-entry">
Optional. Text to display on the cancel button.Default: Cancel
</td></tr><tr><td>
confirmTitle
</td><td>
String
</td><td id="g_modal-richText-confirmTitle-entry">
Optional. Text to display on the confirm button.Default: OK
</td></tr><tr><td>
cancelType
</td><td>
String
</td><td id="g_modal-richText-cancelType-entry">
Optional. Type of cancel button to display.Valid values:
-   confirm \(blue background\)-   default \(white background\)-   destructive \(red background\)
Default: confirm
</td></tr><tr><td>
confirmType
</td><td>
String
</td><td id="g_modal-richText-confirmType-entry">
Optional. Type of confirm button to display.Valid values:
-   confirm \(blue background\)-   default \(white background\)-   destructive \(red background\)
Default: default
</td></tr><tr><td>
resizableConfig
</td><td>
Object
</td><td id="g_modal-resizableConfig-entry">
Optional. Configuration parameters for resizing the associated modal. If you don't want users to be able to resize the modal, don't pass this parameter.```resizableConfig:  {    enableResizable: Boolean,    resizableMaxHeight: Number,    resizableMaxWidth: Number,    resizableMinHeight: Number,    resizableMinWidth: Number   }

Default: Modal is not resizable.

resizableConfig.​enableResizable

Boolean

Flag that indicates whether users can resize the associated modal.Valid values:

  • true: Modal is resizable. Resize handles appear on the borders of the modal.
  • false: Modal isn't resizable.

Default: false

resizableConfig.​resizableMaxHeight

Number

Maximum resizable height of the modal.Data type: Number

Unit: Pixels

Default: Window's height.

resizableConfig.​resizableMinHeight

Number

Minimum resizable height of the modal.Data type: Number

Unit: Pixels

Default: 600px

resizableConfig.​resizableMaxWidth

Number

Maximum resizable width of the modal.Data type: Number

Unit: Pixels

Default: Window's width

resizableConfig.​resizableMinWidth

Number

Minimum resizable width of the modal.Data type: Number

Unit: Pixels

Default: 380px

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.
The following code example shows how to display the text "This is rich text" in bold in the associated modal.
JavaScript
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:

[Omitted image "g_modal_richText-modal_shot.png"] Alt text: Rich text modal

g_modal (Next Experience) - showFields(String title, Array fields, Function callback, String size, String cancelTitle, String confirmTitle, String cancelType, String confirmType, Object resizableConfig, String instruction)

Displays a modal window that contains the specified fields and an OK and Cancel buttons by default.

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.

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

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:

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

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.

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

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

resizableConfig

Object

Optional. Configuration parameters for resizing the associated modal. If you don't want users to be able to resize the modal, don't pass this parameter.``` resizableConfig: { enableResizable: Boolean, resizableMaxHeight: Number, resizableMaxWidth: Number, resizableMinHeight: Number, resizableMinWidth: Number }

Text
Default: Modal is not resizable.
</td></tr><tr><td>
resizableConfig.​enableResizable
</td><td>
Boolean
</td><td id="g_modal-resizableConfig_enableResizable-entry">
Flag that indicates whether users can resize the associated modal.Valid values:
-   true: Modal is resizable. Resize handles appear on the borders of the modal.-   false: Modal isn't resizable.
Default: false
</td></tr><tr><td>
resizableConfig.​resizableMaxHeight
</td><td>
Number
</td><td id="g_modal-resizableConfig_resizableMaxHeight-entry">
Maximum resizable height of the modal.Data type: Number
Unit: Pixels
Default: Window's height.
</td></tr><tr><td>
resizableConfig.​resizableMinHeight
</td><td>
Number
</td><td id="g_modal-resizableConfig_resizableMinHeight-entry">
Minimum resizable height of the modal.Data type: Number
Unit: Pixels
Default: 600px
</td></tr><tr><td>
resizableConfig.​resizableMaxWidth
</td><td>
Number
</td><td id="g_modal-resizableConfig_resizableMaxWidth-entry">
Maximum resizable width of the modal.Data type: Number
Unit: Pixels
Default: Window's width
</td></tr><tr><td>
resizableConfig.​resizableMinWidth
</td><td>
Number
</td><td id="g_modal-resizableConfig_resizableMinWidth-entry">
Minimum resizable width of the modal.Data type: Number
Unit: Pixels
Default: 380px
</td></tr><tr><td>
instruction
</td><td>
String
</td><td id="g_modal-showfields-instruction-entry">
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
</td></tr></tbody></table><table id="table_fd2_wwj_xnb" class="returns"><thead><tr><th>
Type
</th><th>
Description
</th></tr></thead><tbody><tr><td>
Promise
</td><td id="g_modal-promise-entry">
If a **callback** parameter is passed, returns promise if successful, error otherwise.If a **callback** parameter isn't passed, the method always returns success.
</td></tr></tbody></table>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; *fieldValues* in this case. The work notes field on the client-side, with the field value, are in the *updatedFields* array. Since only one field is returned, the example assumes an index position of *0*.

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

Text
Output:
\[Omitted image "g\_modal\_showFields-modal\_shot2.png"\] Alt text: Screen shot of modal produced by associated code.
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(); }); }

Text
Output:
\[Omitted image "g\_modal\_showFields-modal\_shot1.png"\] Alt text: Screen shot of modal produced by associated code.
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) {

}); }

Text
## g\_modal \(Next Experience\) - 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, Object resizableConfig\)
Displays a modal that uses a link to an external URL or UI page for its content.
<table id="table_ed2_wwj_xnb" class="parameters"><thead><tr><th>
Name
</th><th>
Type
</th><th>
Description
</th></tr></thead><tbody><tr><td>
title
</td><td>
String
</td><td id="g_modal-title-entry">
Optional. Title to display in the header of the modal.Default: blank
</td></tr><tr><td>
url
</td><td>
String
</td><td id="g_modal-showFrame-url-entry">
URL of the information to load in the IFrame.**Note:** If only one argument is passed, it is treated as the **url** parameter.
</td></tr><tr><td>
callback
</td><td>
Function
</td><td id="g_modal-callback-entry">
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
</td></tr><tr><td>
size
</td><td>
String
</td><td id="g_modal-showFrame-size-entry">
Optional. Size of the modal.Valid values:
-   fw: Full-width-   sm: 420px by 253.25px-   md: 600px by 253.25px-   lg: 800px x 254px
Default: lg
</td></tr><tr><td>
height
</td><td>
String
</td><td id="g_modal-showFrame-height-entry">
Optional. Height of the content section in the modal. This value is in the format of "&lt;number&gt;&lt;unit&gt;", 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
Default: 100% or 153.75px
</td></tr><tr><td>
modalHeight
</td><td>
String
</td><td id="g_modal-showFrame-modalHeight-entry">
Optional. Height of the modal. This value is in the format of "&lt;number&gt;&lt;unit&gt;", 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
Default: 254px
</td></tr><tr><td>
modalWidth
</td><td>
String
</td><td id="g_modal-showFrame-modalWidth-entry">
Optional. Width of the modal. This value is in the format of "&lt;number&gt;&lt;unit&gt;", 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
Default: 800px
</td></tr><tr><td>
showClose
</td><td>
Boolean
</td><td id="g_modal-showFrame-showClose-entry">
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.
Default: true
</td></tr><tr><td>
autoCloseOn
</td><td>
String
</td><td id="g_modal-showFrame-autoCloseOn-entry">
Optional. Condition on which to automatically close the modal.Valid values:
-   EMPTY\_BODY-   URL\_CHANGED
Default: Don't automatically close modal.
</td></tr><tr><td>
hasLoadingMessage
</td><td>
Boolean
</td><td id="g_modal-showFrame-hasLoadingMessage-entry">
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.
**Note:** You can't customize the “Loading...” message; only configure whether it displays or not.
Default: false
</td></tr><tr><td>
closeOnEscape
</td><td>
Boolean
</td><td id="g_modal-showFrame-closeOnEscape-entry">
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.
Default: false
</td></tr><tr><td>
hideOverlay
</td><td>
Boolean
</td><td id="g_modal-showFrame-hideOverlay-entry">
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.
Default: false
</td></tr><tr><td>
resizableConfig
</td><td>
Object
</td><td id="g_modal-resizableConfig-entry">
Optional. Configuration parameters for resizing the associated modal. If you don't want users to be able to resize the modal, don't pass this parameter.```resizableConfig:  {    enableResizable: Boolean,    resizableMaxHeight: Number,    resizableMaxWidth: Number,    resizableMinHeight: Number,    resizableMinWidth: Number   }

Default: Modal is not resizable.

resizableConfig.​enableResizable

Boolean

Flag that indicates whether users can resize the associated modal.Valid values:

  • true: Modal is resizable. Resize handles appear on the borders of the modal.
  • false: Modal isn't resizable.

Default: false

resizableConfig.​resizableMaxHeight

Number

Maximum resizable height of the modal.Data type: Number

Unit: Pixels

Default: Window's height.

resizableConfig.​resizableMinHeight

Number

Minimum resizable height of the modal.Data type: Number

Unit: Pixels

Default: 600px

resizableConfig.​resizableMaxWidth

Number

Maximum resizable width of the modal.Data type: Number

Unit: Pixels

Default: Window's width

resizableConfig.​resizableMinWidth

Number

Minimum resizable width of the modal.Data type: Number

Unit: Pixels

Default: 380px
|Type|Description| |----|-----------| |Promise|Returns promise if successful, error otherwise. This promise is resolved when the IFrame modal is closed.|

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.

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

[Omitted image "g_modal_showFrame-modal_shot.png"] Alt text: Screen shot of the modal generated by the code

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.

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

[Omitted image "g_modal_showFrame-modal_shot2.png"] Alt text: Screen shot of the modal generated by the code

Search documentation
Search document titles and file paths on the brazil branch