AX - Liste
Aperçu
AX - Liste est un composant Experience Cloud qui affiche des enregistrements Salesforce sous forme de cartes personnalisables en disposition grille ou liste sur les pages des sites Experience.
Utilisez-le pour montrer aux utilisateurs du portail des ensembles d'enregistrements filtrés — comme leurs commandes, cas, contrats ou toute donnée associée — avec un contrôle total sur les champs qui apparaissent sur chaque carte. Les utilisateurs peuvent rechercher, filtrer, paginer les résultats et cliquer sur les cartes pour accéder aux enregistrements. Récupérez des données de n'importe quel objet standard ou personnalisé dans Experience Builder.
Parfait pour l'historique des commandes client, les listes de cas, les bibliothèques de documents, les catalogues de produits ou partout où les utilisateurs du portail ont besoin de parcourir et de rechercher leurs enregistrements Salesforce.
La liste Avonni est un Composant de données réactif
Configuration de la Liste
Comprendre le processus de configuration, en particulier les sections Source de données et Mappages, est crucial 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 avez deux options de source de données.
Source de données manuelle
Saisir manuellement la Liste dans la table de données.
Idéal pour les données non dynamiques, les tests et les démonstrations.
Requête
Créer 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 mappings 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 sur 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étail à chaque élément de la liste.
Configuration de l'apparence
Configuration du 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.
Haut
Vous permet de placer un séparateur en haut de chaque élément de la liste.
Bas
Ajoute une ligne de séparation en bas de chaque élément de la liste.
Autour
Place des lignes de séparation à la fois au-dessus et au-dessous de chaque élément de la liste.
Carte
Place chaque élément de la liste dans son propre conteneur de type carte, séparé par des séparateurs.
Options de mise en page
La fonction Options de mise en page du composant Liste Avonni 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 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 é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 donnant un contrôle granulaire sur la mise en page et l'apparence du contenu de votre liste.
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. Les valeurs suivantes sont disponibles pour la propriété "variant", chacune avec son style unique.
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.
É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é. Cela convient aux formulaires où le contexte ou le texte d'espace réservé rend le but du champ évident ou lorsque l'espace est limité.
Étiquette en ligne: Dans cette variante, l'étiquette est positionnée en ligne avec 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 également utile lorsque vous souhaitez obtenir un design de formulaire plus compact.
É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 non encombrée.
Options d'image
Autres paramètres
Filtres
Le "Option de filtrage" vous permet d'ajouter un menu de filtrage. 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 axée.
Pagination
La zone "Options de pagination" vous permet de diviser de 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.
Recherche
Utilisez l'attribut 'Champs de recherche' pour définir quels champs au sein du composant Liste doivent être recherchables, permettant aux utilisateurs de localiser rapidement l'information nécessaire.
Activation de la recherche: Pour activer la fonction de recherche, accédez à la section Recherche et activez le 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 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 interagissent avec le composant liste en cliquant sur un élément.
Voici les interactions disponibles pour le composant Liste :
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 / 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 sur l'esthétique de votre site.
Voici les attributs de style disponibles pour la personnalisation dans la Liste Avonni :
Bordure : Ajustez l'épaisseur, le style et la couleur de la bordure pour définir ou mettre en évidence les limites de la liste.
Taille : Personnalisez la taille globale de la liste, y compris la largeur et la hauteur, pour l'adapter à votre mise en page.
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.
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.
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.
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.
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 l'image de marque.
Élément : Ajustez l'apparence des éléments individuels de la liste, y compris l'arrière-plan, l'alignement et l'espacement.
Alignement vertical de l'élément : Contrôlez l'alignement vertical des éléments de la liste pour un rendu cohérent et soigné.
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 bonne lisibilité.
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.
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 évidence des entrées individuelles.
Champs de l'élément : Stylisez les champs à l'intérieur de chaque élément, comme en changeant la police ou la couleur, pour la clarté et la hiérarchie visuelle.
Valeur des champs de l'élément : Personnalisez la présentation des valeurs des champs pour une représentation claire des données.
Étiquette des champs de l'élément : Stylisez les étiquettes des champs pour les distinguer des valeurs et améliorer la lisibilité.
Boutons de pagination : Stylisez les boutons de pagination pour naviguer dans la liste, en vous assurant qu'ils sont conviviaux et qu'ils correspondent à l'esthétique de votre site.
Pied de page : Personnalisez la section 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.
Mis à jour
Ce contenu vous a-t-il été utile ?