Configurar um manipulador de eventos para um componente de filtro

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 2 min. de leitura

    • Em um painel técnico, configure um manipulador de eventos baseado em client script especial para um componente de filtro para que ele possa ser seguido por listas ou visualizações de dados. Não é necessário configurar um manipulador de eventos para filtros em painéis em linha.

    Antes de Iniciar

    Este procedimento pressupõe que as seguintes tarefas estejam concluídas:
    1. Você adicionou o componente de filtro à página Construtor de IU, bem como pelo menos um componente de lista ou visualização de dados. O filtro pode ser aplicado a várias visualizações de dados ou listas.
    2. Você configurou o filtro para a origem e os dados a serem filtrados, se aplicável, para o componente de filtro. Se o componente de filtro deve filtrar uma lista, você especificou a tabela que o componente de lista mostra como dados a serem filtrados.
    3. Você configurou fontes de dados para todos os componentes de visualização de dados.
    4. Você especificou uma tabela para todos os componentes de Lista.

    Função necessária: ui_builder_admin, administrador

    Procedimento

    1. Abra a página relevante Construtor de IU.
      Esta página pode ser um painel técnico.
    2. Navegue até a seção Construtor de IU Estado e adicione uma variável de estado chamada parFilters do tipo JSON com um valor inicial de matriz simples [].
      Para obter mais informações, consulte Criação e vinculação de um parâmetro de estado do cliente a um componente.
      Adicionar o parâmetro de estado do cliente parFilters a uma página do UIB.
    3. Adicione uma segunda variável de estado chamada encodedQueries do tipo JSON com valor inicial {}.
    4. Navegue até a seção Scripts de cliente e crie um script personalizado com um nome como "Aplicar filtros do PAR" e o seguinte conteúdo ou um equivalente funcional dele: 
      function handler({ api, event, helpers, imports }) {
	const mergePARFiltersV2 = imports["global.mergePARFilters"]().v2;
	const { appliedFilters } = event.payload;
	api.setState("parFilters", ({ currentValue, api }) => {
		const { parFilters, encodedQueries } = mergePARFiltersV2(
			currentValue,
			appliedFilters
		);
		api.setState("encodedQueries", encodedQueries);
		return parFilters;
	});
}
    5. Na seção Scripts de cliente, abra a guia Inclusões de client script.

      A guia Inclusões de client script do painel Scripts de cliente em uma página do UIB.
    6. No campo Adicionar uma inclusão de script, selecione mergePARFilters e clique em Adicionar.

      Adicionar o script mergePARFilters inclui.
    7. Feche a janela para configurar dados, estado do cliente e client scripts.
    8. Em Construtor de IU, selecione o componente Filtro.
    9. Selecione a guia Eventos no painel de configuração e adicione o script de página que você criou, que em nosso exemplo é Aplicar filtros do PAR, como um manipulador de eventos.

      Adicionando o script Aplicar filtros do PAR como o manipulador de eventos de filtro aplicado.
    10. No Construtor de IU, selecione um componente de lista, se houver.
    11. Selecione Editar filtro fixo e defina esta propriedade [fixedQuery] como a expressão de vinculação dinâmica @state.encodedQueries.<list-datasource> .
      Substituir<list-datasource> com a fonte de dados do componente de lista. Por exemplo, se sua Lista mostrar registros da tabela Incidente [incidente], insira @state.encodedQueries.incident.
      No campo de filtro fixo em um painel de configuração de lista, vinculando a propriedade fixedQuery ao parâmetro de estado do cliente encodedQueries.
    12. Repita as duas etapas anteriores para todos os outros componentes de lista.
    13. Salve a página.