Vincular um evento a um componente

Vincular elementos de dados em Construtor de IUpara que você possa adicionar ações de evento aos seus componentes.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Cada componente tem eventos específicos aos quais ele se vincula. Por exemplo, um componente de botão tem apenas um evento clicado no botão, enquanto outros componentes podem ter vários eventos associados a eles.

Alguns componentes não têm uma ação de evento aplicada a eles. Um exemplo é o componente de cabeçalho. Muitos componentes exigem que você mapeie um evento para seu componente para que ele execute uma ação, como carregar dados.

Para adicionar ações a componentes, páginas e recursos de dados em sua página, você pode adicionar um manipulador de eventos. Um componente de botão que você adiciona a uma página é estático. Vinculando uma ação de evento ao botão, você pode vinculá-la a uma página da web.

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.
   Para obter mais informações, consulte Configure como os usuários interagem com suas aplicações no Construtor de IU.
3. Crie ou abra uma 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 componente que tenha eventos aos quais ele pode vincular à sua página, como um botão.
   Para obter mais informações sobre como adicionar componentes a uma página, consulte Adicionar e configurar componentes.
5. Para adicionar um manipulador de eventos ao seu componente, selecione Eventos .
   Para obter mais informações sobre como adicionar manipuladores de eventos ao seu componente, consulte Gerencie ações nas páginas do Construtor de IU.
   1. Para iniciar o processo de configuração de um manipulador de eventos para seu componente, clique em Adicionar evento mapeamento .
      
   2. Selecione o mapeamento de eventos que você deseja configurar na lista.
      
   3. Selecione Continuar.
   4. Na seção de visualização do manipulador de eventos, selecione um manipulador de eventos para vincular ao seu componente.
      
   5. Selecione Continuar.
   6. Configure a carga do evento.
      Cada manipulador de eventos é configurado de forma diferente, dependendo da ação do evento. Por exemplo, se você adicionar um manipulador de eventos para um componente de botão, poderá escolher o que essa ação de botão executará.
   7. Selecione Adicionar.
6. Opcional: Se você quiser que um modal apareça para seu evento, adicione o modal à página antes de vincular seu evento ao componente.
   Um modal é um pop-up de confirmação que aparece quando você clica no componente. Por exemplo, se você adicionar um componente de botão que exclui um registro, adicione um modal para solicitar que o usuário confirme que deseja excluir o registro. Para obter mais informações, consulte Adicione modal ao componente.
   1. Selecione E na árvore de conteúdo ao lado de Modais .
      
   2. Escolha um tipo de modal, como Confirmar .
      
   3. Configure o modal.
      Você pode mudar o texto no modal, os nomes dos botões no modal e o tamanho da tela do modal. Você também pode definir ações para o modal. Quando terminar de configurar o modal, feche-o. Observe que o modal que você criou fica acima do corpo da estrutura da página na árvore de conteúdo.
7. Vincule um evento a um componente de botão.
   Você vincula um evento ao botão para acionar uma ação. Selecione o componente Botão para realçá-lo novamente, na árvore de conteúdo ou na página.
   1. Selecione - Adicionar conteúdo na árvore de conteúdo.
   2. Selecione Botão componente na caixa de ferramentas.
   3. Selecione Nenhum quando solicitado a escolher uma predefinição.
   4. No painel Configuração, clique em Eventos .
   5. Selecione Adicione manipulador .
      

      O componente Botão tem apenas o evento clicado no botão associado a ele. Outros componentes podem ter mais de um evento.

   6. Selecione um manipulador que você deseja atribuir ao botão.

      Por exemplo, para adicionar um manipulador de eventos para o componente Botão, você pode vinculá-lo a outro destino e adicionar notificações de alerta. Neste exemplo, você pode escolher Abrir ou fechar caixa de diálogo modal para fazer com que o botão abra o modal que você criou anteriormente. Neste cenário de botão, selecione o manipulador de eventos da caixa de diálogo modal Confirmar e destruir que você criou anteriormente.

      

   7. Selecione Continuar.
   8. Selecione um modal no menu suspenso.
   9. Selecione Adicionar para adicionar o manipulador de eventos modal ao componente de botão.
8. Clique em Salvar.
9. Teste o modal selecionando Visualização .
10. Para acionar o modal que você criou, clique no botão na página.