Liste

Aperçu

Le composant Avonni List est excellent pour organiser et afficher une série d'éléments ou d'options de manière claire et ordonnée. Il est conçu pour faciliter la navigation et la compréhension des informations au sein de votre site Experience Cloud. Au-delà de l'énumération des informations, ce composant offre diverses options de mise en forme pour garantir que les éléments se démarquent, véhiculant efficacement les messages ou concepts clés.

De plus, le composant List offre des capacités de personnalisation, vous permettant d'adapter son apparence et ses fonctionnalités aux besoins spécifiques des utilisateurs de votre site, optimisant ainsi l'expérience utilisateur globale sur vos pages de documentation.

Configuration de la liste

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

Configuration de la source de données

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

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 'Ajouter des colonnes' bouton pour sélectionner le champ que vous souhaitez afficher comme étiquette 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 tels que 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.

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 façon dont chaque élément de la liste est séparé des autres.

Options de disposition

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

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 divers appareils, garantissant un affichage cohérent et convivial sur les écrans petits, moyens et grands.

Options de disposition des champs

La section Attributs de champ 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.

Ajuster la variante

La propriété "variant" dans le composant Avonni list 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: 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: Choisissez cette variante lorsque vous souhaitez un design minimaliste. L'étiquette n'est pas affichée, offrant un aspect plus épuré. Cela convient aux formulaires où le contexte ou le texte d'espace réservé rend l'objectif du champ évident ou lorsque l'espace est limité.

3. Étiquette en ligne: Dans cette variante, l'étiquette est positionnée en ligne avec le champ, généralement à gauche. Cette disposition peu encombrante 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 formulaire plus compact.

4. Étiquette empilée: Cette variante place l'étiquette directement au-dessus du champ. Lorsque le champ est focalisé 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 à maintenir une esthétique propre et dépouillée.

Options d'image

Autres paramètres

Filtres

Le "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 seront affichés dans ce popover, gardant la liste dégagée et ciblée.

Pagination

La zone "Options de pagination" vous permet de diviser les longues listes en parties plus petites dans le composant Avonni List. 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.

Recherche

Utilisez l'attribut 'Champs de recherche' pour définir quels champs au sein du composant Liste doivent être recherchables, permettant aux utilisateurs de trouver rapidement l'information souhaitée.

Activation de la recherche: Pour activer la fonctionnalité de recherche, accédez à la section Recherche et activez l'interrupteur 'Afficher la recherche'. Cette action introduira 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 les besoins.

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

Interactions

Le "Section Au clic" vous permet de définir ce qui se passera lorsque les utilisateurs interagiront avec le composant liste en cliquant sur un élément.

Voici les interactions disponibles pour le composant Liste :

• Afficher une notification

• Naviguer

• Ouvrir une modale d’alerte

• Ouvrir une confirmation

• Ouvrir la boîte de dialogue Flow

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 Avonni List.

Style Apparence

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

Voici les attributs de style disponibles pour la personnalisation dans l'Avonni List :

1. Bordure : Ajustez l'épaisseur, le style et la couleur de la bordure pour définir ou mettre en évidence 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 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'aligner sur 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 d'en-tête : Incluez et stylisez un avatar ou une image dans l'en-tête pour une représentation visuelle ou un branding.

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 d'élément : Personnalisez l'apparence des en-têtes d'élément au sein de la liste pour une segmentation claire et une lisibilité accrue.

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 de fond ou l'image 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 changeant la police ou la couleur, pour la clarté et la 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 s'accordent à l'esthétique de votre site.

17. Pied de page : Personnalisez la section pied de page pour des informations supplémentaires ou des actions liées à la liste, en veillant à ce qu'elle complète le design global.