Gerenciar ações nas páginas do Construtor de IU

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 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

    As ações de IU informam Construtor de IU a o que fazer quando um evento é acionado. Um evento é uma ação que um usuário realiza ou uma ocorrência que acontece em uma página. Use ações de IU para criar interfaces interativas e amigáveis que ajudam os usuários a concluir tarefas. Cada componente 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

    Tipos de eventos que podem ativar o gatilho de ações.

    Eventos em Construtor de IU

    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.
    • 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.

    Progressão de eventos para diferentes tipos de eventos.

    Mapeamento de eventos no Construtor de IU

    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.

    Manipuladores de eventos no Construtor de IU

    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

    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.
      Tabela 1. Manipuladores de eventos herdados
      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.
      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.
    • 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.
      Tabela 2. Manipuladores de eventos no nível da página
      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.
    • 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.
    • 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.

    Vinculando eventos a componentes no Construtor de IU

    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.

    Vinculando eventos a páginas do Construtor de IU

    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.
    Para obter mais informações, consulte Vincular um evento a uma página.

    Vinculando eventos a recursos de dados no Construtor de IU

    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.

    Vinculando eventos a ações declarativas no Construtor de IU

    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.

    Configure a opção de mapeamentos de eventos de ação declarativa no painel Configurar.

    Para obter mais informações, consulte Vincular um evento a uma ação declarativa.