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


---

# Design a page variant in UIB

# Design a page variant in UIB {#ariaid-title1}

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

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.

## Before you begin

Complete the following actions:

* [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-a-page-variant-in-uib__ul_wlf_xnm_d1c}

Role required: admin

## Procedure

1. Open your page variant.
2. Add components to display on the page by selecting +Add component under the Body element.
3. Select the added component and select the Table field.
4. Switch the setting to Bind data and dot-walk to the table prop by entering <kbd class="ph userinput">@context.props.table</kbd>.
5. Select the Title field, and switch to Script mode.
6. Enter the following script and pass the sysID received through the URL parameter as a JS template variable.  

       function evaluateProperty({ api, helpers }) {
       	return `Only ${api.context.props.sysId}`;
       }

7. Select Apply for the script and select Save.

## Result

The table and sysID variables are configured to be passed from the modal through the URL into the variant.