Configure um manipulador de eventos para um componente de filtro

Em um painel técnico, configure um manipulador de eventos baseado em script de cliente 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 Filtro ao Construtor de IU E pelo menos um componente de Visualização de dados ou Lista. O Filtro pode ser aplicado a várias visualizações de dados ou listas.
2. Você configurou o filtro como origem e os dados a serem filtrados, se aplicável, para o componente Filtro. Se o componente Filtro deve filtrar uma Lista, você especificou a tabela que o componente Lista mostra como dados para filtrar.
3. Você configurou fontes de dados para todos os componentes de Visualização de dados.
4. Você especificou uma tabela para todos os componentes da lista.

Função necessária: ui_builder_admin, admin

Procedimento

1. Abra o relevante Construtor de IU página.
   Esta página pode ser um painel técnico.
2. Navegue até Construtor de IU 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 Crie e vincule um parâmetro de estado do cliente a um componente .
   
   
3. Adicione uma segunda variável de estado chamada Queries codificadas Do tipo JSON com valor inicial . .
4. Navegue até a seção Client Scripts e crie um script personalizado com um nome como "Aplicar filtros PAR" e o seguinte conteúdo ou um equivalente funcional:

   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 Client Scripts, abra o. Client Script inclusões .
   
   
   
6. Em Adicione uma inclusão de script campo, selecione MergePARFilters e clique em Adicionar .
   
   
   
7. Feche a janela para configurar dados, estado do cliente e scripts do cliente.
8. Em Construtor de IU, Selecione o componente Filtro.
9. Selecione Eventos No painel de configuração e adicione o script de página que você criou, que em nosso exemplo é Aplicar filtros PAR, como um manipulador de eventos.
   
   
   
10. Em 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 EncodedQueries.<list-datasource> .
    Substitua o <list-datasource> pela fonte de dados do componente Lista. Por exemplo, se sua Lista mostrar registros da tabela Incidente [incidente], insira A state.encodedQueries.incident .
    
    
12. Repita as duas etapas anteriores para todos os outros componentes da lista.
13. Salve a página.