g_modal (Next Experience) - Client

  • Release version: Zurich
  • Updated July 31, 2025
  • 17 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 (Next Experience) - alert(String title, String message, Function callback, style Object)

    Displays an alert message relating to a UI action.

    Table 1. Parameters
    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 2. Returns
    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 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 (Next Experience) - confirm(String title, String message, Function callback, style Object)

    Displays a confirm message relating to a UI action.

    Table 3. Parameters
    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 4. Returns
    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?"

    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:

    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.

    Table 5. Parameters
    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 6. Returns
    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.

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

    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 7. Parameters
    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
    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 
  }

    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
    Table 8. Returns
    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.

    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:

    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.

    Table 9. Parameters
    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.

    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.

    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 
  }

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

    Output:

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

    Output:

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

  });
}

    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 11. Parameters
    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

    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

    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

    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

    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.

    Default: true
    autoCloseOn String Optional. Condition on which to automatically close the modal.
    Valid values:
    • EMPTY_BODY
    • URL_CHANGED

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

    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.

    Default: false
    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 
  }

    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
    Table 12. Returns
    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.

    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:

    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.

    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:

    Screen shot of the modal generated by the code