--- sourceDocument: Criar ou modificar aplicações do Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development Release : - xanadu ft:locale : - pt-BR ft:publication_title : - Criar ou modificar aplicações do Xanadu ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- # Vincular um evento a um componente # Vincular um evento a um componente {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura 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 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 adicionado 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é TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Para obter mais informações, consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém."). 3. Crie ou abra uma 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](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). 4. Adicione um componente que tenha eventos aos quais ele pode se 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](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando 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)](https://servicenow-prod.fluidtopics.net/DGcmaC3dw6Q7Mii9xIi4fw "Aprenda a trabalhar com eventos para que você possa adicionar ações a componentes, páginas, recursos de dados e ações declarativas em Construtor de IU."). 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 executa. {#bind-event-component__substeps_v3n_xw3_znb} 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 se deseja excluir o registro. Para obter mais informações, consulte [Adicionar modal ao componente](https://servicenow-prod.fluidtopics.net/6c1LSU4dC0NblPuJG358Cw "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."). 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 está acima do corpo da estrutura da página na árvore de conteúdo. {#bind-event-component__substeps_fhn_l3b_snb} 7. Vincule um evento a um componente de botão. Você vincula um evento ao botão para ativar o gatilho de uma ação. Selecione o componente do 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 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 de 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. Marque a caixa de seleção 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. {#bind-event-component__substeps_mrb_rrf_zzb} 8. Clique em Salvar. 9. Teste o modal selecionando Visualizar. 10. Para acionar o modal que você criou, clique no botão na página.