# Mettre en favoris > Apprenez à permettre à vos utilisateurs d’ajouter ou de retirer n’importe quel élément d’une Collection/Liste dans leurs favoris. https://docs.pandasuite.com/fr/essentials/data/bookmark-favorite/ **La mise en favoris (ou *bookmark*) permet aux utilisateurs de conserver les éléments qui les intéressent et d’y revenir plus tard depuis une vue dédiée.** [Vidéo : Application Paris City Guide : un tap sur le cœur de deux lieux le remplit, puis ces deux lieux apparaissent dans la vue des favoris] Dans ce tutoriel vous allez : 1. Créer une variable **Multi-référence** qui stocke les favoris 2. Ajouter un bouton « cœur » animé au sein de votre **Collection / Liste** 3. Gérer l’affichage du cœur plein / vide grâce au composant **Condition** 4. Mettre à jour la liste des favoris avec deux actions « Ajouter » / « Supprimer » 5. Afficher la collection des favoris dans une nouvelle liste (ou en réutilisant votre gabarit existant) > **Info : Prérequis** > > Vous disposez déjà d’une **[Collection / > Liste](https://docs.pandasuite.com/fr/essentials/data/collection/)** connectée à une source de données > interne ([Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/)) ou externe (via le composant HTTP). --- ## Créer la variable de favoris 1. Ouvrez le **[Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/)** (niveau Projet). 2. Cliquez sur **+ Ajouter une propriété**. 3. Choisissez le type **[Multi-référence](https://docs.pandasuite.com/fr/essentials/data/data-types/#multi-références)** - **Source** : votre collection principale (celle affichée dans la liste). - **Nom de la propriété** : *favorites* (ou tout autre nom explicite). 4. **Sauvegarder** puis **Mettre en production**. > **Info : Pourquoi un Multi-référence ?** > > Il conserve plusieurs liens vers les éléments sélectionnés sans dupliquer les > données. Il peut être réutilisé directement comme **Source** d’une > **Collection/Liste**. Les fonctions *By Id*, *Contains*, etc. restent > disponibles. --- ## Ajouter le bouton Cœur (Multi-état) 1. Éditez l’élément de liste (double-clic dans la collection). 2. Insérez un **[Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/)** à l’endroit souhaité du gabarit. 3. À l’intérieur du composant, créez **deux états liés** : | État | Contenu | | ---- | ---------------- | | 0 | Icône cœur vide | | 1 | Icône cœur plein | [Image : Multi-état Fav button dans l'élément de liste, avec deux états liés, Not favourite et Favourite, et l'icône cœur sur la carte] 4. Ajustez transitions et durées pour un changement fluide. > **Succès : Astuce design** > > En utilisant des *états liés*, toute modification future du positionnement ou > de la taille du cœur sera répercutée automatiquement. --- ## Afficher le bon état avec un composant Condition Toujours à l’intérieur de l’item : 1. Depuis **Composants**, insérez un composant **Condition** (non graphique) : placez-le idéalement dans le même dossier objet que le **Multi-état** pour rester lisible. 2. Dans ses propriétés, cliquez sur **+ Ajouter** pour créer une condition *Is Favorite*. **Expression de la condition** *Is Favorite* : - **Source** : *favorites* (ou le nom de la variable Multi-référence) - **Fonction** : `Contient` - **Valeur** : la référence de l'élément courant : (`Élément courant` → `id` si vous êtes dans une **Collection / Liste** ou une variable Référence (voir [Créer une page dynamique](https://docs.pandasuite.com/fr/essentials/data/dynamic-page-from-collection-item/))) 3. Activez **Évaluation automatique**. [Image : Condition Is favorite : évaluation automatique activée, et expression qui vérifie que la variable favorites contient l'élément courant] 4. Créez la condition *Is Not Favorite* **Expression de la condition** *Is Not Favorite* : - **Source** : la condition *Is Favorite* - **Fonction** : `Faux` [Image : Actions de la condition : si Is favorite est vrai, Fav button passe à l'état Favourite ; si Is not favorite est vrai, à Not favourite] Ainsi, à chaque fois que la variable change ou que la collection se regénère, l’icône s’ajuste sans intervention supplémentaire. --- ## Ajouter / Retirer un favori Sélectionnez l’icône cœur vide (dans l'état 1) : 1. **Actions** → **Simple tap / Clique** 2. **Agir sur une source de données** → **Datastore** 3. **Créer/Modifier une donnée (Local)** : - **Cible** : *favorites* - **Fonction** : `Ajouter` - **Valeur** : la référence de l'élément courant : (`Élément courant` → `id` si vous êtes dans une **Collection / Liste** ou une variable Référence (voir [Créer une page dynamique](https://docs.pandasuite.com/fr/essentials/data/dynamic-page-from-collection-item/))) [Image : Action Simple tap / Clique sur le cœur vide : Créer/Modifier une donnée (Local), Cible favorites, Fonction Ajouter, élément courant en valeur] Répétez l’opération sur l’icône cœur plein (état 1) avec la fonction **Supprimer l’élément**. La condition créée à l’étape 3 détecte immédiatement la modification et bascule l’état du cœur. --- ## Créer la vue « Mes favoris » ### Option 1 : une nouvelle liste 1. Dans l’écran « Favoris », insérez une **Collection / Liste**. 2. Dans **Source**, sélectionnez la Multi-référence `_favorites_` depuis le **Datastore**. 3. Redesign ou liaison de données identique à votre liste principale. ### Option 2 : réutiliser le gabarit existant 1. Copiez votre Collection/Liste d’origine (`Ctrl/Cmd +C` → `Ctrl/Cmd +V`). 2. Changez uniquement la **Source** vers *favorites*. 3. Toutes les liaisons (image, texte, etc.) restent fonctionnelles : c'est un véritable gain de temps. [Image : Écran des favoris : une Collection / Liste dont la Source est la variable favorites affiche les cartes des lieux enregistrés] --- ## Validation rapide Pour tester votre mise en favoris : - Ajoutez un favori → le cœur se remplit et apparaît dans la vue Favoris. - Retirez-le → le cœur redevient vide et l’élément disparaît de la vue Favoris. - Fermez / relancez l’app : la variable Multi-référence étant locale et persistante, les favoris restent disponibles (sauf désinstallation). --- ## Aller plus loin - Associer les favoris à un **compte utilisateur** en enregistrant la Multi-référence dans **[Firebase Session](https://docs.pandasuite.com/fr/essentials/components/firebase-session/)**. - **Trier** ou **rechercher** parmi les favoris grâce aux options de la Collection/Liste. - Coupler le système de favoris à un **filtre**, un **moteur de recherche** ou une **carte**. --- ## Ressources liées - [Types de données](https://docs.pandasuite.com/fr/essentials/data/data-types/#multi-références) - [Composant Condition](https://docs.pandasuite.com/fr/essentials/components/condition/) - [Composant Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/) - [Filtrer une collection](https://docs.pandasuite.com/fr/essentials/data/filter-a-collection/) - [Créer une page dynamique](https://docs.pandasuite.com/fr/essentials/data/dynamic-page-from-collection-item/) [Modèle : Paris City Guide](https://pandasuite.com/fr/templates/collection-adresses-paris/)