---
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 outra página

# Vincular um evento a outra página {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 min. de leitura

Adicione um link ao manipulador de eventos de destino em Construtor de IU para que uma ação de evento possa abrir outra página. Você também pode configurar o manipulador de eventos para seguir a rota da aplicação para a página desejada.

## Antes de Iniciar

Você deve ter uma página do espaço que contém um componente que deve abrir outra página quando um usuário clicar nela. A visão geral do painel é um exemplo desse componente. Componentes como Link para o destino não são compatíveis com o link para o manipulador de eventos de destino. A propriedade de link do componente tem prioridade sobre o link para o manipulador de eventos de destino.

Função necessária: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Para configurar uma ação de evento para abrir outra página, você deve saber qual página deseja abrir, quais são os parâmetros obrigatórios e opcionais para essa página e quais valores de carga definir no manipulador de eventos para passar os parâmetros necessários para a página de destino .  
Dica:  
Você pode encontrar exemplos dos componentes que deseja vincular e das páginas de destino às quais deseja vincular na Experiência do Espaço do agente de base. Este Next Experience é fornecido no sistema base. Se você criar uma página a partir de um modelo de página, deverá copiar somente o conteúdo do modelo. Não faça referência a ele. Para obter mais informações sobre a diferença entre copiar e fazer referência a um modelo de página, consulte [Criar uma página a partir de modelo](https://servicenow-prod.fluidtopics.net/ZZR7QsMHgfbVYvpxDuuhaA "Use um modelo para criar uma página com base em um modelo de página predefinido. Um modelo de página pode ajudar a criar páginas mais rapidamente e manter as páginas consistentes em uma experiência. Os modelos de página podem incluir componentes, recursos de dados e um layout.").

## Procedimento

1. Abra sua experiência em Construtor de IU.
2. **Opcional:** Se a página de destino não existir na sua experiência, crie uma.  
   Para obter informações sobre como criar páginas, consulte [Criar 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."). Certifique-se de definir os parâmetros obrigatórios e opcionais para a página para que possa usá-la como destino. Se um componente específico na página for um destino, você deverá incluir esse componente. Você também deve configurar as propriedades no componente para consumir os parâmetros da página com `@context.props.` \<parameter-name\> valores.

   Você pode criar a página a partir de um modelo de página. A Experiência do Espaço do agente de base tem vários modelos de página que já estão configurados para serem destinos de outros componentes. Se você criar uma página de destino a partir de um modelo, os componentes já estarão configurados com as propriedades corretas. Todos os parâmetros de estado ou client scripts necessários também são copiados. Você precisa adicionar os parâmetros da página. Você pode copiar esses parâmetros da lista relacionada Rotas do app de UX no registro de configuração do app Agent \[sys_ux_app_config\] da experiência que contém os modelos de página.

   Para garantir que as páginas que você está criando funcionem de forma confiável como destinos em sua experiência, sua experiência deve ter a mesma IU de shell do app que a experiência com os modelos de página.
3. Alterne para a página que você deseja vincular à página de destino.
4. Navegue até o componente relevante e selecione-o.
5. Selecione a guia Eventos.
6. Selecione + Adicionar mapeamento de evento.
7. Selecione o evento que você deseja usar.
8. Selecione + Adicionar manipulador de eventos.  
9. Na seção Manipuladores de eventos herdados, selecione Vincular ao destino.  
10. Clique em Selecionar destino.  
11. Expanda Páginas e selecione a página na experiência à qual você deseja vincular.  
    Os campos aparecem para cada um dos parâmetros na página de destino à qual a rota leva. Os parâmetros obrigatórios estão marcados com um asterisco (\*).
12. Preencha cada campo de parâmetro obrigatório e os campos de parâmetro aplicáveis com um valor `@payload.*` apropriado.  
    Se os desenvolvedores do seu componente incluíram valores de carga padrão no evento, você pode selecionar um por meio do preenchimento automático. Conforme mostrado no exemplo a seguir, o valor da carga útil pode não corresponder ao nome do parâmetro.

    Nota:  
    Você tem a opção de vincular a uma URL externa em vez de especificar uma rota de aplicação.

    Se nenhum valor padrão for fornecido ou você não puder determinar quais valores estão corretos para alguns campos, consulte a configuração e a documentação da API do componente em [Site do desenvolvedor ServiceNow®](https://developer.servicenow.com/). Se você ainda não conseguir encontrar os valores `@payload.*` necessários, entre em contato com Suporte e atendimento ao cliente.  
    Dica:  
    Se você criar seu componente de vinculação criando uma página a partir de um modelo de página do Espaço do agente de base, o componente conterá manipuladores de eventos de Retransmissão de Link para destino. Esses manipuladores de eventos não funcionam. No entanto, eles contêm os valores `@payload.*` aplicáveis para os parâmetros.

## Configuração dos manipuladores de eventos para um componente de perguntas e respostas de análise {#link-component-destination__example_t33_2vz_1pb}

Digamos que você queira usar um novo Next Experience e adicionar uma página com um componente de perguntas e respostas de análise. Primeiro, você cria a página a partir do modelo de página do Centro de análise fornecido na experiência do Espaço do agente de base. Em seguida, você cria uma página de destino para o primeiro dos três eventos nas perguntas e respostas de análise e configura um manipulador de eventos para esse evento.

Ao navegar até Estrutura do Now ExperiencesExperiências, você verá a aplicação Test experience UX . Como ele usa a mesma IU de Shell da app Espaço do agente que o Espaço do agente de base, você pode usar os modelos de página do Espaço do agente de base.

Em seguida, selecione o painel de administração do espaço de teste, localize um registro de configuração do aplicativo de UX sem rotas ou páginas de aplicativo de UX e clique em Abrir.

Como o exemplo mostra, em Construtor de IU, você criou uma página chamada Centro de análise que se baseia no modelo de página do Centro de análise do Espaço do agente de base. Em seguida, selecione a opção para copiar somente o conteúdo do modelo de página.

Você seleciona o componente Análise Q\&A 1 e abre a guia Eventos. A partir daqui, você pode abrir o manipulador de eventos deRetransmissão de Link para o destino para o evento Visualização de relatório clicado. Quando uma pergunta nas perguntas e respostas de análise retorna um relatório, você pode acionar este evento clicando em um valor no relatório. Ao clicar em um valor, você também vê uma lista dos registros que contribuem para esse valor. No campo Rota, você vê que o destino deve ser uma página baseada no modelo de página de lista simples. Você também vê os parâmetros da página aos quais os valores `@payload.*` correspondem e que o campo Título pode ser preenchido com `@payload.listTitle`.  
{#link-component-destination__table_w4f_221_bpb__entry__2}

| Parâmetro | Valor @payload.\* |
|-|-|
| tabela (obrigatório) | @carga.tabela |
| listTitle | @payload.listTitle |
| consulta | @carga.consulta |
| disableInlineEditing | nenhum |
[Tabela 1. Parâmetros da página de destino da lista simples sugerida e cargas correspondentes]

{#link-component-destination__table_w4f_221_bpb}

Em seguida, navegue até MenuCriar página e crie uma página baseada no modelo de lista simples. Digamos que você nomeie a página como Lista de registros. Em seguida, você segue um processo semelhante ao de quando criou a página do Centro de análise. Desta vez, nas últimas etapas do processo, você adicionaria `table` como um parâmetro obrigatório e `listTitle`, `query`e `disableInlineEditing` como parâmetros opcionais.

Como esta página já contém um componente de lista, ao abrir a guia Configuração deste componente, você verá que os parâmetros já foram passados nos valores `@context.props.*`.

Agora, você retorna à página do Centro de análise. No evento Visualização de relatório clicado, você adiciona um novo manipulador de eventos. Em seguida, selecione a página da lista de Registros que você criou e adicione os valores `@payload.*` nos campos tabela, listTitlee consulta, seguindo as informações obtidas do manipulador de eventos de Retransmissão de Link para o destino. A digitação preditiva ajuda a preencher esses campos.

Depois de clicar em OK e adicionar `@payload.listTitle` como Título, o manipulador de eventos será concluído. Agora você pode excluir o manipulador de eventos deRetransmissão de Link para destino para este evento.

O exemplo a seguir mostra uma página do Centro de análise. Nesta página, você pode inserir uma consulta de incidentes por prioridade e obter um relatório como resultado. Além disso, ao clicar em uma coluna, você aciona um evento de Visualização de relatório clicado. O manipulador de eventos permite que você veja uma lista simples dos incidentes no relatório.  
Figura 1. Como acionar o evento de Visualização de relatório clicado configurado