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

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Configuring an action button to open a custom modal

# Configuring an action button to open a custom modal {#ariaid-title1}

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

After you add an action button to your configurable workspace, you can configure the button to open a custom modal.

Buttons execute actions in your configurable workspace. Custom modals provide information or interactive elements without navigating away from the current page through pop-up boxes. Integrating custom modals with action buttons creates
a seamless and interactive experience, enabling you to perform actions intuitively.

## Processes for creating a custom modal {#configuring-an-action-button-to-open-a-custom-modal__section_ar5_vgn_21c}

Configuring an action button to open a custom modal involves several processes:

1. Adding the action button to the form:Creating an action adds the button to the form without assigning it to do anything when selected. For more information, see [Create a form action](https://www.servicenow.com/docs/S8gmXDInb4FJPUjORI5ooA "Add a form action button to your configurable workspace.").

2. Activating Customer Service Management:Adding the Customer Service plugin provides demo data and activates related plugins that are not already active. For more information, see [Activate Customer Service Management](https://www.servicenow.com/docs/access?context=t_ActivateCustomerService&version=xanadu&pubname=xanadu-customer-service-management&ft:locale=en-US).

3. Opening your record page in UI Builder:Accessing your record page in UI Builder enables you to design and configure the page variant with a custom modal. For more information, see [Create a page variant](https://www.servicenow.com/docs/access?context=create-variant&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).

4. Designing the page variant in UI Builder:Using UI Builder to design a page variant passes the modal into the workspace record page. For more information, see [Design a page variant in UIB](https://www.servicenow.com/docs/k6aoN~tNxQ8IVzyP6xatfQ#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.").

5. Configuring the page variant as a modal in UI Builder:Using UI Builder to configure the page variant defines the modal to appear in the workspace record page. For more information, see [Configure a page variant as a modal in UIB](https://www.servicenow.com/docs/9w~7s28uWpy8Fy4YUwqkNA#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.").

6. Creating a UX add-on event mapping:Setting up a UX add-on event mapping connects the action button to your custom modal. For more information, see [Create a UX add-on event mapping](https://www.servicenow.com/docs/A8aHmjD73x4kkS1hJ8a1Lg#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.").

7. Defining the payload for a custom modal:Configuring the payload sets the action button to open the custom modal in your workspace. For more information, see [Define the payload for a custom modal](https://www.servicenow.com/docs/haaGSS~5wlYbnU5oqM8reA#define-the-payload-for-a-custom-modal "Set your action button to open a custom modal by defining the payload parameters.").

{#configuring-an-action-button-to-open-a-custom-modal__ol_lb2_4hn_21c}