# AX - Liste

## Vue d’ensemble

**AX - Liste** est un composant Experience Cloud qui affiche les enregistrements Salesforce sous forme de cartes personnalisables, en disposition grille ou 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 affichés sur chaque carte. Les utilisateurs peuvent rechercher, filtrer, paginer dans les résultats et cliquer sur les cartes pour accéder aux enregistrements. Récupérez des données depuis n’importe quel objet standard ou personnalisé dans Experience Builder.

Idéal pour l’historique des commandes clients, les listes de dossiers, les bibliothèques de documents, les catalogues de produits, ou partout où les utilisateurs du portail ont besoin de parcourir et rechercher leurs enregistrements Salesforce.

{% hint style="success" %}
La liste Avonni est un [Composant de données réactif](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/demarrage/composants-reactifs)
{% endhint %}

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fpt2IfBa0lYKIcPqkp9r4%2FAvonni%20Components%204.2.webp?alt=media&#x26;token=bfa921dd-9ffe-457d-a418-9bd6afe5a723" 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 efficacement la Liste.

### 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="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbPNBH8BWbxiRQWP0nvC2%2F2024-02-04_15-01-30.png?alt=media&#x26;token=6d86abef-43ac-4b13-8490-d197f0fc154f" 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 les données Salesforce. | Adapté aux jeux de données dynamiques, en temps réel et volumineux.     |

### Configuration des mappages 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 bouton '**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%2FsuXTMbmTsztyn3eSA11F%2F2024-02-04_14-49-35.png?alt=media&#x26;token=0b2c9073-24b6-477d-bbdd-d32f7987f043" 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 plus de contexte ou de détails à 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%2Fc32Ky8kXM5Bec7yYKlV1%2F2024-02-04_14-52-53.png?alt=media&#x26;token=a9b956a2-f67f-4f5e-bdcc-f389ada8ecd7" alt=""><figcaption></figcaption></figure>

### Configuration de l’apparence

#### Configuration du 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.

<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="broken-reference" alt=""></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><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>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="broken-reference" alt=""></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 lignes de séparation.</td><td><img src="broken-reference" alt=""></td></tr></tbody></table>

#### Options de mise en page

La fonctionnalité Options de mise en page 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 de une à douze colonnes.&#x20;

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUF0NVgdHNfCVLdEPeKIr%2F2024-02-07_21-24-47.png?alt=media&#x26;token=aa9fb4b6-7f17-402b-a6f5-1a00a4c751d8" alt=""><figcaption></figcaption></figure>

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 écrans petits, moyens et grands.&#x20;

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3dTwkrWEQzbdIGV6TwHa%2F2024-02-07_21-25-19.png?alt=media&#x26;token=48d5c695-2f82-487e-bc3a-f08a81169fc7" alt="" width="375"><figcaption></figcaption></figure>

#### Options de 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 donnant un contrôle granulaire sur la mise en page et l’apparence du contenu de votre liste.&#x20;

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrerSxvfhSCDCOBOF6uAp%2F2024-02-07_21-27-15.png?alt=media&#x26;token=e7ecb311-fd51-4271-b601-b45a2fa7d809" alt=""><figcaption></figcaption></figure>

**Ajuster 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ù l’étiquette est affichée au-dessus du champ. C’est une disposition 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, ce qui offre un rendu plus épuré. C’est idéal pour les formulaires où le contexte ou le texte de remplacement rend la finalité 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 économe en espace fonctionne bien dans les formulaires où l’espace horizontal est plus important que l’espace vertical. Elle est aussi utile lorsque vous souhaitez obtenir un design de formulaire plus compact.
4. **Étiquette empilée**: 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%2FHsOhZBf72KG2HfCgthFE%2F2024-02-07_21-28-52.png?alt=media&#x26;token=96b20a77-af03-43c8-9acb-5b09db482cd0" alt=""><figcaption></figcaption></figure>

#### Options d’image

## Autres paramètres

### Filtres

L’**`option de filtrage`**&#x76;ous permet d’ajouter un menu de filtrage. Lorsque cette fonctionnalité est activée, tous les champs définis comme filtres seront affichés dans ce popover, ce qui garde la liste épurée et ciblée.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5az4m93BFO7sn6RyKV0d%2F2024-02-04_16-32-15.png?alt=media&#x26;token=87feb3fb-af0e-4547-a17a-dbc7295ee9c8" alt=""><figcaption></figcaption></figure>

### Pagination

La zone "Options de pagination" vous permet de découper 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 à quoi ressemblent les contrôles. 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%2FzeK9JTrAHa50bc1g2xJV%2F2024-02-04_16-33-26.png?alt=media&#x26;token=e1518494-b96c-44b7-860e-dfdd62a3eb52" 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.&#x20;

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F06qOPZmtykLJ5oDM6MBC%2F2024-02-04_16-37-32.png?alt=media&#x26;token=2010499d-9896-4ab4-9fc4-76e33e9e006b" alt=""><figcaption></figcaption></figure>

**Activation de la recherche**: Pour activer la fonction 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="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIaNqX8MljJ6BiCs2dVfY%2F2024-02-04_16-38-23.png?alt=media&#x26;token=d4d4509a-054f-4864-9b6e-ffc876e413d7" alt=""><figcaption></figcaption></figure>

**Définir le 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 de position pour définir l’emplacement de la barre de recherche. Les options incluent :

## 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.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FgU5pBJZqt1tHVmeY8EPp%2F2024-02-04_20-37-16.png?alt=media&#x26;token=1929d1aa-7c5a-42dc-84b5-81459adb889a" alt=""><figcaption></figcaption></figure>

Voici les interactions disponibles pour le composant Liste :

* [Afficher un toast](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/afficher-un-toast)
* [Naviguer](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/naviguer)
* [Ouvrir une fenêtre modale d’alerte](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/ouvrir-la-fenetre-modale-dalerte)
* [Ouvrir une confirmation](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/ouvrir-la-confirmation)
* [Ouvrir une boîte de dialogue Flow](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/ouvrir-la-boite-de-dialogue-de-flux)

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

## Apparence de style

Le composant Liste Avonni pour Experience Cloud Sites offre des options complètes de personnalisation de son apparence, vous permettant de l’aligner parfaitement avec l’esthétique de votre site.&#x20;

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 la largeur et la hauteur, pour l’adapter à votre mise en page.
3. **Espacement :** Contrôlez l’espace entre les éléments de la liste, les en-têtes et le corps de la liste afin d’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’aligner 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 :** Incluez et stylisez un avatar ou une image dans l’en-tête pour une représentation visuelle ou une identité de marque.
8. **Élément :** Ajustez l’apparence des éléments individuels de la liste, 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 la 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éments 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 pour fournir des informations détaillées de manière visuellement attrayante.
12. **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 des entrées individuelles.
13. **Champs de l’élément :** Stylisez les champs au sein 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 un affichage clair 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 faciles à utiliser et qu’ils correspondent à l’esthétique de votre site.
17. **Pied de page :** Personnalisez la section du pied de page pour des informations supplémentaires ou des actions liées à la liste, en veillant à ce qu’elle complète la conception globale.