---
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 caixa de diálogo não modal a uma página Construtor de IU

# Adicionar caixa de diálogo não modal a uma página Construtor de IU {#ariaid-title1}

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

Saiba como adicionar uma caixa de diálogo não modal em Construtor de IU. Uma caixa de diálogo não modal é uma janela flutuante que contém conteúdo acima de uma página.

## Antes de Iniciar

Função necessária: ui_builder_admin  
As etapas a seguir orientam você no processo de configuração de um botão para abrir uma caixa de diálogo não modal que contém o componente Anexos.  
Nota:  
O procedimento descrito aqui é apenas um exemplo de como usar caixas de diálogo não modais. Existem infinitas possibilidades. Adicione e configure caixas de diálogo não modais para atender às suas necessidades de negócio.

## 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 ou crie uma variante de página.  
   Para obter mais informações sobre como criar uma página em Construtor de IU, consulte [Criação de 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. Na árvore de conteúdo, mova o mouse para Caixas de diálogonão modais , selecione o ícone + e selecione o componente de diálogo não modal.  
5. Se a caixa de diálogo não modal não aparecer na fase automaticamente, selecione a nova caixa de diálogo não modal chamada Caixa de diálogo não modal padrão na árvore de conteúdo.
6. Na guia Configurar do painel de configuração, exiba as predefinições que foram adicionadas automaticamente com a caixa de diálogo não modal, por exemplo, a largura, a altura, a posição e a configuração de arrastar.  

   Todas essas propriedades predefinidas podem ser editadas, se necessário.  
   Nota:  
   Para obter mais informações sobre as propriedades avançadas de Caixas de diálogo não modais, consulte o [Site para desenvolvedores da ServiceNow](https://developer.servicenow.com/dev.do#!/reference/next-experience/vancouver/now-components/now-modeless-dialog/overview).
7. Na gaveta de recursos de dados, o controlador de caixa de diálogo não modal foi adicionado automaticamente.  
8. Na árvore de conteúdo, selecione + Adicionar conteúdo em Caixa de diálogo não modal padrão \> ações para adicionar conteúdo ao cabeçalho da caixa de diálogo não modal.
9. Pesquise e selecione o componente de texto estilizado.
10. No painel Configuração de texto estilizado, selecione Nenhum para configurar o componente manualmente.  

    Se a predefinição de subtítulo de registro tiver sido adicionada automaticamente, selecione a seta suspensa, selecione Nenhume selecione Remover na guia Configurar.
11. Se ainda não estiver aberto, selecione Configurar para abrir a guia Configurar.
12. Em Texto, remova o texto de exemplo e digite <kbd class="ph userinput">Adicionar anexos</kbd>.  
13. Selecione Salvar no cabeçalho do Construtor de IU.
14. Na árvore de conteúdo, selecione + Adicionar conteúdo em Caixa de diálogo não modal padrão \> conteúdo \> Contêiner para adicionar conteúdo ao corpo da caixa de diálogo não modal.
15. Selecione o componente Anexos.
16. No painel Configuração de anexos, se ainda não estiver selecionado, selecione Registrar anexos e Aplicar para configurar o componente com uma predefinição.  

    Para obter mais informações sobre como configurar o componente Anexos, consulte o [site do ServiceNow Developer](https://developer.servicenow.com/dev.do#!/reference/next-experience/vancouver/shared-components/now-record-common-attachments-connected/overview).
17. Você pode adicionar conteúdo ao rodapé da caixa de diálogo não modal, mas, neste exemplo, deixe o rodapé em branco.
18. Selecione Salvar.  
    Observe na árvore de conteúdo que a caixa de diálogo não modal e todos os seus componentes são listados acima do corpo da estrutura da página. Além disso, o componente suspenso Caixas de diálogo minimizadas é adicionado à página automaticamente (e está listado sob o Corpo na árvore de conteúdo) para fornecer a funcionalidade do ícone de minimizar no cabeçalho da caixa de diálogo não modal.

19. Na árvore de conteúdo, selecione Corpo.
20. Adicione um componente de botão e configure-o para abrir a caixa de diálogo não modal.
    1. Na árvore de conteúdo, selecione o ícone de Menu ao lado de Corpo e selecione Adicionar conteúdo.
    2. Na guia Layouts, selecione Coluna única.  
       Um novo layout de coluna contendo uma única coluna é adicionado à parte inferior da página.
    3. Na fase, selecione o ícone + no novo layout de coluna.  
       ![Layout de coluna única com uma seta preta apontando para o ícone + na coluna.]()
    4. Pesquise e selecione o componente simples Botão.  
    5. No painel de configuração, na guia Configurar, selecione Nenhum para configurar o componente manualmente.
    6. Selecione a guia Eventos no painel de configuração.
    7. Selecione + Adicionar manipulador de eventos.  
    8. Na lista à esquerda, selecione Abrir caixa de diálogo não modal (pode ser necessário rolar para baixo na lista).
    9. Tipo de <kbd class="ph userinput">anexos</kbd> no título minimizado.
    10. Selecione o padrão Caixa de diálogo não modal em Caixa de diálogo não modal.  
        Há outras opções que podem ser configuradas aqui, incluindo um título e uma categoria.
    11. Selecione Adicionar.  
    12. Selecione a guia Configurar.
    13. Tipo <kbd class="ph userinput">Adicionar anexos</kbd> no rótulo.  
    {#add-modeless-dialog__substeps_dqp_v3n_b1c}
21. Selecione Salvar.
22. Selecione a seta suspensa ao lado de Visualizar no cabeçalho Construtor de IU e selecione Abrir caminho da URL na lista.
23. Selecione o botão Adicionar anexos para testar a caixa de diálogo não modal.  
    A caixa de diálogo não modal é aberta acima da página principal com o título na parte superior e o componente Anexos abaixo.
24. Para testar a funcionalidade de minimizar, selecione o ícone de minimizar na caixa de diálogo não modal.  
    ![Cabeçalho da caixa de diálogo não modal com seta preta apontando para o ícone de minimizar.]()  
    A caixa de diálogo não modal é minimizada e pode ser acessada no menu suspenso Caixas de diálogo minimizadas.
25. Selecione o ícone de caixas de diálogo minimizadas e selecione Anexos para abrir a janela de diálogo não modal novamente.  
{#add-modeless-dialog__steps_gs4_fdw_vzb}