Configurer un gestionnaire d’événements pour un composant de filtre

Sur un tableau de bord technique, configurez un gestionnaire d’événements spécial basé sur un script client pour un composant de filtre afin qu’il puisse être suivi par n’importe quelle liste ou visualisation de données. Il n’est pas nécessaire de configurer un gestionnaire d’événements pour les filtres sur les tableaux de bord en ligne.

Avant de commencer

Cette procédure suppose que les tâches suivantes sont terminées :

1. Vous avez ajouté le composant Filtre à la Générateur d'IU page, ainsi qu’au moins un composant de visualisation des données ou de liste. Le filtre peut s’appliquer à plusieurs visualisations de données ou listes.
2. Vous avez configuré le filtre sur la source et les données à filtrer, le cas échéant, pour le composant Filtre. Si le composant Filtre est censé filtrer une liste, vous avez spécifié la table que le composant Liste affiche comme données à filtrer.
3. Vous avez configuré des sources de données pour tous les composants de visualisation de données.
4. Vous avez spécifié une table pour tous les composants de liste.

Rôle requis : ui_builder_admin, admin

Procédure

1. Ouvrez la page concernée Générateur d'IU .
   Cette page peut être un tableau de bord technique.
2. Accédez à la Générateur d'IU section État et ajoutez une variable d’état nommée parFilters de type JSON avec une valeur initiale de tableau simple [].
   Pour plus d’informations, consultez Créer et lier un paramètre d’état de client à un composant.
   
   
3. Ajoutez une deuxième variable d’état nommée encodedQueries de type JSON avec la valeur initiale {}.
4. Accédez à la section Scripts clients et créez un script personnalisé avec un nom tel que « Appliquer des filtres PAR » et le contenu suivant ou un équivalent fonctionnel de celui-ci :

   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. Dans la section Scripts clients, ouvrez l’onglet Includes de script client .
   
   
   
6. Dans le champ Ajouter un script include , sélectionnez mergePARFilters et cliquez sur Ajouter.
   
   
   
7. Fermez la fenêtre de configuration des données, de l’état du client et des scripts clients.
8. Dans , Générateur d'IU sélectionnez le composant Filtre.
9. Sélectionnez l’onglet Événements dans le panneau de configuration et ajoutez le script de page que vous avez créé, qui dans notre exemple est Appliquer des filtres PAR, en tant que gestionnaire d’événements.
   
   
   
10. Dans , sélectionnez un composant de Générateur d'IU liste, s’il en existe un.
11. Sélectionnez Modifier le filtre fixe et définissez cette propriété [fixedQuery] comme expression de liaison dynamique @state.encodedQueries.<list-datasource>.
    Remplacez <list-datasource> par la source de données du composant Liste. Par exemple, si votre liste affiche des enregistrements de la table Incident [incident], entrez @state.encodedQueries.incident.
    
    
12. Répétez les deux étapes précédentes pour tous les autres composants de liste.
13. Enregistrez la page.