Adicionar modal ao componente

Saiba como adicionar um modal em Construtor de IU. Um modal é uma janela que aparece quando você clica em um componente. Por exemplo, um modal pode ser exibido quando um componente do botão de exclusão é clicado, solicitando que o usuário confirme a exclusão de um registro.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Um modal é uma tela que aparece quando um manipulador de eventos é acionado por um evento, como um botão que está sendo clicado. O procedimento a seguir mostra um exemplo de como adicionar um modal Confirmar e um manipulador de eventos associado a um componente de botão.

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 > 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 página ou 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. Adicione um modal à página.
   1. Selecione o ícone + na árvore de conteúdo ao lado de Modais e popovers.
      
   2. Escolha um tipo de modal, como Confirmar.
      

      Tipo de modal	Descrição
      Alerta	Um modal de alerta fornece informações relacionadas à ação do componente. Por exemplo, quando um usuário pressiona um botão de exclusão, você pode ter um pop-up de alerta que permite que o usuário saiba que não pode desfazer uma ação de exclusão.
      Confirmar	Um modal Confirmar solicita que um usuário confirme a ação do componente. Por exemplo, quando um usuário pressiona um botão de exclusão, ele precisa confirmar a exclusão de dados. Você pode escolher as opções de confirmação nos campos de rótulo do botão primário e secundário, como Sim/Cancelar.
      Confirmar e destruir	Um modal Confirmar e destruir é mais diretivo, geralmente relacionado à exclusão ou apagamento de conteúdo. Ele permite que o usuário saiba a seriedade de uma ação e pergunta se ele deseja prosseguir com a ação.
      Personalizado	O modal personalizado usa layouts para permitir que você projete totalmente as informações desejadas no modal. Os layouts também decidem onde as informações ficam na tela do modal. Você pode usar o estilo CSS (Folhas de estilos em cascata) para mudar a aparência visual do modal, como a cor do plano de fundo.
      iframe	Use o iFrame para trazer conteúdo para o modal usando o conteúdo do iFrame existente de uma URL e dados.
      Janela de visualização modal	Passe conteúdo dinamicamente para o modal da janela de visualização por meio de uma vinculação de evento usando um client script. Consulte Vincular um evento a um componente para obter mais informações sobre como vincular um evento a um componente.

   3. Configure os modais conforme mostrado na tabela.

      Configure cada modal de forma diferente, dependendo do que o modal requer. Mude quais informações vão para o modal, o tamanho do modal e sua aparência. Você pode adicionar um manipulador de eventos ao modal que executa a ação do modal, como abrir ou fechar o modal.

      Modal	Configuração
      Alerta	Adicione um cabeçalho, que é o título do modal. Grave o conteúdo que você deseja exibir no modal. O conteúdo informa ao usuário qual é o alerta. Adicione texto para o rótulo do botão. Pode ser o que você quiser, como OK, Sime assim por diante. Escolha o tamanho do modal na tela. Selecione Pequena, Média, Grandeou Tela cheia. Habilite ou desabilite Impedir ação do botão padrão, dependendo se você deseja que o modal seja encerrado com base na ação padrão. Habilite ou desabilite Adiar carregamento de conteúdo modal. Se você desativá-lo, o modal será carregado com a página. Se você habilitá-lo, o modal não será carregado quando a página for carregada. Selecionar Eventos > Adicionar mapeamento de evento para adicionar um manipulador de eventos ao modal. Selecione um manipulador de eventos para aplicar ao modal e selecione Adicionar para adicioná-lo à página. Escolha entre manipuladores de eventos herdados ou de nível de página. Os manipuladores de eventos executam uma ação, como abrir ou fechar um modal. Dependendo do tipo de modal, você pode atualizar os dados da fonte de dados do App Shell, a sessão do usuário para GraphQL ou uma sessão de usuário para Transformação.
      Confirmar	Adicione um cabeçalho, que é o título do modal. Grave o conteúdo que você deseja exibir no modal. O conteúdo informa ao usuário qual é o alerta. Adicione texto para o botão primário. O botão primário é o botão de ação principal para usuários, como Sim, Adicionare assim por diante. Adicione texto para o botão secundário. O botão secundário geralmente é a opção não para os usuários, como Cancelar, Nãoe assim por diante. Escolha o tamanho do modal na tela. Selecione Pequena, Média, Grandeou Tela cheia. Habilite ou desabilite Impedir ação do botão primário padrão, dependendo se você deseja que o modal seja encerrado com base na ação padrão. Habilite ou desabilite Impedir ação do botão secundário padrão, dependendo se você deseja que o modal seja fechado com base na ação padrão. Habilite ou desabilite Adiar carregamento de conteúdo modal. Se você desativá-lo, o modal será carregado com a página. Se você habilitá-lo, o modal não será carregado quando a página for carregada. Selecionar Eventos > Adicionar mapeamento de evento para adicionar um manipulador de eventos ao modal. Selecione um manipulador de eventos para aplicar ao modal. Escolha entre manipuladores de eventos herdados ou de nível de página. Os manipuladores de eventos executam uma ação, como abrir ou fechar um modal. Dependendo do tipo de modal, você pode atualizar os dados da fonte de dados do App Shell, a sessão do usuário para GraphQL ou uma sessão de usuário para Transformação.
      Confirmar ou destruir	Adicione um cabeçalho, que é o título do modal. Grave o conteúdo que você deseja exibir no modal. O conteúdo informa ao usuário qual é o alerta. Adicione texto para o botão primário. Primário é o botão de ação principal para usuários, como Excluir ou Apagar. Adicione texto para o botão secundário. O botão secundário geralmente é a opção não para os usuários, como Cancelar, Nãoe assim por diante. Escolha o tamanho do modal na tela. Selecione Pequena, Média, Grandeou Tela cheia. Habilite ou desabilite Impedir ação do botão primário padrão, dependendo se você deseja que o modal seja encerrado com base na ação padrão. Habilite ou desabilite Impedir ação do botão secundário padrão, dependendo se você deseja que o modal seja fechado com base na ação padrão. Habilite ou desabilite Adiar carregamento de conteúdo modal. Se você desativá-lo, o modal será carregado com a página. Se você habilitá-lo, o modal não será carregado quando a página for carregada. Selecionar Eventos > Adicionar mapeamento de evento para adicionar um manipulador de eventos ao modal. Selecione um manipulador de eventos para aplicar ao modal. Escolha entre manipuladores de eventos herdados ou de nível de página. Os manipuladores de eventos executam uma ação, como abrir ou fechar um modal. Dependendo do tipo de modal, você pode atualizar os dados da fonte de dados do App Shell, a sessão do usuário para GraphQL ou uma sessão de usuário para Transformação.
      Personalizado	Escolha um layout para o modal. Você pode usar um layout de grade flexbox ou CSS. Esses layouts permitem que você adicione conteúdo ao modal como quiser. Use opções de estilo para mudar a aparência do modal. Você pode aplicar qualquer estilo CSS padrão ao seu modal, como cor de fundo e preenchimento. Para obter mais informações sobre estilo, consulte Alterar a aparência padrão dos componentes. Adicione componentes aos contêineres no modal personalizado. Selecionar Eventos > Adicionar mapeamento de evento para adicionar um manipulador de eventos ao modal. Selecione um manipulador de eventos para aplicar ao modal. Escolha entre manipuladores de eventos herdados ou de nível de página. Os manipuladores de eventos executam uma ação, como abrir ou fechar um modal. Dependendo do tipo de modal, você pode atualizar os dados da fonte de dados do App Shell, a sessão do usuário para GraphQL ou uma sessão de usuário para Transformação.
      iframe	Adicione um cabeçalho, que é o título do modal. Adicione um URL de origem que aponte para o conteúdo do iFrame existente. Defina os parâmetros e os dados iniciais que você deseja iframe. Escolha o tamanho do modal na tela. Selecione Pequena, Média, Grandeou Tela cheia. Ative a desativação da área restrita para suspender as seguintes restrições: opções allow-forms, allow-modals, allow-popups, allow-presentation, allow-same-origin, allow-scripts e allow-downloads. Desative a área restrita de desabilitação para suspender somente a opção allow-scripts. Habilite ou desabilite Adiar carregamento de conteúdo modal. Se você desativá-lo, o modal será carregado com a página. Se você habilitá-lo, o modal não será carregado quando a página for carregada. Selecionar Eventos > Adicionar mapeamento de evento para adicionar um manipulador de eventos ao modal. Selecione um manipulador de eventos para aplicar ao modal. Escolha entre manipuladores de eventos herdados ou de nível de página. Os manipuladores de eventos executam uma ação, como abrir ou fechar um modal. Dependendo do tipo de modal, você pode atualizar os dados da fonte de dados do App Shell, a sessão do usuário para GraphQL ou uma sessão de usuário para Transformação.
      Janela de visualização modal	Escolha o tamanho do modal na tela. Selecione Pequena, Média, Grandeou Tela cheia. Habilite ou desabilite Ocultar Preenchimento. Habilite ou desabilite Ocultar botão Fechar. Se você habilitá-lo, o botão Fechar não será exibido no modal. Habilite ou desabilite Adiar carregamento de conteúdo modal. Se você desativá-lo, o modal será carregado com a página. Se você habilitá-lo, o modal não será carregado quando a página for carregada. Selecionar Eventos > Adicionar mapeamento de evento para adicionar um manipulador de eventos ao modal. Selecione um manipulador de eventos para aplicar ao modal. Escolha entre manipuladores de eventos herdados ou de nível de página. Os manipuladores de eventos executam uma ação, como abrir ou fechar um modal. Dependendo do tipo de modal, você pode atualizar os dados da fonte de dados do App Shell, a sessão do usuário para GraphQL ou uma sessão de usuário para Transformação. Selecione o componente da janela de exibição na janela de exibição modal. Selecione + Adicionar na guia Configurar para adicionar uma coleção de páginas à janela de visualização. Selecione uma coleção de páginas na lista e clique em Adicionar.

5. Adicione um componente à sua página para acionar o modal que você acabou de adicionar, como um componente de botão.
   Para obter mais informações, consulte Adicionar e configurar componentes.
6. Selecione a guia Eventos no painel de configuração.
7. Selecione + Adicionar manipulador de eventos.
   
8. Selecione Abrir ou fechar caixa de diálogo modal.
9. Selecione o modal que você criou nas etapas anteriores usando o menu suspenso Modal.
10. Clique em Adicionar.
    
11. Quando terminar de configurar o modal, feche-o.

    Observe na árvore de conteúdo que os modais criados ficam acima do corpo da estrutura da página.

    
12. Clique em Salvar.