Hello, merci de visiter mon site internet. Dans cet article, je vais t’expliquer comment mettre en place un système de filtre avancé avec FlutterFlow et Firestore de Firebase. Cette fonctionnalité va te permettre, par exemple, de combiner plusieurs filtres pour afficher les documents correspondants sur ta page.
L’enjeu est de mettre à jour une requête globale dynamiquement quand on sélectionne un champ dans un menu déroulant.
Pour faire ce filtre, nous allons utiliser ces éléments :
- L’action “onSelected” du menu déroulant.
- Les états de page (page states).
- La requête de collection de la page (query collection).
- L’action de requête Firestore (Firestore query).
1) Les états de page (Page states)
Les états de page sont des variables locales qui peuvent être utilisées directement dans la page. La mise à jour d’un état de page permet de reconstruire la page et donc de rafraîchir les données. C’est donc une bonne solution pour ce que nous voulons faire.
Nous allons donc créer un état de page par menu déroulant (Catégories). Attention, le type de l’état de page doit correspondre au type de champ dans la requête principale.
2) La requête principale (collection query)
Par défaut, nous allons filtrer la requête principale avec les différentes valeurs des états de page. Étant donné que les valeurs nulles ne vont pas impacter la requête, tous les documents s’afficheront dans un premier temps.
3) L’action “on selected” du menu déroulant (dropdown)
Une fois qu’une valeur est sélectionnée dans un menu déroulant, nous allons mettre à jour l’état de page correspondant, qui mettra à son tour à jour la requête de collection et affichera donc les documents correspondants.
Exemple avec une application pour filtrer des articles
Présentation de l’application
J’ai une application qui gère deux types de documents.
Des articles
Des catégories
Dans notre exemple l’application à deux catégories Vidéos Games et Clothes
Étape 1 : Initialiser le page state
Je créé un page state categories qui est une tableau de références de catégories
Étape 2: Créer la query global
Dans ma requête globale, j’ajoute en filtre mon état de page. Attention, le type de l’état de page doit bien correspondre au type de données. Dans mon cas, un article a une liste de catégories référencées. Mon état de page doit donc être une catégorie référencée ou une liste de catégories référencées.
J’ai choisi cette configuration dans le but de permettre la sélection multiple par la suite. Si vous ne souhaitez pas mettre en place cette fonctionnalité, l’utilisation d’une liste de catégories n’est pas forcément nécessaire.
Étape 3 : Créer le menu déroulant
Le widget dropdown permet de manipuler deux types de données : la valeur (value) et l’étiquette (label).
La value est la valeur que va renvoyer le menu déroulant quand il est sélectionné, et le label est la valeur que l’utilisateur va voir dans l’interface.
La catégorie a un champ titre que nous allons utiliser en tant que label, car il contient des majuscules et des espaces (par exemple, « Video Games »), ce qui est plus adapté pour l’expérience utilisateur (UX).
Pour la value, nous allons utiliser le champ slug, qui reprend le titre en format slug (par exemple, « video-games »). Ceci permet de manipuler les données plus facilement d’un point de vue technique.
a) Faire une requête des catégories sur le menu déroulant.
b) Définir “options values” avec le slug de la catégorie
c) Définir “label options value” avec le champ title
Étape 4: Changer les filtres de la query principale avec l’action on selected
Pour mettre en place notre filtre, nous allons utiliser l’action « onSelected » de notre menu déroulant. Comme indiqué à l’étape 1, notre requête globale a comme filtre l’état de page de la catégorie, qui est actuellement vide et n’a donc aucun impact.
a) Je réinitialise mon état de page au cas où une valeur y est déjà enregistrée.
b) Je retrouve la catégorie avec une requête Firestore.
Le menu déroulant me renvoie un « slug », mais mon état de page est une liste de documents référencés. Je fais donc une requête Firestore de catégories avec un document unique et filtre par le slug, ce qui me retourne le document correspondant.
Pourquoi ne pas avoir directement stocké la référence de la catégorie dans le menu déroulant ? Car la valeur de retour est une chaîne de caractères et non une référence, ce qui revient toujours à devoir effectuer une requête Firestore.
b) Je mets à jour l’état de page des catégories en ajoutant à la liste la référence de mon document, et je reconstruis la page.
Ma requête globale est mise à jour et les articles correspondants apparaissent.
Étape 5 : Réinitialiser tous les filtres
Pour réinitialiser tous les filtres et afficher à nouveau tous les articles, j’ajoute une action qui réinitialise mon état de page sur le bouton de réinitialisation.
Et voilà, tu sais maintenant comment mettre en place un système de filtres sur ton application avec Firebase. Tu peux multiplier le nombre de filtres avec les différents éléments de ta base de données. Il est important de retenir que l’état de page doit absolument correspondre à ton type de champ en base de données, sinon cela ne fonctionnera pas. N’hésite pas à m’envoyer un message si tu as des questions 🙂
