Collection / Liste

La collection / liste est un composant qui gère une collection ordonnée de données et les présente sous la forme d'une liste d'éléments selon une orientation horizontale ou verticale. Ce composant est associé à une source de données interne (via la Base de données PandaSuite) ou externe (via le composant HTTP).

La première étape est de créer une base de données et de la structurer correctement. Le composant Collection permet de l'afficher au sein de votre application selon un affichage 100% personnalisé. 

Insérer une collection

Cliquez sur Composants et insérez le composant Collection / Liste.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed046e0fb0017988c5e/img-26566-1601563788-1670506476.png

Dans la fenêtre  Propriétés du composant, vous pouvez : 

  • Choisissez l'orientation de votre collection : Horizontal ou Vertical pour afficher les éléments en une seule ligne ou colonne.
  • En cliquant sur Adapter les enfants, choisissez si les éléments de la collection apparaissent sur une seule ligne /colonne ou s'ils peuvent être répartis sur plusieurs lignes
  • Définissez des marges entre les éléments. 

Dans le champ  Source, renseignez l'identifiant de la source de données sous la forme suivante :

[data:ID_SOURCE(/COLLECTION_NAME)]
  • Si votre source est le fournisseur de données, ID_SOURCE est l'identifiant de votre fournisseur de données.
  • Si votre source est la donnée d'un composant, ID_SOURCE est l'identifiant de votre composant.
  • Si votre source est externe : ID_SOURCE est l'identifiant du composant HTTP connecté à votre source externe et COLLECTION_NAME vient de cette source externe.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed14cedfd0017dcd781/img-26566-1601563791-1031105507.png

Utilisez les options Trier par (ordre ascendant/ordre descendant) et Filtrer par (une condition) pour personnaliser l'affichage de la collection. 

Créer un élément de la collection

Personnaliser l'UI

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 le composant Collection pour éditer son contenu. A l'intérieur du composant, la mise en page n'est pas libre : nous vous recommandons d'insérer en premier lieu un  Groupe (un container) dans lequel vous ajoutez les objets visuels (par exemple, un fond blanc, une image, un bloc de texte pour le titre, un autre pour la description). Ce groupe sera dupliqué à partir de vos contenus.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed0cff47e001a58a27c/img-26566-1601563789-340514570.png

Insérez plusieurs blocs de texte pour le title, l'adresse et le prix. Personnalisez l'apparence visuelle depuis la fenêtre Propriétés.

Insérez une image dont la source peut être vide.

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.

Sélectionnez chaque objet et ouvrez sa fenêtre Propriétés. 

Cliquez sur l'icône Données dynamiques en haut à droite et le bouton  + Ajouter > Source.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed1c9e77c0016213810/img-26566-1601563792-1972162006.png

Pour les textes

Utilisez la formule suivante :

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

dans lequel :
ID_SOURCE est la source de votre contenu
COLLECTION_NAME est le nom de votre propriété Collection
PROPERTY_NAME est le nom de la sous-propriété

Pour les images

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

Actualiser les données

Maintenant que la collection est bien paramétrée, il faut s'assurer qu'elle s'affiche automatiquement dans l'application. 

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

Sélectionnez le déclencheur  Affichage Ecran courant et l'action Agir sur un composant. 

Si votre source de données est interne via le fournisseur de données, sélectionnez-le au niveau du Projet et cliquez sur Rafraîchir les données.

Si votre source de données est externe, sélectionnez le composant HTTP et cliquez sur Lancer la requête.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed152faff0016aebac6/img-26566-1601563792-355375834.png

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