> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-list.md).

# AX - Liste

## Aperçu

**AX - Liste** est un composant Experience Cloud qui affiche les enregistrements Salesforce sous forme de cartes personnalisables dans des dispositions en grille ou en liste sur les pages Experience Sites.

Utilisez-le pour afficher aux utilisateurs du portail des ensembles d'enregistrements filtrés — comme leurs commandes, leurs cas, leurs contrats ou toute autre donnée associée — en contrôlant entièrement les champs qui apparaissent sur chaque carte. Les utilisateurs peuvent rechercher, filtrer, parcourir les résultats par pagination et cliquer sur les cartes pour accéder aux enregistrements. Récupérez des données à partir de n'importe quel objet standard ou personnalisé dans Experience Builder.

Idéal pour l'historique des commandes clients, les listes de cas, les bibliothèques de documents, les catalogues de produits ou tout autre endroit où les utilisateurs du portail doivent parcourir et rechercher leurs enregistrements Salesforce.

{% hint style="success" %}
La liste Avonni est un [Composant de données réactif](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md)
{% endhint %}

<figure><img src="/files/f1acc105d87d07085467417eb9741dcd964c0b28" alt=""><figcaption></figcaption></figure>

## Configuration de la liste

Comprendre le processus de configuration, en particulier les sections Source de données et Mappages, est essentiel pour utiliser la Liste efficacement.

### Configuration de la source de données

La section Source de données est l'endroit où vous connectez la liste Avonni à vos données Salesforce. Vous disposez de deux options de source de données.

<figure><img src="/files/75c0882a4c5e98c12756be6b3c7d253a869601ec" alt=""><figcaption></figcaption></figure>

| Type de source de données      | Description                                                                          | Cas d’utilisation                                                       |
| ------------------------------ | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| **Source de données manuelle** | Saisissez manuellement la liste dans le tableau de données.                          | Idéal pour les données non dynamiques, les tests et les démonstrations. |
| **Requête**                    | Créez une requête pour remplir automatiquement la Liste avec des données Salesforce. | Adapté aux jeux de données dynamiques, en temps réel et volumineux.     |

### Configuration du mappage des données

Vous donnez vie à votre liste dans la section Mappages de données en la définissant et en la personnalisant.

* Cliquez sur le «**Ajouter des colonnes**» bouton pour sélectionner le champ que vous souhaitez afficher comme étiquette dans la Liste.

<figure><img src="/files/40c44088e91d85bcf66437e174d0852bb2950c31" alt=""><figcaption></figcaption></figure>

* Ensuite, vous pouvez intégrer des éléments supplémentaires à côté de vos données principales. Cela peut inclure des composants visuels comme des images, des avatars, ou même des champs supplémentaires pour fournir davantage de contexte ou de détails à chaque élément de la liste.

<figure><img src="/files/3a7f369919dd12565692cd143036fa21bf517868" alt=""><figcaption></figcaption></figure>

### Configuration de l'apparence

#### Configuration du séparateur d'éléments

La fonctionnalité de séparateur d'éléments est conçue pour améliorer la structure visuelle de votre liste en insérant des séparateurs entre les éléments. Cet attribut vous permet de personnaliser la manière dont chaque élément de la liste est séparé des autres.

<table><thead><tr><th width="125.33333333333331">Séparateur</th><th width="309">Description</th><th>Illustration</th></tr></thead><tbody><tr><td><strong>Haut</strong></td><td>Vous permet de placer un séparateur en haut de chaque élément de la liste.</td><td><img src="/files/b634a35bceff4f21fb8e50b554db87b433e1625a" alt=""></td></tr><tr><td><strong>Bas</strong></td><td>Ajoute une ligne de séparation en bas de chaque élément de liste.</td><td><img src="/files/69df69e4939741586ef67872b9012fbef95bd9c0" alt=""></td></tr><tr><td><strong>Tout autour</strong></td><td>Place des lignes de séparation au-dessus et en dessous de chaque élément de la liste.</td><td><img src="/files/7416626252dc9e4a2e76cca8e86dec8409c04277" alt=""></td></tr><tr><td><strong>Carte</strong></td><td>Place chaque élément de liste dans son propre conteneur de type carte, séparé par des séparateurs.</td><td><img src="/files/f1efd642c5597eeccf9bbdd0c0a156853809e13e" alt=""></td></tr></tbody></table>

