Liste d’éléments

Ce composant permet de présenter une série d'éléments sous forme de cartes organisées, facilitant l'affichage de données de manière claire.

Pour ce tuto, nous allons prendre l'exemple d'une organisation qui souhaite vendre des goodies. La liste d'éléments va permettre de présenter ces produits dérivés, les montrer et communiquer leurs prix.

Édition de la Liste d'éléments

Au préalable, on prépare une table de données ("vente-goodies") dans laquelle se trouve des colonnes pour : le nom du produit, son prix, son image.

1 - Dans notre page, on ajoute un container vide. Puis on vient glisser-déposer le composant Liste d'éléments à l'intérieur du container vide.

2 - Dans Données, on ajoute une nouvelle source (ici, on l'appellera Vente Goodies) qu'on relie à notre table de données "vente-goodies".

3 - Dans Texte large, on donne un titre à notre future liste d'éléments. Dans notre cas, ce sera Nos Goodies.

4 - Pour illustrer les éléments, on va ajouter des données dynamiques. Dans le champ Image de la carte, on clique sur l'icône de Sélection (les deux petits rectangles).

Ensuite, on sélectionne notre source de données (Vente Goodies) puis la colonne de notre table de données qui accueille les photos, dans notre cas, "image-produit".

5 - Maintenant, dans Liste des éléments, on définit le nombre de champ que l'on souhaite voir apparaître sur chaque carte.

Dans notre exemple, nous voulons voir le nom du produit et son prix. On relie donc les deux champs à leur colonne correspondante de la table de données : "produit" et "prix".

Si vous le souhaitez, vous pouvez renseigner manuellement le Titre de l'élément qui apparaîtra sur toutes les cartes. Mais, contrairement à l'usage des données dynamiques, ce titre ne sera pas mis à jour en même temps que votre base de données.

6 - Il est également possible de créer des Liens vers d'autres pages. Dans notre cas, on peut ajouter un bouton "Acheter" qui apparaîtra sur chaque carte et qui renverra directement sur une page Boutique.

7 - Maintenant, allons voir le résultat côté utilisateur. On retrouve tous nos produits avec leurs photos, leurs noms et leurs prix. Et le bouton lié à la page Boutique est bien présent dans chaque carte.