Afficher une collection depuis Airtable
Affichez les données de votre base Airtable sous la forme d’une liste. Lorsque l'utilisateur clique sur un élément de la liste, une vue détaillée apparaît.
L'application mobile Paris City Guide référence une liste de bons plans à Paris (restaurants, musées etc...). Les bons plans ( Rosa Bonheur, Chez Alain Miam Miam...) sont les éléments d'une base Airtable, chaque bon plan est représenté par une ligne. La base contient plusieurs champs (Name, Address, Description, Image, Category...) qui sont présentés sous la forme de colonnes.
Dans cet article
Connecter votre collection à la base
Affichez vos éléments (les bons plans) sous la forme d'une liste déroulante grâce au composant Collection / Liste.
Cliquez sur Composants et insérez le composant Collection / Liste.
Dans les propriétés, cliquez sur Source et choisissez Depuis une base de données. Sélectionnez le composant HTTP et sélectionnez le tableau Records.
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
Créez un gabarit pour présenter les bons plans. Ce gabarit sera automatiquement répété à partir de vos données.
Vous pouvez choisir n'importe quel design : card, texte sur une ligne... 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)
Double-cliquez sur le composant Collection / Liste pour entrer à l'intérieur. 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.
Afficher 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.
Afficher 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.
Créer une vue détaillée
Créez la vue pour présenter de manière plus détaillée votre bon plan. Vous pouvez la créer où vous voulez : sur un nouvel écran, dans un état lié, dans un composant Pop-up...
Pour créer le contenu de la vue, nous vous recommandons d'utiliser le composant Flexbox. Celui-ci adapte automatiquement sa mise en page en fonction de son contenu et peut faire apparaître une barre de défilement si besoin.
Sauvegarder l'identifiant de l'élément sélectionné
Chaque élément de votre collection contient un identifiant unique sur Airtable. Il permet d'identifier chaque bon plan (chaque ligne) de façon unique et de pouvoir ensuite y accéder facilement. Pour afficher les bonnes données dans la vue, nous allons stocker cet identifiant dans une variable.
Rendez-vous dans la base de données PandaSuite.
Créez une nouvelle propriété de type Texte. Dans notre exemple, celle-ci a été nommée : selected_item
Cliquez sur Sauvegarder et Mettre en production
Sélectionnez votre élément de liste à l'intérieur de votre collection et ajoutez une action : Au clic > Agir sur un composant > Fournisseur de données > Modifier la donnée.
Afficher les données d'un élément sélectionné
La fonction By Id permet de retrouver un élément à partir d'un identifiant donné. Utilisez cette fonction et la variable pour accéder aux données de l'élément sélectionné à partir de son identifiant unique.
Sélectionnez le bloc de texte et cliquez sur le data binding de Contenu.
Faites de même avec tous les objets de la vue.