--- 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 --- # Gerenciar ações nas páginas do Construtor de IU (recurso avançado) # Gerenciar ações nas páginas do Construtor de IU (recurso avançado) {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 9 min. de leitura 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. ## Ações em Construtor de IU {#work-events__section_qk3_tz4_xyb} As ações de IU informam a Construtor de IU o que fazer quando um [evento](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-event-ui-builder "Ação que um usuário realiza (como selecionar um botão) ou uma ocorrência que acontece em uma página. A maioria dos componentes, páginas e recursos de dados do Construtor de IU tem eventos associados por padrão. Use manipuladores de eventos com os eventos para adicionar ações adicionais às páginas.") é acionado. Um evento é uma ação que um usuário realiza ou uma ocorrência que acontece em uma [página](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-page-ui-builder "Coleção de layouts de coluna, colunas e componentes. Crie ou personalize várias páginas do Construtor de IU para experiências de espaço e portal."). Use ações de IU para criar interfaces interativas e amigáveis que ajudam os usuários a concluir tarefas. Cada [componente](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-component-ui-builder "Use a biblioteca de componentes do Construtor de IU para criar páginas. Os componentes têm uma interface que um usuário final pode exibir e interagir. Os componentes podem se comunicar por meio de eventos e propriedades. Os componentes usados com frequência incluem Cabeçalho, Imagem, Lista, Formulário e Botão.") tem seus próprios eventos associados a ele. Os eventos incluem: * O usuário clica em uma visualização de dados * A página obtém dados com sucesso * O usuário seleciona um botão de opção * Carregamentos de página {#work-events__ul_uqx_bq4_xyb} ## Eventos em Construtor de IU {#work-events__section_m5n_nmy_24b} Use um evento para adicionar ações aos seus componentes, páginas e recursos de dados. * Um evento de componente é uma ação que você configura para um componente. Configure um manipulador de eventos para configurar essa ação do componente. Por exemplo, você pode adicionar um componente de botão à sua página Construtor de IU. Em seguida, você pode adicionar um manipulador de eventos para aplicar uma ação a esse botão, como ir para uma página da Web. * Os eventos de página executam ações para a página inteira. Você pode configurar os seguintes eventos de página: * Mapeamentos de eventos de página. Adicione, remova ou limpe notificações de alerta na sua página. * Mapeamentos de eventos de variante. Adicione, remova ou limpe notificações de alerta na sua variante de página. * Eventos expedidos. Crie eventos expedidos para sua página para criar mapeamentos de eventos retransmitidos que modelam eventos após um manipulador de eventos primário. Selecione um manipulador de eventos primários de destino para modelar os campos de carga após ele. * Eventos manipulados. Um evento tratado é um evento que está exposto e disponível para uso por outros usuários. Depois de criar um evento manipulado, ele fica disponível em Page event mappings para outros usuários usarem. Você também pode configurar campos de carga criados manualmente ou escolher um modelo para o evento tratado, como abrir ou fechar uma caixa de diálogo modal. {#work-events__ul_nsx_b4y_24b} * Os eventos de recursos de dados mapeiam recursos de dados para notificar informações sobre quando os dados são obtidos. * Os eventos de uma página ou componente não fazem nada até que o evento seja mapeado para um ou mais manipuladores de eventos. {#work-events__ul_dr1_3ny_24b} ## Mapeamento de eventos no Construtor de IU {#work-events__section_ay2_4my_24b} Mapear ações para eventos como clicar em um botão ou preencher um campo. Um mapeamento de eventos é o processo que permite mapear a carga útil ou os valores contextuais de um evento para o objeto ou manipulador que atua nesse evento. Para obter mais informações sobre o mapeamento de eventos, consulte [Definir eventos de mapa](https://servicenow-prod.fluidtopics.net/XxMjcqhzjLbRU9P1W3TxqQ "Um mapeamento de evento em Construtor de IU é o processo que permite mapear a carga útil ou os valores contextuais de um evento para o objeto ou manipulador que atua nesse evento. Os quatro tipos de evento são: componente, página, recurso de dados e ação declarativa."). ## Manipuladores de eventos no Construtor de IU {#work-events__section_fmg_ffb_snb} Um manipulador de eventos é uma ação realizada quando ocorre um evento. Ao mapear um manipulador de eventos para um evento, você especifica qual ação ou ações serão executadas quando o evento ocorrer. Use um manipulador de eventos para configurar uma ação para a página Construtor de IU ou os componentes da página. Por exemplo: * Clicar em uma visualização de dados abre uma lista de registros representados na visualização * A busca de dados com sucesso para uma lista abre um alerta que indica que a busca de dados foi bem-sucedida * Selecionar um botão de opção ajusta o filtro de uma lista na página * Carregar uma página abre um modal para confirmar a aceitação de cookies antes de prosseguir {#work-events__ul_uql_4hb_1zb} Ao adicionar um manipulador de eventos a uma página ou componente Construtor de IU, você pode escolher diferentes tipos de manipuladores de eventos. Por exemplo, um componente de botão pode ter os seguintes tipos de manipuladores de eventos: * Manipuladores de eventos herdados. Um manipulador de eventos herdado é exposto na página em que você está trabalhando. Se você estiver na página primária Construtor de IU, um manipulador de eventos herdado poderá ser exposto do shell da aplicação. A tabela a seguir lista os diferentes tipos de manipuladores de eventos herdados que você pode usar e o que pode fazer com eles.{#work-events__table_uwz_1py_24b__entry__2} | Manipulador de eventos | Descrição | |-|-| | URL de trilhas alterado | | | Link para o destino | Navegue até um destino. * Rotas da aplicação: link para outra página em uma aplicação, como uma tela inicial. * URL externo: link para um site ou qualquer URL externo. {#work-events__ul_gj4_3py_24b} Script de exemplo return { route: null, /* Page route, e.g. 'record' */ fields: null, /* Required params, e.g. {"table":"incident","sysId":"X"} */ params: null, /* Optional params, e.g. {"selectedIndex" : 1} */ ☑️redirect: null, /* ??? True/false? */ ☑️passiveNavigation: null, /* Load in background, e.g. 'false' */ title: null, multiInstField: null, ☑️targetRoute: null, /* ??? */ ☑️external: null /* ??? True/false? */ }; | | Adicionar parâmetros à URL | Adicione parâmetros adicionais a um URL. Script de exemplo { "selectedTabIndex" : 0 } | | Abrir ou fechar caixa de diálogo modal | Depois de criar um modal, use Open or close modal dialog para acionar o modal. | [Tabela 1. Manipuladores de eventos herdados] {#work-events__table_uwz_1py_24b} * Manipuladores de eventos no nível da página. Este tipo de manipulador de eventos é comum a todas as páginas e você usaria este tipo de manipulador quando quiser adicionar ou limpar notificações de alerta no nível de página. A tabela a seguir lista os diferentes tipos de manipuladores de eventos no nível de página que você pode usar e o que pode fazer com eles.{#work-events__table_xdx_dqy_24b__entry__2} | Manipulador de eventos | Descrição | |-|-| | Adicionar notificações de alerta | Adicione um snippet de código para enviar uma notificação de alerta. Por exemplo: return { items: [{"type" : "info", "message" : "Info message", "id" : "optionalID"}] /* Types: info, warning, error */ }; | | Remover notificação de alerta | Adicione código para chamar IDs de notificação de alerta que você deseja descartar. Por exemplo, clique em um botão para remover uma notificação de alerta de carregamento de página. | | Limpar notificação de alerta | Adicione código para chamar todos os IDs de notificação de alerta que você deseja descartar. Por exemplo, clique em um botão para remover todas as notificações de alerta. | | Definir estado de carregamento | Ative ou desative o carregamento. Por exemplo, você pode ativar o carregamento para carregar a página ao clicar em um botão ou desativar o carregamento para não carregar a página quando um botão for clicado. | | Atualizar parâmetro de estado do cliente | Defina declarativamente o parâmetro de estado do cliente. Digamos que você tenha um parâmetro de estado do cliente configurado com um valor. Você pode configurar o manipulador de eventos Update client state parameter para atualizar o parâmetro de estado do cliente com um novo valor. Por exemplo, você tem um parâmetro de estado do cliente chamado Saudação que está configurado com Olá como o valor inicial. Você pode adicionar um manipulador de eventos Update client state parameter, selecionar o parâmetro de estado do cliente Saudação e inserir um novo valor como Adeus. Quando você clica no botão, Adeus substitui Olá na página. | | Carregamento da janela de visualização do macroponent de UXF solicitado | Adicione a um componente, como um componente de botão, para abrir uma janela de visualização. Para obter mais informações, consulte [Adicionar um componente de janela de visualização à sua página](https://servicenow-prod.fluidtopics.net/ADVmQlucxHltxuwwWbqKfg "Adicione um componente de janela de visualização à sua página e crie uma subpágina para criar conteúdo separado na página."). | [Tabela 2. Manipuladores de eventos no nível da página] {#work-events__table_xdx_dqy_24b} * Manipuladores de recursos de dados. Este tipo de manipulador de eventos aciona a busca ou a gravação de dados no servidor. Você pode atualizar os dados da fonte de dados do shell do app na página Construtor de IU clicando em um botão. Por exemplo, com um manipulador de recursos de dados, você pode realizar as seguintes ações: * Vincule dados à descrição de um registro de incidente. * Altere o valor da descrição do incidente. * Adicione um componente de botão à sua página. * Rotule o botão como Atualizar incidente. * Adicione um manipulador de eventos Look Up Record para o botão. * Salve sua página. * Se a descrição do registro do incidente mudar, clique em Atualizar para atualizar a descrição na página. {#work-events__ul_cvj_jxy_24b} * Scripts de cliente. Scripts que são executados quando um evento é acionado em um componente. Você cria esses scripts na seção Client scripts em Construtor de IU. Para obter mais informações, consulte [Como definir e vincular client scripts aos componentes](https://servicenow-prod.fluidtopics.net/JgCSspyz89wEmcHxvB2EeA "Adicione e edite client scripts em Construtor de IU para que você possa atualizar o estado do cliente por meio de eventos. Você pode vincular esses scripts a qualquer componente usando um manipulador de eventos."). {#work-events__ul_wzp_qdc_snb} ## Vinculando eventos a componentes no Construtor de IU {#work-events__section_qll_2fb_snb} Vincule manipuladores de eventos aos eventos em um componente. Quando você adiciona componentes à página Construtor de IU, esses componentes não são configurados para executar nenhuma ação na página. Por exemplo, um componente de botão é estático e não faz nada até que você vincule uma ação de evento a ele, como a exclusão de um registro. Alguns componentes têm vários eventos aos quais os manipuladores de eventos podem ser atribuídos. Por exemplo, no componente de lista, você pode atribuir um manipulador de navegação ao evento Row clicked. Você também pode atribuir um modal aberto ao evento Data fetch failed. Para obter mais informações, consulte [Vincular um evento a um componente](https://servicenow-prod.fluidtopics.net/_zqpwUAxTRqOEfz8zdJbJA "Vincule elementos de dados em Construtor de IU para que você possa adicionar ações de evento aos seus componentes."). ## Vinculando eventos a páginas do Construtor de IU {#work-events__section_upz_rfd_snb} Vincule um evento de nível de página para executar manipuladores de eventos na página. Por exemplo, use eventos no nível de página para notificações de página, carregamento de página ou quando uma propriedade de página for alterada. A atribuição do manipulador de eventos ao evento no nível de página é semelhante à atribuição de manipuladores a eventos de componentes. Você pode vincular mapeamentos de eventos usando os seguintes métodos: * Mapeamentos de eventos de página. Adicione, remova ou limpe notificações de alerta na sua página. * Mapeamentos de eventos de variante. Adicione, remova ou limpe notificações de alerta na sua variante de página. * Eventos expedidos. Crie eventos expedidos para sua página para criar mapeamentos de eventos retransmitidos que modelam eventos após um manipulador de eventos primário. Selecione um manipulador de eventos primários de destino para modelar os campos de carga após ele. * Eventos manipulados. Adicione um evento manipulado para um evento que está exposto e disponível para uso por outros usuários. {#work-events__ul_sfg_njg_14b} Para obter mais informações, consulte [Vincular um evento a uma página](https://servicenow-prod.fluidtopics.net/IYycDai~ESS7ENCXryfcvg "Use mapeamentos de eventos de página para vincular elementos de dados em Construtor de IU para que você possa adicionar ações de evento à sua página."). ## Vinculando eventos a recursos de dados no Construtor de IU {#work-events__section_ztd_sfd_snb} Vincule manipuladores de eventos a recursos de dados individuais na página Construtor de IU. Por exemplo, quando um recurso de dados obtém novos dados com sucesso, ele executa um manipulador de eventos, como navegação, para levar um usuário para a próxima etapa em um fluxo. Quando um recurso de dados adiciona com sucesso um registro a uma tabela, ele mostra um modal de sucesso que usa o manipulador de eventos modal show. Para obter mais informações, consulte [Vincular um evento a um recurso de dados](https://servicenow-prod.fluidtopics.net/a_Kf1J69VtZsl~bSZBg_TA "Atribua manipuladores de eventos em Construtor de IU a recursos de dados individuais em sua página. Quando um recurso de dados obtém novos dados com sucesso, ele executa um manipulador de eventos para levar um usuário para a próxima etapa em um fluxo."). ## Vinculando eventos a ações declarativas no Construtor de IU {#work-events__section_vm2_sfd_snb} Vincule elementos de dados para adicionar ações de evento a uma definição de ação declarativa em Ações e componentes no Now Platform®. Por exemplo, você pode vincular um elemento de dados para adicionar uma ação de evento para concluir o trabalho em uma tabela. Se você adicionar um componente à sua página Construtor de IU que tem uma ação declarativa, deverá vinculá-lo a um evento manipulado. O evento manipulado cria uma ação que é executada quando um usuário seleciona o componente. Ao selecionar Configurar mapeamento de eventos de ação declarativa, você adiciona um novo manipulador de eventos para definir o que a ação declarativa faz na página. Para obter mais informações, consulte [Vincular um evento a uma ação declarativa](https://servicenow-prod.fluidtopics.net/ASNzD8PcwJYAXAOAs8dz4Q "Vincule elementos de dados em Construtor de IU para que você possa adicionar ações de evento a uma ação declarativa."). * **[Definir eventos de mapa](https://servicenow-prod.fluidtopics.net/XxMjcqhzjLbRU9P1W3TxqQ)** Um mapeamento de evento em Construtor de IU é o processo que permite mapear a carga útil ou os valores contextuais de um evento para o objeto ou manipulador que atua nesse evento. Os quatro tipos de evento são: componente, página, recurso de dados e ação declarativa. * **[Configurar um manipulador de eventos](https://servicenow-prod.fluidtopics.net/W6IUvQAaj5EaaZGbDefZsQ)** Adicione um manipulador de eventos a uma página, componente, recurso de dados ou ação declarativa em Construtor de IU para que o usuário possa acionar uma ação. * **[Vincular eventos para adicionar ações](https://servicenow-prod.fluidtopics.net/OWFVZJIvnR7GiIolxWRaHQ)** Depois de criar eventos, você pode vinculá-los a ações em seus componentes, páginas, recursos de dados e ações declarativas. * **[Desabilitar mapeamentos de evento de predefinição de componente](https://servicenow-prod.fluidtopics.net/AOcVzDJD626fyocXG46HIw)** Você pode desabilitar mapeamentos de eventos que são criados automaticamente por uma predefinição de componente. * **[Excluir um manipulador de eventos](https://servicenow-prod.fluidtopics.net/YBQnfy4Lbq3MvHmw3U9Zzg)** Exclua um manipulador de eventos de que você não precisa mais em Construtor de IU. * **[Excluir um mapeamento de evento](https://servicenow-prod.fluidtopics.net/VRTjqs7Yh9DUe23eYvSLfw)** Exclua um mapeamento de evento de que você não precisa mais em Construtor de IU.