# Liste d’éléments 

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**

{% embed url="<https://youtu.be/Qf6u4-AQoiU>" %}

{% hint style="warning" %}
Au préalable, on [**prépare une liste**](https://doc.kis.work/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste) ("**vente-goodies**") dans laquelle se trouve des colonnes pour : le nom du produit, son prix, son image.
{% endhint %}

**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 liste "**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**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-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 liste qui accueille les photos, dans notre cas, "**image**".

**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 liste : "**produit**" et "**prix**".

{% hint style="success" %}
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.
{% endhint %}

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.