Vincular um evento a um componente

Vincule elementos de dados em Construtor de IU para 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 está vinculado. Por exemplo, um componente de botão tem apenas um evento de botão clicado, 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 título. Muitos componentes exigem que você mapeie um evento para o seu componente para que ele execute uma ação, como carregar dados.

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

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.
   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 em Construtor de IU, consulte Criar uma página no Construtor de IU.
4. Adicione um componente que tenha eventos aos quais possa ser vinculado à 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 a guia Eventos.
   Para obter mais informações sobre como adicionar manipuladores de eventos ao seu componente, consulte Gerenciar ações nas páginas do Construtor de IU (recurso avançado).
   1. Para iniciar o processo de configuração de um manipulador de eventos para o seu componente, clique em + Adicionar mapeamento de evento .
      
   2. Selecione um mapeamento de evento que você deseja configurar na lista.
      
   3. Na seção Visualização do manipulador de eventos, selecione um manipulador de eventos para vincular ao seu componente.
      
   4. Configure o manipulador de eventos e clique em Adicionar quando terminar.
      Você configura cada manipulador de eventos 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á.
6. Opcional: Se você quiser que um modal apareça para o seu evento, adicione o modal à página antes de vincular o 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 Adicionar modal ao componente.
   1. Selecione o ícone + 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 do botão para destacá-lo novamente, seja na árvore de conteúdo ou na página.
   1. Selecione + Adicionar componente na árvore de conteúdo.
   2. Selecione o componente Botão na caixa de ferramentas.
   3. Selecione Nenhum quando solicitado a escolher uma predefinição.
   4. No painel Configuração, clique em Eventos.
   5. Selecione + Adicionar manipulador de eventos.
      

      O componente do botão tem somente o evento de botão clicado associado a ele. Outros componentes podem ter mais de um evento.

   6. Selecione uma ação que você deseja atribuir ao componente.

      Por exemplo, para adicionar um manipulador de eventos para o componente do 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. Ative o seletor Abrir caixa de diálogo modal para que o modal seja aberto quando um usuário clicar no componente do botão.
   8. Para adicionar o manipulador de eventos modal ao seu componente, clique em Adicionar.
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.