Collection / Liste

Le composant Collection / Liste se connecte à 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, celle-ci peut être interne (via la base de données PandaSuite, un autre composant...) ou externe (via le composant HTTP).

Choisir la source

Votre composant Collection / Liste est obligatoirement associé à une source de données. Vous pouvez connecter n'importe quelle source de données qui expose un tableau ou une collection.

Cliquez sur Source et sélectionnez votre source de données :  

  • Pour connecter une base de données PandaSuite, choisissez Depuis une base de données.
  • Pour connecter un service externe (par exemple Airtable), choisissez Depuis un composant > HTTP.

Créer un élément de liste

Votre composant Collection / Liste n'affiche rien par défaut : vous devez créer le gabarit d'un élément de liste qui sera répété à partir de vos données. 

Vous pouvez choisir n'importe quel design. Double-cliquez sur le composant. Insérez à l'intérieur un composant Groupe. Ajustez sa taille et à l’intérieur, représentez visuellement un élément de liste.

N'oubliez pas de connecter chaque objet avec sa source de données : Titre, Image, etc...

💡 Découvrez un cas concret d'utilisation du composant Collection / Liste :  Afficher une collection depuis Airtable

Personnaliser l'affichage

Personnalisez l'affichage de votre collection depuis les propriétés de votre composant.

Choisissez la direction dans laquelle vos données vont s'afficher : Horizontal ou Vertical.

L'option Adapter les enfants permet d'autoriser les éléments à être disposés sur plusieurs lignes avec un retour automatique.

Ajoutez une marge entre vos éléments. 

Vous pouvez également autoriser ou non le défilement utilisateur, afficher une barre de défilement et maintenir la position du défilement lorsque l'utilisateur revient sur cet écran. 

Trier et filtrer

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

Pour en savoir plus : Filtrer une collection, Trier une collection

Conditions d'affichage

Vous pouvez choisir d'afficher tel ou tel gabarit en fonction d'une condition. 

Préparez vos différents gabarits dans votre composant Collection et créez une condition

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