---
sourceDocument: Australia ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/platform-user-interface

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Configure a page variant as a modal in UIB

# Configure a page variant as a modal in UIB {#ariaid-title1}

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

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.

## Before you begin

Complete the following actions:

* [Create a form action](https://servicenow-prod.fluidtopics.net/F14Y_yQnLe0erB55gWKPRw "Create a form action button for a Configurable Workspace.")
* [Activate Customer Service Management](https://www.servicenow.com/docs/access?context=t_ActivateCustomerService&version=australia&pubname=australia-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=australia&pubname=australia-application-development&ft:locale=en-US)
* [Design your page variant in UIB](https://servicenow-prod.fluidtopics.net/7taW276LyjBclxMMJqgiEg#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-a-page-variant-as-a-modal-in-uib__ul_wlf_xnm_d1c}

Role required: admin

## Procedure

1. Open your page variant.
2. Open the sys_ux_screen_type by selecting the menu icon (![menu icon]()) and navigating to DeveloperOpen variant collection record.
3. Select the UX App Route tab under Related Lists and select your page variant.
4. Open UI Builder in a new browser tab and open your configurable workspace experience.
5. Find the page that you want your modal to appear by opening the overview of records for the experience and selecting the page.
6. Select the menu icon (![menu icon]()) and navigate to Open page definition.
7. Select Copy sys_id.
8. Return to the browser tab with the sys_ux_app_route.
9. Select the Parent Macroponent field twice to open a dialog that displays the page identifier, and then select OK.
10. Define the variant to appear in a modal by entering <kbd class="ph userinput">modalContainerViewport</kbd> in the Parent Macroponent Composition Element ID field.
11. Select Update.

*[\>]: and then