Comment filtrer les listes et les répéteurs à l'aide de facettes

  • Publié le Dec 16, 2024
  • 3 minute(s) lue(s)
  • g
 Prev Next

Introduction

Les facettes sont un outil essentiel pour permettre aux utilisateurs de filtrer efficacement des données dans une page de type liste ou un repeater. Elles offrent une méthode intuitive pour naviguer dans des ensembles de données complexes en appliquant des critères personnalisés.

Ce guide explique comment intégrer et configurer des facettes dans une page pour maximiser leur utilité. Vous apprendrez à utiliser des clés de filtre, à ajouter des comportements spécifiques et à relier les facettes à vos données dynamiques. Que ce soit pour une liste ou un repeater, ces étapes vous aideront à construire des interfaces interactives et adaptées aux besoins des utilisateurs.

Prérequis:

Assurez-vous d'avoir une page de type liste pour contenir vos facettes.

Étapes à suivre

Utilisation des facettes dans une liste :

Dans cet exemple, nous définirons des critères pour afficher les comptes en fonction de leur secteur d'activité (industrie) et de leur gestionnaire.  

1. Configurer une facette verticale pour le filtrage

  1. La première étape consiste à ajouter une composante « Vertical Facet » dans la section.

  2. La composante texte générée automatiquement dans la boîte « Vertical Facet » est ensuite renommée.

  3. Il est possible de sélectionner une icône sous le titre de la facette ou de supprimer cet élément si aucune icône n’est souhaitée.

  4. Enfin, dans l’onglet « Field name », le nom du champ à utiliser pour le filtrage est renseigné.

Remarque #1 : Lorsqu'une facette est ajoutée à une page de type liste, elle possède automatiquement un attribut « Filter Key » dont la valeur par défaut est « list ». Cela s’explique par le fait qu’en ajoutant une liste à une page, la clé « list » est automatiquement définie dans le PageState avec le critère de configuration de la liste comme « Field name ». Cet attribut « Filter Key » permet ainsi à la facette de savoir quelles données sont disponibles.

Remarque #2 : La facette agit comme un répétiteur. Autrement dit, les valeurs disponibles pour le filtrage s’affichent en fonction du nom du champ choisi. La « box » sous la facette se répète pour chaque valeur. En sélectionnant cette boîte, on constate qu’elle contient des données. Ces données serviront à configurer l’affichage et la sélection.

Utilisation des facettes dans un « repeater » :

Dans l’exemple suivant, il sera nécessaire de reproduire les comportements appliqués par défaut dans une page de type liste, afin que la facette puisse identifier les données et appliquer des filtres dans un « repeater ». Pour ce faire, nous utiliserons la clé « list » dans le PageState, comme le fait une liste par défaut. Si cette méthode devait être appliquée à une page contenant déjà une liste, il faudrait remplacer la clé « list » par une autre valeur personnalisée pour que les facettes s’appliquent au « repeater » et non à la liste existante.

1. Create a New Application

Le « behavior Save Page Data » doit être ajouté à la « box : vertical facet », et une « key » doit être définie pour configurer le « repeater ». Cette clé devra avoir une valeur correspondant aux critères de recherche des données que le « repeater » doit afficher.

Event: on load
Key: list
Value Source JS: return {query: { typename: "Restaurant" }, filters: [] };
Persist mode: No persistence

2. Create a New Application

  1. Ensuite, le « Repeater » de comptes est ajouté à la page. Le « behavior Set Component Data Using Page Data » doit lui être attribué, avec « list » comme valeur de la clé.

  2. Un deuxième comportement, « Set Component Data », est ensuite ajouté avec le code JavaScript suivant :

const query = data.list?.filters?.reduce((d, filter) => d.add(filter.criteria),db.createQuery(data.list?.query));
return db.search(query)

Ceci fera en sorte que le repeater retourne les données selon le critère de recherche qui a été mis dans la première étape (dans pageState.list).

Conclusion

Les facettes sont un moyen simple et efficace de filtrer les données sur une page de type liste ou un repeater. En configurant correctement les clés et comportements, elles permettent d’afficher des résultats dynamiques basés sur des critères de recherche. En suivant ce guide, vous pourrez créer des interfaces claires et intuitives pour améliorer l’expérience utilisateur.