---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Projete uma variante de página no UIB

# Projete uma variante de página no UIB {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

Configure uma variante de página do Construtor de IU para passar de um modal de espaço para a variante. Esta etapa atua como parte do processo para configurar um botão de ação para abrir um modal personalizado.

## Antes de Iniciar

Execute as seguintes ações:

* [Crie uma ação de formulário](https://servicenow-prod.fluidtopics.net/Oe~pPhp_CEeXYhx62w~QDA "Adicione um botão de ação de formulário ao seu espaço configurável.")
* [Ative a Gestão de atendimento ao cliente](https://www.servicenow.com/docs/access?context=t_ActivateCustomerService&version=yokohama&pubname=yokohama-customer-service-management&ft:locale=en-US)
* Abra sua página de registro no UIB ou [Crie uma variante de página no 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}

Função necessária: administrador

## Procedimento

1. Abra sua variante de página.
2. Selecione os componentes a serem exibidos na página - Adicionar componente No elemento Corpo.
3. Selecione o componente adicionado e selecione Tabela campo.
4. Mude a configuração para Vincular dados e dê um ponto para a propriedade da tabela digitando <kbd class="ph userinput">a context.props.table </kbd>.
5. Selecione Título e comutador para Script modo.
6. Insira o script a seguir e passe o SYSID recebido por meio do parâmetro URL como uma variável de modelo JS.  

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

7. Selecione Aplicar para o script e selecione Salvar .

## Resultado

A tabela e as variáveis SYSID são configuradas para serem passadas do modal por meio da URL para a variante.