Mettre en favoris

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.

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)

---

Créer la variable de favoris

1. Ouvrez la Base de données PandaSuite (niveau Projet).
2. Cliquez sur + Ajouter une propriété.
3. Choisissez le type Multi-référence
   • 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.

---

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 à 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

4. Ajustez transitions et durées pour un changement fluide.

---

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

3. Activez Évaluation automatique.

4. Créez la condition Is Not Favorite

Expression de la condition Is Not Favorite :

• Source : la condition Is Favorite
• Fonction : Faux

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 base de données → Base de données PandaSuite
3. Modifier la donnée :

• 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))

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. Source → Depuis une base de données → Base de données PandaSuite → favorites.
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.

---

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.
• 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
• Composant Condition
• Composant Multi-état
• Filtrer une collection
• Créer une page dynamique