---
sourceDocument: Yokohama ServiceNow AI Platform user interface
sourceDocumentLink: https://www.servicenow.com/docs/r/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Define the payload for a custom modal

# Define the payload for a custom modal {#ariaid-title1}

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

Set your action button to open a custom modal by defining the payload parameters.

## Before you begin

* [Create a form action](https://www.servicenow.com/docs/2XVKeDsIvSR1jqasQYbA5g "Create a form action button and configure it to appear in a workspace.")
* [Activate Customer Service Management](https://www.servicenow.com/docs/access?context=t_ActivateCustomerService&version=yokohama&pubname=yokohama-customer-service-management&ft:locale=en-US)
* Open your record page in UIB or [create a page variant in UIB](https://www.servicenow.com/docs/access?context=create-variant&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)
* [Design your page variant in UIB](https://www.servicenow.com/docs/Bei0qOWmcrCNBXP0SCKCTw#design-a-page-variant-in-uib "Configure a UI Builder page variant to pass from a workspace modal into the variant. This step acts as part of the process to configure an action button to open a custom modal.")
* [Configure your page variant as a modal in UIB](https://www.servicenow.com/docs/fq6MzQl~og5pilGOAPCFPw#configure-a-page-variant-as-a-modal-in-uib "Define your page variant to appear as a modal using UI Builder configurations. This steps acts as part of the process to configure an action button to open a custom modal.")
* [Create a UX add-on event mapping](https://www.servicenow.com/docs/UIsKCJdkSqmdct_~UK~qRA#create-a-ux-add-on-event-mapping "Connect a button to a modal using UX add-on event mapping in order for an action button to open a custom modal.")
{#define-the-payload-for-a-custom-modal__ul_n5t_psm_d1c}

Role required: admin

## Procedure

1. In the navigation filter, navigate to AllDeclarative ActionsForm Actions.
2. Select the form action where you want to add the custom modal.
3. Open the Specify client action field by selecting the record preview icon (![record preview icon]()) and Open Record.
4. Mark the location of your page by entering the page's action name as the route key of the Payload field.
5. Pass variables from the current context by entering the table and sysID values in the fields key.  

        {
          "route": "action-name",
          "fields": {
            "table": "{{table}}",
            "sysId": "{{sysId}}"
          }
        }

6. Select Update.
7. Open a record in your configurable workspace.
8. Test your button by selecting it.  
   Your button opens the custom modal.

*[\>]: and then