Afficher une collection
Affichez les données de votre collection sous la forme d’une liste.
Au préalable, vous devez avoir connecté une source de données à votre application.
Dans cet article
Connecter la 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 à Airtable via le 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 élément
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.