> 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 mises en page en grille ou en liste sur les pages des sites Experience.

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

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

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

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-129e7edb5009d5f0435a6c929250aedf0a0560a5%2FAvonni%20Components%204.2.webp?alt=media" alt=""><figcaption></figcaption></figure>

## Configuration

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

### 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="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-4b5f03164847513a8260fc000c24e2af481134d2%2F2024-02-04_15-01-30.png?alt=media" alt=""><figcaption></figcaption></figure>

| Type de source de données | Description                                                                          | Cas d’utilisation                                                       |
| ------------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| **Manuel**                | Saisissez manuellement les éléments de la liste.                                     | 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 les données Salesforce. | Adapté aux jeux de données dynamiques, en temps réel et volumineux.     |

### Mappage de 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** » pour sélectionner le champ que vous souhaitez afficher comme étiquette dans la Liste.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-e7372ae6827e9b93aa58582cbbe516f2bb7bdf78%2F2024-02-04_14-49-35.png?alt=media" 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 afin de fournir plus de contexte ou de détails pour chaque élément de la liste.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-fb365c5cb47037e83eb40f56a020fc71d8d35a0e%2F2024-02-04_14-52-53.png?alt=media" alt=""><figcaption></figcaption></figure>

### Séparateur d'élément

La fonctionnalité Séparateur d'élément est conçue pour améliorer la structure visuelle de votre liste en introduisant 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>Description</th></tr></thead><tbody><tr><td><strong>Aucun</strong></td><td>Le réglage par défaut — aucun séparateur entre les éléments.</td></tr><tr><td><strong>Haut</strong></td><td>Vous permet de placer un séparateur en haut de chaque élément de la liste.</td></tr><tr><td><strong>Bas</strong></td><td>Ajoute une ligne de séparation en bas de chaque élément de la liste.</td></tr><tr><td><strong>Autour</strong></td><td>Place des lignes de séparation au-dessus et au-dessous de chaque élément de la liste.</td></tr><tr><td><strong>Carte</strong></td><td>Place chaque élément de la liste dans son propre conteneur de type carte, séparé par des séparateurs.</td></tr></tbody></table>

### Variante

