Filtrer une collection

Créez des filtres sur-mesure pour que l'utilisateur accède plus facilement à certaines données. Les filtres permettent d'afficher les données de votre collection en fonction d'une condition. 

Concrètement ces filtres agissent sur le contenu du composant Collection / Liste : ils permettent de n'afficher que les éléments qui répondent à une condition. Cette condition est librement déterminée. Chaque élément est évalué en fonction de cette condition et n'est affiché que si la condition est remplie. 

Dans l'application Paris City Guide, l'utilisateur a la possibilité de filtrer la liste des bons plans par catégorie : Food, Drinks, Museum ou Outdoor.

Dans cet article

Afficher les catégories

Faites apparaître visuellement les catégories que l'utilisateur peut sélectionner. Le contenu de la collection s'ajuste en fonction de la sélection de l'utilisateur. Dans cet exemple, l'utilisateur clique sur Food et n'affiche que les bons plans de cette catégorie.

Choisissez le design de votre choix (ci-dessous des boutons). 

Créez une variable de type Texte (elle s'appelle selected_type dans l'exemple ci-dessous) depuis la base de données PandaSuite : cette variable vous permet de sauvegarder la catégorie sélectionnée afin de vous en servir lors de la création de la condition du filtre.

Lorsque l'utilisateur sélectionne l'une des catégories, modifiez la valeur de cette variable. 

Ajoutez une action :  Agir sur une base de données Base de données PandaSuite > Modifier la donnée > selected_type

Définissez sa valeur manuellement. Ci-dessous l'utilisateur a sélectionné la catégorie Food, la valeur saisie est Food.

Désormais créez la condition qui permet d'afficher les éléments en fonction de la catégorie sélectionnée. 

Dans notre exemple pour qu'un bon plan s'affiche, il faut que la condition de filtre soit remplie. Celle-ci est composée de 2 expressions : 

  • Si l'utilisateur n'a pas sélectionné de catégorie (la valeur de la variable selected_type est inconnue ou vide) 
  • OU si la catégorie sélectionnée par l'utilisateur (la valeur de la variable selected_type) correspond à la catégorie de l'élément courant 

Rendez-vous dans les propriétés de votre composant Collection / Liste. Cliquez sur Filtre et sur le bouton + 

Multi-sélection de filtres 

Dans l'exemple précédent, l'utilisateur ne peut sélectionner qu'une seule catégorie à la fois. C'est pourquoi la variable est de type Texte.

Si vous souhaitez que l'utilisateur puisse en sélectionner plusieurs, il faut choisir un autre type de variable : Tableau. En effet le tableau vous permet d'ajouter une ou plusieurs catégories sélectionnées. 

Au niveau de votre condition de filtre, il faut adapter votre expression : 

  • Si l'utilisateur n'a pas sélectionné de catégorie (la valeur de la variable selected_type est inconnue ou vide) 
  • OU si le tableau des catégories sélectionnées par l'utilisateur contient la catégorie de l’élément courant

Filtrer sans sélection utilisateur

Dans les précédents exemples, le filtre était lié à une sélection de l'utilisateur. Néanmoins ce n'est pas une obligation. 

Vous pouvez par exemple choisir de n'afficher que les restaurants. Auquel cas la condition de filtre devient : si la catégorie de l'élément courant est Food.

💡Si votre base de données est sur Airtable, vous pouvez également créer des filtres côté serveur directement depuis l'API. Nous vous recommandons de consulter cet article : Se connecter à Airtable

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous