---
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 modal de janela de visualização à sua experiência

# Adicionar um modal de janela de visualização à sua experiência {#ariaid-title1}

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

Adicione uma janela de visualização em um modal na sua experiência.

## Antes de Iniciar

Função necessária: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Use modais de janela de visualização para incorporar subpáginas ou outras experiências em um modal em sua página ou experiência primária. Os modais da janela de visualização podem ser abertos por meio de eventos ou scripts. Os modais da janela de exibição são limitados a uma sub-rota por modal da janela de exibição. Você pode criar modais de janela de visualização adicionais para rotas extras.  
Nota:  
Os modais de janela de visualização legados não podem ser atualizados e devem ser recriados para aproveitar a nova funcionalidade.

## 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.  
   Para obter mais informações, 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.").
3. Abra ou crie uma página.  
   Se você abrir uma página existente, verifique se está no mesmo escopo da página original. Caso contrário, altere o escopo antes de começar a editar a página. O escopo da aplicação protege as aplicações identificando e restringindo o acesso a dados e arquivos de aplicações. Os administradores definem o escopo para especificar quais partes de uma aplicação podem ser acessadas por outras aplicações. O escopo da aplicação protege os dados e os arquivos de aplicações. Consulte [Saiba mais sobre segurança e funções](https://servicenow-prod.fluidtopics.net/9Jsyh_1H~dn221ndkZFSJw "Configure a segurança e as funções para sua instância Construtor de IU.") para obter mais informações sobre o escopo da aplicação.
4. Selecione + Adicionar conteúdo na árvore de conteúdo.
5. Selecione um layout de coluna única.
6. Selecione + ao lado de Modais na árvore de conteúdo.
7. Selecione o modal da janela de visualização na lista.  
   Figura 1. Modal da janela de visualização  
   Um modelo de janela de visualização aparece acima da página.
8. Clique em Salvar.
9. Selecione a janela de visualização na árvore de conteúdo.  
10. Selecione + Adicionar ao lado de Coleções de páginas na guia Configurar.  
11. Selecione uma coleção de páginas ou crie uma nova.  
    Para obter mais informações, 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. Clique em Adicionar.
13. Clique em Salvar.
14. Adicione um componente que abre o modal da janela de visualização.  
    O exemplo a seguir usa um botão para abrir o modal da janela de visualização.

15. Selecione a guia Eventos.
16. Selecione + Adicionar manipulador de eventos.  
17. Selecione Abrir ou fechar caixa de diálogo modal.
18. Habilite a caixa de diálogo Abrir modal.
19. Selecione o modal da janela de visualização que você criou no menu suspenso Modal.  
    O ID da janela de visualização é preenchido automaticamente.
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.]().