Adicione 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 Excluir é 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é Tudo > 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 página ou 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. Adicione um modal à página.
   1. Selecione E 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, o usuário precisa confirmar a exclusão de dados. Você pode escolher as opções Confirmar 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 diretiva, geralmente relacionada a excluir ou apagar conteúdo. Ele permite que o usuário saiba a gravidade 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 de Folhas de estilo 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 modal usando o conteúdo iframe existente de um URL e dados.
      Viewport modal	Passe dinamicamente o conteúdo para o modal da janela de visualização por meio de uma vinculação de evento usando um script de cliente. Consulte Vincular um evento a um componentepara 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 as informações que entram no modal, o tamanho do modal e a aparência dele. 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	Adicionar r cabeçalho , que é o título do modal. Escreva 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 , Sim , e assim por diante. Escolha o tamanho do modal na tela. Selecione Pequeno , Médio , Grande , ou 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 Adie o carregamento de conteúdo modal . Se você desabilitá-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 da 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 shell da aplicação, da sessão do usuário para GraphQL ou de uma sessão do usuário para Transformação.
      Confirmar	Adicione um cabeçalho, que é o título do modal. Escreva 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 , Adicionar , e assim por diante. Adicione texto para o botão secundário. O botão secundário geralmente é a opção sem opção para os usuários, como Cancelar , Não , e assim por diante. Escolha o tamanho do modal na tela. Selecione Pequeno , Médio , Grande , ou 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 encerrado com base na ação padrão. Habilite ou desabilite Adie o carregamento de conteúdo modal . Se você desabilitá-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 da 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 shell da aplicação, da sessão do usuário para GraphQL ou de uma sessão do usuário para Transformação.
      Confirmar ou destruir	Adicione um cabeçalho, que é o título do modal. Escreva 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. Principal é 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 sem opção para os usuários, como Cancelar , Não , e assim por diante. Escolha o tamanho do modal na tela. Selecione Pequeno , Médio , Grande , ou 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 encerrado com base na ação padrão. Habilite ou desabilite Adie o carregamento de conteúdo modal . Se você desabilitá-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 da 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 shell da aplicação, da sessão do usuário para GraphQL ou de uma sessão do usuário para Transformação.
      Personalizado	Escolha um layout para o modal. Você pode usar um layout de grade flexível ou CSS. Esses layouts permitem que você adicione conteúdo ao modal da maneira que quiser. Use opções de estilo para mudar a aparência do modal. Você pode aplicar qualquer estilo CSS padrão ao modal, como cor de fundo e preenchimento. Para obter mais informações sobre estilo, consulte Mude 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 da 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 shell da aplicação, da sessão do usuário para GraphQL ou de uma sessão do 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 Pequeno , Médio , Grande , ou Tela cheia . Ligue desabilite a área restrita para eliminar as seguintes restrições: allow-forms, allow-modais, allow-pop-ps, allow-presentation, allow-same-origin, opções allow-scripts e allow-downloads. Desligue o. desabilite a área restrita para levantar somente a opção allow-scripts. Habilite ou desabilite Adie o carregamento de conteúdo modal . Se você desabilitá-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 da 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 shell da aplicação, da sessão do usuário para GraphQL ou de uma sessão do usuário para Transformação.
      Viewport modal	Escolha o tamanho do modal na tela. Selecione Pequeno , Médio , Grande , ou 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 Adie o carregamento de conteúdo modal . Se você desabilitá-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 da 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 shell da aplicação, da sessão do usuário para GraphQL ou de uma sessão do usuário para Transformação. Selecione o componente da janela de visualização na janela de visualização modal. Selecione E 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 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 Modal menu suspenso.
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.