# Filtrer une collection

> Apprenez à créer des filtres sur-mesure pour permettre aux utilisateurs d'accéder facilement aux données de vos collections. Découvrez comment les filtres peuvent influencer le contenu du composant Collection / Liste dans votre application.

https://docs.pandasuite.com/fr/essentials/data/filter-a-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*.

[Vidéo : Paris City Guide sur un téléphone : un tap sur la catégorie Food, Drinks ou Museum n'affiche que les bons plans de cette catégorie]

## 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).

[Image : Boutons Food, Drinks et Museum au-dessus de la liste : l'état Food du Multi-état des catégories et son bouton en surbrillance sont encadrés]

Créez une propriété de type **Texte** (elle s'appelle *selected\_category* dans l'exemple ci-dessous) dans un [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/) : 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.

[Image : Datastore du projet : la propriété texte selected_category est encadrée, sous favorites, selected et selected_arrondissement]

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

Ajoutez une action : **Agir sur une source de données** → votre Datastore → **Créer/Modifier une donnée (local)**, avec ***selected\_category*** en **Cible** et la fonction **Définir**.

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

[Vidéo : sur le bouton Food, au Tape/Clic, Agir sur une source de données, le Datastore, Créer/Modifier une donnée sur selected_category, valeur Food]

Désormais créez la [condition](https://docs.pandasuite.com/fr/essentials/components/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\_category* est inconnue ou vide)
- ***OU*** si la catégorie sélectionnée par l'utilisateur (la valeur de la variable *selected\_category*) correspond à la catégorie de l'élément courant

Rendez-vous dans les propriétés de votre composant [Collection / Liste](https://docs.pandasuite.com/fr/essentials/data/collection/). Cliquez sur **Filtre** et sur le bouton **+**

[Vidéo : condition Filter by Category de la Collection / Liste : selected_category inconnue ou vide OU Category égale à selected_category]

> **Astuce**
>
> Un filtre est une seule condition : il utilise donc un seul opérateur (**ET** ou **OU**) pour toutes ses expressions. Pour combiner plusieurs critères avec à la fois **ET** et **OU** (par exemple, restreindre la liste à une catégorie et correspondre à l'un de plusieurs filtres optionnels), composez plusieurs conditions comme expliqué dans [Mélanger ET et OU](https://docs.pandasuite.com/fr/essentials/components/condition/#mélanger-et-et-ou).

## 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\_category* 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*.

[Image : Condition de filtre Only display Food de la Collection / Liste : la Category de l'élément courant est égale au texte Food]

> **Info**
>
> 💡 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](https://docs.pandasuite.com/fr/essentials/integrations/connect-to-airtable/)

[Modèle : Bonnes adresses Paris + favoris](https://pandasuite.com/fr/templates/collection-adresses-paris/)