#### Options de disposition

La fonctionnalité Options de disposition du composant Liste Avonni permet de définir la présentation des données dans la liste. Cela se fait en sélectionnant le nombre de colonnes souhaité dans lesquelles les données doivent être organisées, avec des options allant d'une à douze colonnes.

<figure><img src="/files/b3da642fb217f9558d9557dbf6985c1b89a12ec5" alt=""><figcaption></figcaption></figure>

De plus, le composant Liste Avonni offre une personnalisation avancée grâce à la possibilité de définir des configurations de colonnes en fonction de la taille d'écran du conteneur. Cette fonctionnalité permet d'ajuster précisément l'apparence de la liste sur différents appareils, garantissant un affichage cohérent et convivial sur les petits, moyens et grands écrans.

<figure><img src="/files/7b8fda42f69cc6395839d4b31a0b3770087d280e" alt="" width="375"><figcaption></figcaption></figure>

#### Options de disposition des champs

La section Attributs des champs vous permet de définir le nombre de colonnes que chaque champ occupera dans le conteneur, vous offrant un contrôle granulaire sur la disposition et l'apparence du contenu de votre liste.

<figure><img src="/files/ecbbd0d77e7b0c58484b512fafc636ba5c74a7d9" alt=""><figcaption></figcaption></figure>

**Ajustez la variante**

La propriété « variant » dans le composant liste Avonni sert à modifier l'apparence de l'affichage des informations des champs. Voici les valeurs disponibles pour la propriété « variant », chacune avec son style unique.

1. **Standard**: Il s'agit du paramètre par défaut, où l'étiquette est affichée au-dessus du champ. C'est une mise en page classique et largement utilisée, offrant une séparation claire entre l'étiquette et le contenu du champ.
2. **Étiquette masquée**: Optez pour cette variante lorsque vous souhaitez un design minimaliste. L'étiquette n'est pas affichée, offrant un aspect plus épuré. C'est idéal pour les formulaires où le contexte ou le texte de remplacement rend la fonction du champ évidente, ou lorsque l'espace est limité.
3. **Étiquette en ligne**: Dans cette variante, l'étiquette est positionnée sur la même ligne que le champ, généralement à gauche. Cette disposition peu gourmande en espace fonctionne bien dans les formulaires où l'espace horizontal est plus abondant que l'espace vertical. Elle est également utile lorsque vous souhaitez obtenir un design de formulaire plus compact.
4. **Étiquette empilée**: Dans cette variante, l'étiquette est placée directement au-dessus du champ. Lorsque le champ est sélectionné ou rempli, l'étiquette se déplace vers le haut. C'est un design moderne souvent utilisé dans les interfaces mobiles et les applications web, où il aide à économiser de l'espace vertical et à conserver une esthétique propre et épurée.

<figure><img src="/files/3bb35d4db8b827c8c7571c0f3b836f6455f191c9" alt=""><figcaption></figcaption></figure>

#### Options d'image

## Autres paramètres

### Filtres

La «**`Option de filtrage`**» vous permet d'ajouter un menu de filtres. Lorsque cette fonctionnalité est activée, tous les champs désignés comme filtres s'afficheront dans cette fenêtre contextuelle, ce qui permettra de garder la liste épurée et ciblée.

<figure><img src="/files/79e1ca0eff518ac531a6fe12a3b6e94eeef8bd33" alt=""><figcaption></figcaption></figure>

### Pagination

La zone « Options de pagination » vous permet de diviser les longues listes en parties plus petites dans le composant Liste Avonni. Vous pouvez choisir le nombre d'éléments affichés sur chaque page et l'apparence des contrôles. Cela facilite la gestion des listes volumineuses.

<figure><img src="/files/80ca7035cbae7a48cbe4d2a8b7bcbf0ef34ee148" alt=""><figcaption></figcaption></figure>

### Recherche

Utilisez l'attribut « Champs de recherche » pour définir quels champs du composant Liste doivent être recherchables, permettant ainsi aux utilisateurs de localiser rapidement les informations nécessaires.

<figure><img src="/files/83526be38c60fadd5321f64ccead25249e24f388" alt=""><figcaption></figcaption></figure>

