> 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 des enregistrements Salesforce sous forme de cartes personnalisables dans des dispositions 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, cas, contrats ou toute autre donnée associée — avec un contrôle total sur les champs affichés 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. Parfait pour l’historique des commandes clients, les listes de cas, les bibliothèques de documents, les catalogues de produits ou partout où les utilisateurs du portail doivent parcourir et rechercher dans 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 %}
## Configuration Comprendre le processus de configuration, en particulier les sections Source de données et Mappages, est essentiel pour utiliser la liste efficacement. ### Source de données La section Source de données est l’endroit où vous connectez la liste Avonni à vos données Salesforce. Vous avez deux options de source de données.
| Type de source de données | Description | Cas d’utilisation | | ------------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | | **Manuel** | Saisissez manuellement les éléments de la liste. | Idéal pour des données non dynamiques, des tests et des 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 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 bouton « **Ajouter des colonnes** » pour sélectionner le champ que vous souhaitez afficher comme libellé dans la liste.
* 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 plus de contexte ou de détails à chaque élément de la liste.
### Séparateur d’éléments La fonctionnalité Séparateur d’éléments 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.
SéparateurDescription
HautPermet de placer un séparateur en haut de chaque élément de la liste.
BasAjoute une ligne de séparation en bas de chaque élément de la liste.
AutourPlace des lignes de séparation à la fois au-dessus et en dessous de chaque élément de la liste.
CartePlace chaque élément de la liste dans son propre conteneur de type carte, séparé par des séparateurs.
### Variante La **Variante** définit le style de la liste : `de base` (une liste verticale standard), `sur une seule ligne` (une ligne horizontale d’éléments), ou `liste de cases à cocher` (chaque élément reçoit une case à cocher). **Mettre en surbrillance au clic** met visuellement en évidence l’élément cliqué, et **Nom de l'API** donne au composant un identifiant unique pour y faire référence. ### En-tête Configurez l’en-tête de la liste avec un **Titre** et **Légende** (et leurs styles de texte), un en-tête **Nom de l'icône** et **Taille de l’icône**, **Afficher le nombre d’éléments** pour afficher un compteur à côté du titre, **En-tête joint** pour aligner l’en-tête au plus près du contenu ci-dessous, et **Actions de l'en-tête** pour ajouter des boutons d’action à l’en-tête. ### Avatar **Attributs d’avatar** personnaliser l’avatar affiché sur chaque élément — sa **Variante** (cercle/carré), **Taille**, **Position**, **Nom de l'icône de secours**, **Présence** indicateur et sa position, ainsi que le formatage automatique des initiales. ### Liste de cases à cocher Lorsque le **Variante** est `liste de cases à cocher`, **Attributs de la liste de cases à cocher** ajoutez un **Afficher le compteur de coches** (un décompte cochés/total) et **Barré lors de la coche** (barre les éléments terminés). ### Mise en page 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 lequel les données doivent être organisées, avec des options allant d’une à douze colonnes.
De plus, le composant Liste Avonni offre une personnalisation avancée grâce à la possibilité de spécifier des configurations de colonnes en fonction de la taille de l’é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.
### 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.
**Ajustez la variante** La propriété « variant » dans le composant liste Avonni est utilisée pour 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ù le libellé est affiché au-dessus du champ. C’est une disposition classique et largement utilisée, offrant une séparation claire entre le libellé et le contenu du champ. 2. **Libellé masqué** : Optez pour cette variante lorsque vous souhaitez un design minimaliste. Le libellé n’est pas affiché, ce qui offre un rendu plus épuré. C’est idéal pour les formulaires où le contexte ou le texte de remplacement rend le but du champ évident, ou lorsque l’espace est limité. 3. **Libellé en ligne** : Dans cette variante, le libellé est positionné sur la même ligne que le champ, généralement à gauche. Cette disposition économe en espace fonctionne bien dans les formulaires où l’espace horizontal est plus abondant que l’espace vertical. Elle est aussi utile lorsque vous souhaitez obtenir une conception de formulaire plus compacte. 4. **Libellé empilé** : Cette variante place le libellé directement au-dessus du champ. Lorsque le champ est sélectionné ou rempli, le libellé remonte. 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.
### Image Une image peut être ajoutée à n’importe quel élément. La section Attributs de l’image personnalise sa position, sa taille, son ajustement de recadrage et une source de remplacement. ### Filtres L’**`Option de filtrage`** » vous permet d’ajouter un menu de filtre. Lorsque cette fonctionnalité est activée, tous les champs désignés comme filtres s’afficheront dans cette infobulle, gardant la liste épurée et focalisée.
### 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 combien d’éléments sont affichés sur chaque page et l’apparence des contrôles. Cela facilite la gestion des listes volumineuses.
{% hint style="info" %} **Chargement des éléments.** Avec **Pagination** désactivé, la liste charge **Nombre d’éléments par page** des é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 à mesure que 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 l’attribut « Champs de recherche » pour définir quels champs du composant Liste doivent être recherchables, ce qui permet aux utilisateurs de localiser rapidement les informations nécessaires.
**Activation de la recherche** : Pour activer la fonctionnalité de recherche, accédez à la section Search 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 d’espace réservé et en ajustant la position de la zone de recherche selon vos besoins.
**Définir le texte d’espace réservé** : Personnalisez la barre de recherche en ajoutant un texte d’espace réservé pour guider les utilisateurs. **Positionner la barre de recherche** : Utilisez l’attribut de position pour définir l’emplacement de la barre de recherche. Les options incluent : gauche, droite, centre et plein. ## Interactions L’**Section Au clic** » vous permet de définir ce qui se passera lorsque les utilisateurs interagiront avec le composant de liste en cliquant sur un élément.
Voici les interactions disponibles pour le composant Liste : * [Afficher une notification](/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 la 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 du flux](/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 l’amélioration de l’interactivité pour vos utilisateurs finaux dans le composant Avonni List. ## Style Le composant Liste Avonni pour les sites Experience Cloud offre des options de personnalisation complètes pour 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" %} Stylez la section d’en-tête, y compris le titre, le sous-titre 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" %} Stylez le sous-titre sous le titre de l’en-tête pour fournir une description concise ou un contexte sur la liste. {% endtab %} {% tab title="Avatar d’en-tête" %} Incluez et stylisez un avatar ou une image dans l’en-tête pour une représentation visuelle ou une 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ément dans la liste pour une segmentation claire et une meilleure lisibilité. {% endtab %} {% tab title="Description de l’élément" %} Stylez le texte de description de l’élément pour 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 pour différencier ou mettre en valeur certaines entrées. {% endtab %} {% tab title="Champs de l’élément" %} Stylez 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="Libellé des champs de l’élément" %} Stylez les libellés des champs pour les distinguer des valeurs et améliorer la lisibilité. {% endtab %} {% tab title="Boutons de pagination" %} Stylez les boutons de pagination pour parcourir la liste, en veillant à ce qu’ils soient faciles à utiliser et qu’ils correspondent à l’esthétique de votre site. {% endtab %} {% tab title="Pied de page" %} Personnalisez la section de pied de page pour obtenir des informations ou des actions supplémentaires liées à la liste, en veillant à ce qu’elle complète le design global. {% 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-list.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.