Adicione caixa de diálogo não modal a um Construtor de IUpágina

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ê pelo 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. Há infinitas possibilidades. Adicione e configure caixas de diálogo não modais para atender às suas necessidades de negócios.

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 IUpara 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 no Construtor de IU, consulte Crie 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 de mais e selecione Caixa de diálogo não modal componente.
   
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 Padrão de caixa de diálogo não modal na árvore de conteúdo.
6. No painel de configuração Configurar , exiba as predefinições que foram adicionadas automaticamente com a caixa de diálogo não modal, por exemplo, largura, altura, posição, e habilite 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 sem modelagem, consulte Site do desenvolvedor da ServiceNow .
7. Na gaveta de recursos de dados, o. Caixa de diálogo não modal o controlador foi adicionado automaticamente.
   
8. Na árvore de conteúdo, selecione - Adicionar conteúdo em Padrão de 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 Texto estilizado componente.
10. Em Texto estilizado painel de configuração, selecione Nenhum para configurar o componente manualmente.
    

    . Subtítulo do registro a predefinição foi adicionada automaticamente, selecione a seta suspensa e selecione Nenhum e selecione Remover em Configurar .

    
11. Se ainda não estiver aberto, selecione Configurar para abrir a guia de configuração.
12. Em Texto , remova o texto e o tipo de amostra Adicione anexos .
    
13. Selecione Salvar No cabeçalho do Construtor de IU.
14. Na árvore de conteúdo, selecione - Adicionar conteúdo em Padrão de caixa de diálogo não modal > Conteúdo > Contêiner para adicionar conteúdo ao corpo da caixa de diálogo não modal.
15. Selecione Anexos componente.
16. Em Anexos painel de configuração, se ainda não estiver selecionado, selecione Registros de anexos e. Aplicar para configurar o componente com uma predefinição.
    

    Para obter mais informações sobre como configurar o componente Anexos, consulte 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 Save (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 de Corpo da estrutura da sua página. . Menu suspenso de caixas de diálogo minimizadas o componente é adicionado à página automaticamente (e está listado em Corpo na árvore de conteúdo) para fornecer a funcionalidade para o ícone 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 Menu ícone ao lado de Corpo e selecione Adicione conteúdo .
    2. Em Layouts , selecione Coluna única .
       Um novo layout de coluna que contém uma única coluna é adicionado à parte inferior da página.
    3. Na fase, selecione o ícone de mais no novo layout de coluna.
       
    4. PESQUISE e selecione Botão vazio componente.
       
    5. No painel de configuração, no Configurar , selecione Nenhum para configurar o componente manualmente.
    6. Selecione Eventos no painel de configuração.
    7. Selecione - Adicionar manipulador de eventos .
       
    8. Na lista à esquerda, selecione Abrir caixa de diálogo sem modelo (talvez seja necessário rolar para baixo na lista).
    9. Tipo Anexos em Título minimizado .
    10. Selecione 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 Configurar .
    13. Tipo Adicione anexos em Rótulo .
        
21. Selecione Save (Salvar).
22. Selecione a seta suspensa ao lado de Visualização em Construtor de IUe selecione Abrir caminho do URL na lista.
23. Selecione Adicione anexos botão 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 cabeçalho na parte superior e o componente Anexos abaixo.
24. Para testar a funcionalidade minimizar, selecione o ícone 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 de 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.