---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Criar ou modificar aplicações do Xanadu

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Adicionar um componente de janela de visualização à sua página

# Adicionar um componente de janela de visualização à sua página {#ariaid-title1}

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

Adicione um componente de janela de visualização à sua página e crie uma subpágina para criar conteúdo separado na página.

## Antes de Iniciar

Função necessária: ui_builder_admin

## Procedimento

1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência.  
   Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências.
3. Abra o editor da variante de página à qual você deseja adicionar a janela de visualização.  
   Se você não criou uma página para sua experiência, siga as etapas para [Criar uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários.").
4. Selecione + Adicionar conteúdo na árvore de conteúdo.
5. Selecione um layout de coluna única.
6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas.
7. Insira <kbd class="ph userinput">janela</kbd> de visualização na caixa de pesquisa.
8. Selecione Janelade visualização .  
   Figura 1. Componente da janela de visualização
9. Selecione o componente da janela de visualização na árvore de conteúdo.
10. Selecione + Adicionar no painel de configuração.  
11. Selecione uma [coleção de páginas](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-page-collection-ui-builder "Grupo de páginas que pode ser reutilizado em experiências em guias ou modais.") na lista ou crie uma coleção selecionando + Criar coleção.  
    Para obter mais informações sobre como criar sua própria coleção de páginas, consulte [Criar uma coleção de páginas em várias páginas de IU](https://servicenow-prod.fluidtopics.net/JGnN1ZSKtmXOTUbhqQxsLg "Crie uma coleção de páginas para acomodar o conteúdo com guias que pode ser usado em várias experiências.").

12. Selecione Adicionar.  
    A coleção de páginas é exibida na seção Coleções de páginas do painel de configuração. Somente uma página da coleção de páginas é exibida na área de preparação.
13. Selecione Salvar.
14. Localize o ID e a rota da janela de visualização.  
    Você pode ver o ID e a rota no painel Configuração, conforme mostrado na figura a seguir.
15. Adicione um componente à sua página para abrir a janela de visualização que você acabou de adicionar, como um componente de botão.  
    Para obter mais informações, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes.").
16. Selecione a guia Eventos no painel de configuração.
17. Selecione + Adicionar manipulador de eventos para exibir a janela de visualização.  
18. Em Manipuladores de eventos no nível da página, selecione Carga solicitada da janela de visualização do macroponent do UXF.  
19. No elemento viewportElementID , substitua o valor <kbd class="ph userinput">nulo</kbd> pelo ID da janela de visualização que você localizou em uma etapa anterior.  
    Neste exemplo, é <kbd class="ph userinput">"viewport_1"</kbd>.
20. Selecione Adicionar.  
21. Selecione Salvar.
22. Exiba e teste sua página selecionando ![o botão Visualizar que abre a variante de página.]().