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 ( NameAddressDescriptionImageCategory...)  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.

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous