Afficher une collection
Affichez les données de votre collection sous la forme d’une liste.
Dans cet article
Connecter la source de données
Pour connecter votre collection à une source de données :
- Insérez le composant Collection / Liste.
- Dans les propriétés, cliquez sur Source et choisissez Depuis une base de données. Sélectionnez votre source de données.
- Cliquez sur le bouton Valider.
⚠️ Au préalable, votre application doit être connectée à une source de données. Pour une API telle qu'Airtable, vous avez besoin du composant HTTP. Découvrez comment faire : Se connecter à Airtable. Testez la requête et lancez la requête à l'affichage de l'écran dans lequel se trouve votre composant.
Créer un élément de liste
Dans la collection, un seul élément sera créé et répété à partir des données de la source.
Personnalisez le design de cet élément : card, texte sur une ligne... Double-cliquez sur le composant pour éditer son contenu.
Si vous utilisez un outil de design, exportez chaque élément individuellement pour qu'il puisse être connecté dynamiquement à une donnée.
💡 Si vous souhaitez de l'inspiration pour l'UI de vos éléments de liste : Guide to list UI design: principles and examples (Justinmind)
Insérez un composant Groupe. Ajustez sa taille et à l’intérieur, représentez visuellement un élément de liste.
Maintenant que votre gabarit est prêt, affichez dedans les champs de la base ( Name, Address, Description, Image, Category...) grâce au data binding.
Binder un texte
Pour afficher le champ Name dans un bloc de texte, sélectionnez ce bloc de texte et cliquez sur le data binding de Contenu.
Sélectionnez Données de l'élément courant et parcourez votre source de données.
💡 En choisissant Données de l'élément courant, vous accédez directement aux données de la source, ici à une ligne de la base Airtable : Rosa Bonheur.
Binder une image
Sur Airtable, les images sont exposées sous la forme d'un URL qui est ensuite automatiquement convertie en image par PandaSuite.
Sélectionnez l’image et cliquez sur le data binding de Contenu.
Conditions d'affichage
Les conditions d’affichage sont une fonctionnalité avancée permettant de sélectionner automatiquement l’élément à afficher en fonction d’une condition spécifique. Cette option devient disponible dès lors qu’un deuxième élément est ajouté dans le composant Collection / Liste. Elle est particulièrement utile lorsque le design ou la structure d’un élément doit s’adapter à la nature des données connectées.
Par exemple, vous pouvez afficher un élément Image ou Vidéo selon la valeur d’un champ Type dans votre source de données. Dans le template Catalogue immobilier, cette fonctionnalité est utilisée pour indiquer si un bien immobilier est exclusif ou non, en se basant sur un champ booléen.
💡Astuce : Si vous souhaitez rendre conditionnelle uniquement une partie d’un élément sans recourir aux conditions d’affichage globales, insérez simplement le composant Condition à l’intérieur de l’élément. Cela vous permettra d’ajouter des actions spécifiques basées sur un multi-état.
Combiner affichage statique et dynamique grâce aux conditions d’affichage
Il est possible de mixer des sources de données dynamiques et des éléments statiques pour répondre à différents besoins d’interactivité. Vous pouvez ainsi conserver un affichage statique pour des éléments nécessitant une interactivité spécifique et non générique (tirant parti des nombreuses fonctionnalités interactives de PandaSuite), tout en créant des pages dynamiques grâce au data binding pour un affichage standard.
Les conditions d’affichage jouent ici un rôle clé pour gérer ces deux types d’éléments. Vous pouvez utiliser cette fonctionnalité pour cibler des éléments statiques et leur associer un renderer spécifique. Par exemple, le composant Condition peut vérifier l’identifiant de la donnée source et rediriger vers la bonne page statique.
Inversement, il est également possible de mettre à jour votre contenu dynamique pour inclure les identifiants uniques des écrans et les exploiter dans une action de changement d’écran. En liant ces identifiants via le data binding, vous pouvez ainsi créer une navigation fluide et cohérente entre vos données dynamiques et vos éléments statiques.