Adicionar caixa de diálogo não modal a uma página Construtor de IU

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é Tudo > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU 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.
4. Na árvore de conteúdo, mova o mouse para Caixas de diálogo nã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.
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 Adicionar anexos.
    
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.

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 Save (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.
       
    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 anexos 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 Adicionar anexos no rótulo.
        
21. Selecione Save (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.
    
    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.