# 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="" %} {% hint style="warning" %} Au préalable, on [**prépare une liste**](/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste.md) ("**vente-goodies**") dans laquelle se trouve des colonnes pour : le nom du produit, son prix, son image. {% endhint %} **1 -** Depuis **Composants**, on vient glisser-déposer la **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**](/documentation/guide-de-demarrage/donnees-dynamiques.md). 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc.kis.work/documentation/composants/liste-delements.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.