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 de confirmação 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.
   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. 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 informa ao usuário 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 dos dados. Você pode escolher as opções de confirmação nos campos de rótulo de 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 exclusão 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 modal. Você pode usar o estilo Folhas de estilos em cascata (CSS) para mudar a aparência visual do modal, como a cor de fundo.
      iFrame	Use o iframe para trazer conteúdo para o seu modal usando o conteúdo do iframe existente de um 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 para o modal, como abrir ou fechar o modal.

      Modal	Configuração
      Alerta	Adicione a 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 inteira. Habilite ou desabilite Impedir ação de botão padrão, dependendo se você deseja que o modal seja fechado com base na ação padrão. Habilite ou desabilite Adiar o 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 no 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, da sessão do usuário para GraphQL ou de uma sessão de usuário para Transformar.
      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 os usuários, como Sim, Adicionare assim por diante. Adicione texto para o botão secundário. O botão secundário geralmente não é uma opçã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 inteira. Habilite ou desabilite Impedir ação de botão primário padrão, dependendo se você deseja que o modal seja fechado com base na ação padrão. Habilite ou desabilite Impedir ação de botão secundário padrão, dependendo se você deseja que o modal seja encerrado com base na ação padrão. Habilite ou desabilite Adiar o 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 no 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, da sessão do usuário para GraphQL ou de uma sessão de usuário para Transformar.
      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 não é uma opçã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 inteira. Habilite ou desabilite Impedir ação de botão primário padrão, dependendo se você deseja que o modal seja fechado com base na ação padrão. Habilite ou desabilite Impedir ação de botão secundário padrão, dependendo se você deseja que o modal seja encerrado com base na ação padrão. Habilite ou desabilite Adiar o 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 no 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, da sessão do usuário para GraphQL ou de uma sessão de usuário para Transformar.
      Personalizado	Escolha um layout para o seu modal. Você pode usar um layout de grade flexível ou CSS. Esses layouts permitem adicionar conteúdo ao seu modal como você quiser. Use opções de estilo para mudar a aparência do seu 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 no 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, da sessão do usuário para GraphQL ou de uma sessão de usuário para Transformar.
      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 inteira. Ative desabilitar a área restrita para retirar as seguintes restrições: allow-forms, allow-modals, allow-popups, allow-presentation, allow-same-origin, allow-scripts e allow-downloads. Desative a área restrita desabilitada para retirar somente a opção allow-scripts. Habilite ou desabilite Adiar o 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 no 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, da sessão do usuário para GraphQL ou de uma sessão de usuário para Transformar.
      Janela de visualização modal	Escolha o tamanho do modal na tela. Selecione Pequena, Média, Grandeou Tela inteira. Habilite ou desabilite Ocultar preenchimento. Habilitar ou desabilitar Ocultar botão Fechar. Se você habilitá-lo, o botão fechar não será exibido no modal. Habilite ou desabilite Adiar o 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 no 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, da sessão do usuário para GraphQL ou de uma sessão de usuário para Transformar. 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.