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ócios.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
   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 Criar uma página no Construtor de IU.
4. Na árvore de conteúdo, mova o mouse até Caixas de diálogonão modais , selecione o ícone + e selecione o componente Caixa de diálogo não modal.
   
5. Se a caixa de diálogo não modal não aparecer automaticamente na fase, selecione a nova caixa de diálogo não modal chamada Padrão de caixa de diálogo não modal 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 habilitaçã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 do desenvolvedor 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 componente em Padrão da caixa de diálogo não modal > ações para adicionar conteúdo ao cabeçalho da caixa de diálogo não modal.
9. Pesquise e selecione o componente Texto estilizado.
10. No painel Configuração de texto estilizado, selecione Nenhum para configurar o componente manualmente.
    

    Se a predefinição de subtítulo do 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 amostra e digite Adicionar anexos.
    
13. Selecione Salvar no cabeçalho do Construtor de IU.
14. Na árvore de conteúdo, selecione + Adicionar componente 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 de configuração 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 desenvolvedor da ServiceNow.

17. Você pode adicionar conteúdo ao rodapé da caixa de diálogo não modal, mas, neste exemplo, deixe o rodapé vazio.
18. Selecione Salvar.
    Observe na árvore de conteúdo que a caixa de diálogo não modal e todos os seus componentes estã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 listado no Corpo na árvore de conteúdo) para fornecer a funcionalidade do ícone de minimização 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 Menu ao lado de Corpo e selecione Adicionar componente.
    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 básico do 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 (talvez seja necessário rolar a lista para baixo).
    9. Digite anexos no título minimizado.
    10. Selecione o padrão de 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. Digite Adicionar anexos no rótulo.
        
21. Selecione Salvar.
22. Selecione a seta suspensa ao lado de Visualização no cabeçalho Construtor de IU e selecione Abrir caminho de 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 na lista suspensa 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.