Afficher une collection

Vous pouvez afficher dynamiquement une liste d'éléments issue du fournisseur de données ou d'une base de données externe. 

Dans cet exemple, nous détaillerons cet exemple d'application mobile de recherche de biens immobiliers (Pandimmo). Les données sont stockées depuis le fournisseur de données. Ce template est disponible gratuitement. 

Si vous souhaitez connecter une base de données externe (Airtable), nous vous invitons à consulter ce tutoriel : Se connecter à Airtable

Dans cet article

Structurer la base de données

🤷  Une collection est toujours connectée à une base de données. Vous avez le choix entre le fournisseur de données et une base de données externe (Airtable). Si vous ne connaissez pas les différences, cet article vous aidera à faire le bon choix.  

Editer le fournisseur de données 

Cliquez sur Projet dans le fil d'Ariane.

Double-cliquez sur le Data provider présent dans la liste des Objets. Vous pouvez changer le nom de ce fournisseur de données 

se_lection_du_fournisseur_de_donne_es.png

Créer une collection

Créez une propriété Collection. Choisissez son nom, en remplacement de new_key. Ce nom sera réutilisé, nous le mentionnerons ainsi  : COLLECTION_NAME

Elle contiendra tous les biens immobiliers.

add_new_property.png

Cliquez sur l’icône Réglages pour éditer ses propriétés. 

nouvelle_proprie_te_.png

Par défaut, votre nouvelle collection comprend 2 propriétés : id et name. 

Cliquez Add new property pour ajouter les champs date, description, prix et image :

  • Une propriété date pour la date
  • Une propriété string pour la description
  • Une propriété number pour le prix
  • Une propriété image pour le visuel

Notez bien le nom de ces propriétés, vous en aurez besoin pour vos formules. Ce sera votre PROPERTY_NAME

Cliquez sur Save

Éditer le contenu 

Cliquez sur O ITEM(S) pour ajouter le contenu de vos biens immobiliers.

Pour ajouter un item, cliquez sur Add new item. Renommez chaque item (par exemple : appartement 2 chambres Paris). Cliquez sur le bouton à droite pour éditer le contenu de chaque fiche.

Afficher la liste 

Maintenant que vous avez intégré le contenu, préparons l'UI de cette collection. C'est une liste déroulante qui présente chaque bien immobilier sous un format card.

Insérer le composant Collection / Liste

Le composant Collection vous permet d’afficher le contenu d’une collection, en fonction de certains paramètres d’affichage.

Cliquez sur Composants et insérez le composant Collection

composant_collection.png

Dans le champ   Source, renseignez la formule suivante :

[data:ID_SOURCE(/COLLECTION_NAME)]<br>
	

dans laquelle ID_SOURCE est l'identifiant de votre fournisseur de données et COLLECTION_NAME le nom de votre collection.

source_composant_collection.png

Créer un élément (card)

A l'intérieur de la collection, vos données s'affichent sous la forme d'une liste d'éléments. À vous de choisir l'UI de ces éléments : liste, "card" etc...

Double-cliquez sur votre composant Collection et insérez un Groupe (un container). A l'intérieur du Groupe, représentez visuellement la card de présentation de chaque bien immobilier. Cette card sera dupliquée à partir des contenus du fournisseur de données. 

exemple_de_card.png

Data binding

Désormais il vous faut connecter chaque élément visuel au bon contenu. Le  data binding (liaison de données) permet de lier un élément de votre interface utilisateur (UI) à une donnée

Rendez-vous dans le groupe. Pour chaque élément, ajoutez la variable correspondante depuis la fenêtre  Propriétés. Cliquez sur l'icône en haut et à droite et le bouton Ajouter.

"Binder" un texte 

source_texte.png

Voici la formule à utiliser pour "binder" un texte : 

[data:ID_SOURCE(/COLLECTION_NAME/@getById:[data:ID_SOURCE(rowId)]/PROPERTY_NAME)]

dans laquelle dans laquelle ID_SOURCE est l'identifiant de votre fournisseur de données, COLLECTION_NAME le nom de votre collection et PROPERTY_NAME le nom de la propriété à afficher. 

"Binder" une image 

Voici la formule à utiliser pour "binder" une image : 

[data:ID_SOURCE(/COLLECTION_NAME/@getById:[data:ID_SOURCE(rowId)]/PROPERTY_NAME/value)]

dans laquelle dans laquelle ID_SOURCE est l'identifiant de votre fournisseur de données, COLLECTION_NAME le nom de votre collection et PROPERTY_NAME le nom de la propriété à afficher. 

Actualiser les données de l’écran

La dernière étape est d'actualiser les données à l'affichage de l'écran. 

Sélectionnez l'écran et ouvrez la fenêtre Actions

⚡Déclencheur: Affichage courant
⚡Action : Agir sur un composant > Fournisseur de données
⚡Sous-action :  Rafraîchir les données

actualiser_les_donne_es.png

Afficher un élément sélectionné

Dans notre exemple, l'utilisateur accède au clic sur la card à sa fiche complète. Il est donc nécessaire d'intégrer une variable selected pour stocker et afficher l'élément sélectionné.  

Préparer l'UI de la fiche 

Pour réaliser cet effet d'ouverture, placez un composant Pop-up au-dessus de la vignette ou créez une transition grâce aux états. 

Préparez le design d'une fiche. 

Créer une variable selected pour stocker le type 

Cette variable permet de stocker le bien actuel, celui sélectionné par l'utilisateur.

Dans le fournisseur de données, créez une nouvelle propriété selected de type Référence. Celle-ci pointe vers la collection qui regroupe tous les biens.

Data binding d'une sélection

Rendez-vous dans le groupe. Pour chaque élément visuel, ajoutez la formule correspondante depuis la fenêtre Propriétés. Cliquez sur l'icône en haut et à droite et le bouton Ajouter.

Pour un texte :

[data:ID_SOURCE(/COLLECTION_NAME/@getById:[data:ID_SOURCE(/selected/value)]/PROPERTY_NAME)]

dans laquelle dans laquelle ID_SOURCE est l'identifiant de votre fournisseur de données, COLLECTION_NAME le nom de votre collection et PROPERTY_NAME le nom de la propriété à afficher. 

Pour une image : 

[data:ID_SOURCE(/COLLECTION_NAME/@getById:[data:ID_SOURCE(/selected/value)]/PROPERTY_NAME/value)]

dans laquelle dans laquelle ID_SOURCE est l'identifiant de votre fournisseur de données, COLLECTION_NAME le nom de votre collection et PROPERTY_NAME le nom de la propriété à afficher. 

Ouvrir un contenu selected

Sélectionnez la card. 

Cliquez sur Actions.

⚡ Déclencheur: Simple tap / Clic
⚡ Action : Agir sur un composant > Fournisseur de données  
⚡ Sous-action :  Modifier la donnée
⚡ Donnée : /selected/value
⚡ Fonction : Définir
⚡ Valeur : [data:ID_SOURCE(rowId)]

modifier_la_se_lection.png

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