Conteneur de puces

Aperçu

Le composant Chip Container est un élément d'interface utilisateur essentiel pour les sites Salesforce Experience Cloud, conçu pour afficher et gérer proprement une collection d'étiquettes ou de libellés interactifs, souvent appelés « chips ».

Il simplifie l'expérience utilisateur pour la gestion de ces éléments et garantit que la mise en page reste visuellement attrayante et conviviale, s'alignant parfaitement sur l'esthétique des sites Experience Cloud.

Configuration du Chip Container

Paramètres généraux

1. Ligne unique

• Fonctionnalité : Détermine si les chips sont affichés sur une seule ligne ou peuvent être renvoyés sur plusieurs lignes.

• Utilisation : Utile pour maintenir une mise en page compacte ou pour accueillir un nombre plus important de chips.

2. Repliable

• Fonctionnalité : Permet au conteneur de chips d'être repliable.

• Utilisation : Idéal pour les scénarios où vous souhaitez économiser de l'espace ou gérer la visibilité des chips.

3. Déployé

• Fonctionnalité : Définit l'état initial du conteneur de chips comme étant déployé.

• Utilisation : Utile lorsque vous souhaitez que tous les chips soient immédiatement visibles pour l'utilisateur au chargement.

Configuration de la source de données pour Avonni Chip Container

L'Avonni Chip Container propose deux méthodes principales d'intégration des données – Sources de données manuelles et par requête. Chaque méthode sert des objectifs distincts et convient à différents scénarios, allant des affichages de données statiques à l'intégration dynamique et en temps réel des enregistrements Salesforce.

Source de données manuelle

• Fonctionnalité :

  • Ce paramètre permet une saisie directe et manuelle des données dans le Chip Container.

• Utilisation :

  • Ceci est particulièrement utile lorsque les données des chips ne proviennent pas de manière dynamique des enregistrements Salesforce.

  • Il est idéal pour les configurations initiales, les environnements de test ou les scénarios où des données statiques sont préférées.

Source de données par requête

• Fonctionnalité :

  • L'option de requête permet au Chip Container de récupérer et d'afficher automatiquement des données à partir des enregistrements Salesforce.

• Utilisation :

  • Parfait pour les cas où les chips doivent être remplis dynamiquement avec des informations à jour provenant de Salesforce.

  • Facilite la réflexion des données en temps réel, en faisant un excellent choix pour les sites actifs et axés sur les données.

Mappages de données pour la source de données par requête

Le processus de mappage des données est essentiel pour la précision et la pertinence des informations affichées dans le Chip Container.

• Processus :

  • Il implique d'aligner soigneusement et de mapper les champs Salesforce aux attributs correspondants du Chip Container. Cette étape garantit que les données sont récupérées et présentées de manière significative et organisée.

• Résultat :

  • Un mappage de données approprié garantit que les données récupérées de Salesforce sont correctement représentées dans les chips, assurant des affichages significatifs et contextuellement précis.

Paramètres de style

Aperçu

Personnaliser le style du composant Avonni Chip Container est crucial pour aligner son apparence sur l'esthétique globale de votre site Salesforce Experience Cloud. Le composant offre une gamme d'options de style permettant une personnalisation détaillée, garantissant à la fois fonctionnalité et attrait visuel.

Options d'espacement

Chip Container Début/Fin de bloc, Début/Fin en ligne :

• Ces paramètres contrôlent l'espacement autour du conteneur de chips en orientations bloc (verticale) et en ligne (horizontale).

• Ajuster ces valeurs peut aider à créer la marge visuelle souhaitée entre les chips et les autres éléments, améliorant la lisibilité et la cohérence de la mise en page.

Style du Chip Container

• Arrière-plan, couleur de la bordure, taille, style et rayon :

  • Personnalisez la couleur d'arrière-plan pour compléter ou contraster avec le thème du site.

  • Les options de personnalisation de la bordure (couleur, taille, style et rayon) offrent un contrôle sur le contour du conteneur, lui permettant de se démarquer ou de se fondre parfaitement avec les autres éléments de la page.

Style individuel des chips

• Taille, poids, style de police du libellé ; taille, style, rayon de la bordure ; hauteur de ligne :

  • Ajustez finement la typographie des libellés des chips pour la clarté et l'alignement avec la marque.

  • Les ajustements de bordure et de hauteur de ligne renforcent l'impact visuel de chaque chip, les rendant plus distincts et plus faciles à manipuler.

Personnalisation de l'avatar dans les chips

• Taille, couleur, style de la bordure ; couleur/poids de la police des initiales, couleur de fond de l'icône, ajustement de l'objet image :

  • Les avatars dans les chips peuvent être stylisés pour correspondre au design du site, avec des options d'ajustement des propriétés de la bordure et des caractéristiques de la police des initiales.

  • Les paramètres « Image Object Fit » comme « fill », « contain », « cover », etc., sont cruciaux pour garantir que les images d'avatar s'affichent correctement sans distorsion.

Paramètres de style par variante

• Personnalisable en fonction de la variante sélectionnée :

  • Le composant Chip Container propose un style basé sur la variante, ce qui signifie que différents styles peuvent être appliqués en fonction de la variante de chip sélectionnée.

  • Cette fonctionnalité permet une plus grande flexibilité et créativité dans la conception, garantissant que chaque variante de chip puisse avoir une apparence unique mais cohérente au sein du conteneur.