Le **Variante** définit le style de la liste : `Verticale` (par défaut — une liste verticale standard), `Horizontal` (une ligne d'éléments sur une seule ligne), ou `Liste à cocher` (chaque élément reçoit une case à cocher). **Surlignage au clic** met visuellement en évidence l'élément cliqué, **Afficher le nombre d'éléments** affiche un compteur à côté du titre de l'en-tête, et **Nom d’API** attribue au composant un identifiant unique pour le référencer.

### En-tête

Configurez l'en-tête de la liste avec un **Titre de l’en-tête** et **Légende de l’en-tête** — chacun avec son propre réglage **Style du texte du titre de l’en-tête** / **Style du texte de la légende de l’en-tête** (`Titre 1` à `Titre 4`, `Paragraphe 1` / `Paragraphe 2`) — un **Nom de l’icône de l’en-tête** et **Taille de l’icône de l’en-tête**, **L’en-tête est fusionné** pour aligner l'en-tête au ras du contenu ci-dessous, et **Actions de l’en-tête** pour ajouter des boutons d'action à l'en-tête.

### Avatar

**Attributs de l’avatar** personnalisez l'avatar affiché sur chaque élément — son **Variante** (`Carré` / `Cercle`), **Taille**, **Position**, **Nom de l'icône de secours**, **Présence** indicateur et sa position, ainsi que le formatage automatique des initiales.

### Liste à cocher

Lorsque le **Variante** est `Liste à cocher`, **attributs de la liste à cocher** ajoutez un **Afficher le compteur de cases cochées** (un décompte cochés/total) et **Barré lors de la validation** (biffe les éléments terminés).

### Mise en page

La fonctionnalité Options de mise en page dans le composant Avonni List offre la possibilité 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 disponibles de une à douze colonnes.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-91f0e8d9034a1775939b90cb3fbc70222eaa56a7%2F2024-02-07_21-24-47.png?alt=media" alt=""><figcaption></figcaption></figure>

En outre, le composant Avonni List offre une personnalisation avancée grâce à la possibilité de spécifier 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, en garantissant un affichage cohérent et convivial sur les écrans petits, moyens et grands.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-5197234c25a03a25d3fa660a9cd5d3943d983a31%2F2024-02-07_21-25-19.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

### Mise en page 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 mise en page et l'apparence du contenu de votre liste.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-2a1d8a6e39d786d58621bd74eb4f4e1ce11879ed%2F2024-02-07_21-27-15.png?alt=media" alt=""><figcaption></figcaption></figure>

**Ajuster la variante**

La propriété "variant" dans le composant de liste Avonni est utilisée pour modifier l'apparence de l'affichage des informations de champ. Voici les valeurs disponibles pour la propriété "variant", chacune avec son style unique.

1. **Standard**: C'est le réglage 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. **Libellé masqué**: Optez pour cette variante lorsque vous souhaitez un design minimaliste. L'étiquette n'est pas affichée, offrant un rendu plus épuré. C'est idéal pour les formulaires où le contexte ou le texte indicatif rend l'objectif du champ évident, ou lorsque l'espace est limité.
3. **Libellé en ligne**: Dans cette variante, l'étiquette est positionnée sur la même ligne que le champ, généralement à gauche. Cette mise en page 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 une conception de formulaire plus compacte.
4. **Libellé empilé**: Cette variante place l'étiquette directement au-dessus du champ. Lorsque le champ est sélectionné ou rempli, l'étiquette remonte. C'est un design moderne souvent utilisé dans les interfaces mobiles et les applications web, où il aide à économiser de l'espace vertical tout en conservant une esthétique propre et épurée.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-c015afb19a1e9e8069d04700a8e8863d292c5292%2F2024-02-07_21-28-52.png?alt=media" alt=""><figcaption></figcaption></figure>

### Image

Une image peut être ajoutée à n'importe quel élément. La section Attributs de l'image personnalise sa position, sa taille, son recadrage et une source de secours.

### Filtres

Le **Attributs du menu des filtres** section vous permet d'ajouter un menu de filtres. Chaque champ désigné comme filtre y est affiché, ce qui permet de garder la liste épurée et ciblée. **Type** choisit où les filtres apparaissent — `Horizontal` (par défaut) en haut, dans une `Fenêtre contextuelle` , ou dans une `Panneau` à côté de la liste (voir **Attributs du panneau latéral**) — et **Ordre de tri du filtre de liste de sélection**, **Utiliser les valeurs de liste de sélection de l’enregistrement** et **Utiliser des valeurs de filtre en cascade** contrôlez la façon dont les options de liste de sélection sont affichées.

Chaque filtre comporte également un opérateur, choisi dans un menu en haut du filtre. Les filtres texte, liste de sélection, liste de sélection à ընտրie multiple et recherche offrent `Égal à` (par défaut), `Différent de`, `Vide` et `Non vide`. Les filtres de nombre, de date et d’heure offrent `Entre` (par défaut), `Pas entre`, `Égal à`, `Différent de`, `Inférieur à`, `Inférieur ou égal à`, `Supérieur à`, `Supérieur ou égal à`, `Vide` et `Non vide`. `Vide` et `Non vide` n’acceptent aucune valeur, donc les champs de saisie du filtre sont masqués lorsque l’un ou l’autre est sélectionné. Les filtres case à cocher n’ont pas de menu d’opérateur.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-87a878b9fdb176b1e17531115e5a8d44e96717b0%2F2024-02-04_16-32-15.png?alt=media" alt=""><figcaption></figcaption></figure>

### Pagination

Le **Attributs de pagination** zone vous permet de diviser les longues listes en parties plus petites dans le composant Avonni List. Activez **Afficher la pagination** pour afficher les contrôles, définissez **Nombre d'éléments par page** (1 à 200), choisissez leur **Alignement** (`Gauche`, `Centre` ou `Droite`), et renommez ou remplacez l'icône des **Premier**, **Précédent**, **Suivant** et **Dernier** boutons. Cela facilite la gestion des listes volumineuses.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-16c0039db05e1631881c743560d2674fc042d7e5%2F2024-02-04_16-33-26.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Chargement des éléments.** Avec **Pagination** désactivé, la Liste charge **Nombre d'éléments par page** éléments à la fois derrière un **Afficher plus** bouton — ou, si vous définissez une **Hauteur** (style de taille), elle passe au **défilement infini** (chargement du lot suivant lorsque vous atteignez le bas). Avec **Pagination** activé, elle affiche une page de **Nombre d'éléments par page** éléments avec des contrôles de pagination.
{% endhint %}

### Recherche

Utilisez le **Champs de recherche** mappage pour définir quels champs du composant Liste doivent être recherchables, ce qui permet aux utilisateurs de localiser rapidement l'information nécessaire. Avec une **Requête** source, les champs derrière l'étiquette et la description de chaque élément sont également recherchés, en plus de ceux que vous indiquez ici.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-33aae961f323f2a9def80985090e123bdc413935%2F2024-02-04_16-37-32.png?alt=media" alt=""><figcaption></figcaption></figure>

**Activation de la recherche**: pour activer la fonction de recherche, ouvrez **Attributs du moteur de recherche** et activez le **Afficher la recherche** interrupteur. Cette action ajoutera une zone de recherche dans le composant Liste. Vous pouvez personnaliser cette fonctionnalité en modifiant le texte d'espace réservé et en ajustant la position de la zone de recherche selon vos besoins.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-0d14763d43a0356f3fa2af20510633221d0fe5a7%2F2024-02-04_16-38-23.png?alt=media" alt=""><figcaption></figcaption></figure>

**Définition du texte d'espace réservé**: Personnalisez la barre de recherche en ajoutant un texte d'espace réservé pour guider les utilisateurs.

**Positionnement de la barre de recherche**: Utilisez le **Position** paramètre pour définir l'emplacement de la barre de recherche. Les options incluent `Gauche`, `Droite`, `Centre`, `Remplissage` et `Panneau` — `Panneau` déplace la zone de recherche dans le panneau latéral à côté de la liste, configuré sous **Attributs du panneau latéral**.

### Tri

**Attributs de tri** permettent aux utilisateurs de réorganiser la liste. Activez **Triable** pour activer la réorganisation par glisser-déposer, choisissez un **Nom de l'icône de tri** et un **Position de l'icône de tri** (`Gauche` ou `Droite`) pour la poignée de déplacement, et activez **Afficher la valeur de tri** pour afficher le tri actuel. **Lors de la réorganisation** définit l'interaction qui s'exécute après le déplacement d'un élément — utilisez-la avec **Mettre à jour l'ordre des enregistrements** pour enregistrer le nouvel ordre dans Salesforce.

### Panneau latéral

**Attributs du panneau latéral** configurez le panneau que la Liste peut afficher à côté de ses éléments. Le panneau n'apparaît qu'une fois que la recherche ou le menu de filtres y est placé — définissez **Position** à `Panneau` dans **Attributs du moteur de recherche**, ou **Type** à `Panneau` dans **Attributs du menu des filtres**.

* **Position**: de quel côté se trouve le panneau, `Gauche` (par défaut) ou `Droite`.
* **Fermé par défaut**: démarre le panneau réduit. Désactivé par défaut.
* **Masquer le bouton de bascule**: supprime le bouton d'en-tête avec lequel les utilisateurs ouvrent et ferment le panneau. Désactivé par défaut.
* **Libellé du bouton de réinitialisation**: l'étiquette du bouton qui efface toutes les sélections de filtres. `Tout effacer` par défaut.

### Message d’absence de résultats

**Message d’absence de résultats** remplace l'état vide par défaut par votre propre texte lorsqu'aucun élément ne correspond à la recherche ou aux filtres — ou lorsque la source de données ne renvoie absolument rien. **Attributs du message d’absence de résultats** contrôle ce que l'état vide affiche : **Masquer l’image d’absence de résultats** supprime l’illustration et **Masquer le message d’absence de résultats** supprime le texte. Les deux sont désactivés par défaut.

## Interactions

Le «**section Lors du clic**» vous permet de définir ce qui se passera lorsque les utilisateurs interagissent avec le composant de liste en cliquant sur un élément.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-636ae845c1135e2af7fd51abb2f2ccd09729e126%2F2024-02-04_20-37-16.png?alt=media" 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 la 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)
* [Ouvrir le panneau Flow](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-panel.md)
* [Exécuter le Flow](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/execute-flow.md)
* [Télécharger](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/download.md)

Explorez chaque section pour obtenir des informations sur la configuration de ces fonctionnalités et l'amélioration de l'interactivité pour vos utilisateurs finaux dans le composant Avonni Liste.

## Style

Le composant Avonni Liste pour les sites Experience Cloud offre de vastes options de personnalisation de son apparence, vous permettant de l'aligner parfaitement avec l'esthétique de votre site.

{% tabs %}
{% tab title="Bordure" %}
Ajustez l'épaisseur, le style et la couleur de la bordure pour définir ou mettre en valeur les limites de la liste.
{% endtab %}

{% tab title="Taille" %}
Personnalisez la taille globale de la liste, y compris la largeur et la hauteur, pour l'adapter à votre mise en page.
{% endtab %}

{% tab title="Espacement" %}
Contrôlez l'espace entre les éléments de la liste, les en-têtes et le corps de la liste pour améliorer la lisibilité et l'attrait visuel.
{% endtab %}

{% tab title="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.
{% endtab %}

{% tab title="Titre de l’en-tête" %}
Personnalisez la police, la taille et la couleur du titre pour le faire ressortir ou l'aligner avec le thème de votre site.
{% endtab %}

{% tab title="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.
{% endtab %}

{% tab title="Avatar de l’en-tête" %}
Incluez et stylisez un avatar ou une image dans l'en-tête pour une représentation visuelle ou pour votre identité de marque.
{% endtab %}

{% tab title="Élément" %}
Ajustez l'apparence des éléments individuels de la liste, y compris l'arrière-plan, l'alignement et l'espacement.
{% endtab %}

{% tab title="Alignement vertical de l'élément" %}
Contrôlez l'alignement vertical des éléments de la liste pour un rendu cohérent et soigné.
{% endtab %}

{% tab title="En-tête de l'élément" %}
Personnalisez l'apparence des en-têtes d'éléments dans la liste pour une segmentation claire et une meilleure lisibilité.
{% endtab %}

{% tab title="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 visuellement attrayante.
{% endtab %}

{% tab title="Arrière-plan de l'élément" %}
Définissez la couleur ou l'image d'arrière-plan des éléments de la liste afin de différencier ou mettre en évidence des entrées individuelles.
{% endtab %}

{% tab title="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.
{% endtab %}

{% tab title="Valeur des champs de l'élément" %}
Personnalisez la présentation des valeurs des champs pour une représentation claire des données.
{% endtab %}

{% tab title="Étiquette des champs de l'élément" %}
Stylisez les étiquettes des champs pour les distinguer des valeurs et améliorer la lisibilité.
{% endtab %}

{% tab title="Boutons de pagination" %}
Stylisez les boutons de pagination pour naviguer dans la liste, en veillant à ce qu'ils soient faciles à utiliser et qu'ils s'harmonisent avec l'esthétique de votre site.
{% endtab %}

{% tab title="Pied de page" %}
Personnalisez la section de pied de page pour des informations ou des actions supplémentaires liées à la liste, en veillant à ce qu'elle complète le design global.
{% endtab %}

{% tab title="Panneau des filtres" %}
Met en forme le panneau latéral qui contient les filtres et la recherche.

* **Panneau des filtres :** Couleur d’arrière-plan / couleur de bordure / taille de bordure / style de bordure / rayon de bordure.
* **Libellés du panneau des filtres :** Arrière-plan / arrière-plan actif / arrière-plan au survol ; couleur de l’icône de réduction ; couleur / couleur active / couleur au survol ; taille de police / graisse de police.
* **Options du panneau des filtres :** Couleur ; couleur de bordure de la case à cocher ; couleur du texte du bouton Charger plus / couleur du texte actif / couleur du texte au survol.
* **Bouton de réinitialisation du panneau des filtres :** Couleur d'arrière-plan / Couleur du texte / Couleur de la bordure / Taille de la bordure / Rayon de bordure.
  {% endtab %}
  {% endtabs %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-list.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.