**Activation de la recherche**: Pour activer la fonctionnalité de recherche, accédez à la section Recherche et activez le bouton bascule « Afficher la recherche ». Cette action ajoutera une zone de recherche dans le composant Liste. Vous pouvez personnaliser cette fonctionnalité en modifiant le texte de remplacement et en ajustant la position de la zone de recherche selon vos besoins.

<figure><img src="/files/0a103cd60f63e02e19ab51053d07429be9802920" alt=""><figcaption></figcaption></figure>

**Définition du texte de remplacement**: Personnalisez la barre de recherche en ajoutant un texte de remplacement pour guider les utilisateurs.

**Positionnement de la barre de recherche**: Utilisez l'attribut position pour définir l'emplacement de la barre de recherche. Les options incluent :

## Interactions

La «**Section Au clic**» vous permet de définir ce qui se produira lorsque les utilisateurs interagiront avec le composant liste en cliquant sur un élément.

<figure><img src="/files/65efd26bda53cd4f7ce5180a93af67693f94c35b" alt=""><figcaption></figcaption></figure>

Voici les interactions disponibles pour le composant Liste :

* [Afficher un toast](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/show-toast.md)
* [Naviguer](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md)
* [Ouvrir une fenêtre modale d’alerte](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md)
* [Ouvrir une confirmation](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-confirm.md)
* [Ouvrir la boîte de dialogue Flow](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md)

Explorez chaque section pour obtenir des informations sur la configuration de ces fonctionnalités et améliorer l'interactivité pour vos utilisateurs finaux au sein du composant Liste Avonni.

## Apparence du style

Le composant Liste Avonni pour Experience Cloud Sites offre des options complètes de personnalisation de son apparence, vous permettant de l'harmoniser parfaitement avec l'esthétique de votre site.

Voici les attributs de style disponibles pour la personnalisation dans la Liste Avonni :

1. **Bordure :** Ajustez l'épaisseur, le style et la couleur de la bordure pour définir ou mettre en valeur les limites de la liste.
2. **Taille :** Personnalisez la taille globale de la liste, y compris sa largeur et sa hauteur, pour l'adapter à votre disposition.
3. **Espacement :** Contrôlez l'espace entre les éléments de liste, les en-têtes et le corps de la liste pour améliorer la lisibilité et l'attrait visuel.
4. **En-tête :** Stylisez la section d'en-tête, y compris le titre, la légende et les avatars, pour la rendre visuellement distincte et informative.
5. **Titre de l’en-tête :** Personnalisez la police, la taille et la couleur du titre pour le faire ressortir ou l'harmoniser avec le thème de votre site.
6. **Légende de l’en-tête :** Stylisez la légende sous le titre de l'en-tête pour fournir une description concise ou un contexte sur la liste.
7. **Avatar de l’en-tête :** Ajoutez et stylisez un avatar ou une image dans l'en-tête pour une représentation visuelle ou une image de marque.
8. **Élément :** Ajustez l'apparence des éléments de liste individuels, y compris l'arrière-plan, l'alignement et l'espacement.
9. **Alignement vertical de l’élément :** Contrôlez l'alignement vertical des éléments de liste pour un rendu cohérent et soigné.
10. **En-tête de l’élément :** Personnalisez l'apparence des en-têtes d'élément dans la liste pour une segmentation claire et une meilleure lisibilité.
11. **Description de l’élément :** Stylisez le texte de description de l'élément afin de fournir des informations détaillées de manière attrayante.
12. **Arrière-plan de l’élément :** Définissez la couleur ou l'image d'arrière-plan des éléments de liste pour différencier ou mettre en valeur des entrées individuelles.
13. **Champs de l’élément :** Stylisez les champs de chaque élément, par exemple en modifiant la police ou la couleur, pour plus de clarté et une hiérarchie visuelle.
14. **Valeur des champs de l’élément :** Personnalisez la présentation des valeurs des champs pour une représentation claire des données.
15. **Étiquette des champs de l’élément :** Stylisez les étiquettes des champs pour les distinguer des valeurs et améliorer la lisibilité.
16. **Boutons de pagination :** Stylisez les boutons de pagination pour naviguer dans la liste, en veillant à ce qu'ils soient conviviaux et qu'ils correspondent à l'esthétique de votre site.
17. **Pied de page :** Personnalisez la section du pied de page pour des informations ou des actions supplémentaires liées à la liste, en veillant à ce qu'elle complète la conception globale.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-list.md?ask=<question>
```

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.