> 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-avatar-group.md). # AX - Groupe d’avatars ## Aperçu **AX - Groupe d'avatars** est un composant Experience Cloud qui affiche plusieurs photos de profil, initiales ou icônes dans une ligne compacte sur les pages des sites Experience. Utilisez-le pour afficher les membres d’une équipe, les contributeurs d’un projet, les contacts d’un compte ou tout autre groupe d’utilisateurs ou d’enregistrements associés. Le composant empile les avatars horizontalement et affiche un indicateur « +X » lorsqu’il y a plus d’avatars que l’espace d’affichage ne peut en contenir. Parfait pour les listes d’équipe, les groupes de collaboration, les affichages d’affectation de cas ou pour montrer qui a accès aux enregistrements partagés dans les portails client ou partenaire. ## Configuration ### Source de données Indiquez-lui où trouver les informations pour que votre groupe d’avatars affiche les bonnes personnes. C’est là que **les sources de données** entrent en jeu. Voyez cela comme une connexion de vos avatars au cœur de vos données Salesforce.
#### **Manuel** Cette option convient parfaitement aux petites équipes ou aux situations où vous devez simplement afficher des avatars pour un événement ou un projet spécifique. 1. **Ajouter chaque personne :** Vous saisirez leurs informations directement dans les paramètres du groupe d’avatars pour chaque personne que vous souhaitez inclure. 2. **Fournir les informations clés :** Cela comprend : * **Image de l’avatar :** Si vous avez une photo, vous pouvez la téléverser ici. * **Initiales :** Elles seront affichées si aucune image n’est disponible. * **Autres détails :** Vous pouvez inclure des informations supplémentaires comme le titre ou le service de la personne. Bien que l’option manuelle demande plus d’intervention, elle vous offre un contrôle total sur les personnes affichées dans votre groupe d’avatars. #### **Requête** Cette option est votre choix de prédilection si votre équipe change fréquemment ou si vous souhaitez que les avatars correspondent toujours aux informations les plus récentes de votre organisation Salesforce. Voici comment cela fonctionne : 1. **Choisissez votre objet :** Sélectionnez l’objet Salesforce (comme Utilisateur, Contact ou un objet personnalisé) dans lequel se trouvent les informations de vos avatars. 2. **Mapper les données :** Établissez la correspondance entre les attributs de votre groupe d’avatars (comme Nom, Titre, Photo de profil) et les champs correspondants de l’objet choisi. Cela indique au groupe d’avatars exactement où trouver les informations correctes pour chaque personne. En utilisant l’option de requête, votre groupe d’avatars devient un reflet dynamique de vos données Salesforce, affichant toujours les informations les plus précises et à jour. ### Variante * **Carré :** Les avatars sont affichés sous forme de carrés, avec un aspect classique et épuré. C’est l’option par défaut. * **Cercle :** Les avatars sont affichés sous forme de cercles plus modernes et conviviaux. * **Vide :** Les avatars sont affichés sous forme de carrés arrondis, exactement comme avec **Carré** — seul **Rond** change la forme.
### Taille * Contrôlez les dimensions de chaque avatar : **Très petit**, **Petit**, **Moyen** (par défaut), **Grand**, **Très grand** ou **XXL**. ### Mise en page * **Empilement :** L’option par défaut — les avatars sont alignés sur une seule ligne et se chevauchent, de sorte qu’un groupe occupe très peu de largeur. * **Grille :** Les avatars sont disposés côte à côte sans chevauchement et passent à la ligne suivante, ce qui convient mieux à un groupe plus important. * **Liste :** Un avatar par ligne, empilé verticalement — utile dans une zone étroite ou une barre latérale, et seule disposition qui défile pour charger davantage d’avatars. ### Nombre max * Limitez le nombre d’avatars affichés dans le groupe. Cela permet de conserver une mise en page épurée et d’éviter de submerger l’utilisateur avec trop de visuels. ### Initiales formatées automatiquement * Activez cette option pour que les initiales affichées sur chaque avatar soient automatiquement formatées : lorsque la valeur contient plus d’un mot, la première lettre de chaque mot est utilisée ; lorsqu’il s’agit d’un seul mot, les deux premières lettres sont utilisées. Désactivé par défaut. ### Position de l’icône * **Position de l’icône** place l’icône à l’intérieur de chaque avatar — **Début**, **Centre** (la valeur par défaut) ou **Fin**. ### Message d’absence de résultats * **Message d’absence de résultats** remplace l’état vide par défaut par votre propre texte lorsque la source de données ne renvoie aucun élément. **Attributs du message d’absence de résultats** puis contrôle ce que l’état vide affiche : **Masquer l’image d’absence de résultats** supprime l’illustration, et **Masquer le message d’absence de résultats** supprime le texte. Les deux sont désactivés par défaut. ## Interactions ### Lien vers (rendez vos avatars interactifs) Considérez cette section comme un superpouvoir donné à vos avatars : emmener vos utilisateurs vers un nouvel endroit lorsqu’ils cliquent !
#### Pourquoi est-ce utile ? * **Profils utilisateur :** Imaginez afficher une équipe d’experts. En configurant un lien vers une action, le clic sur un avatar pourrait ouvrir sa page de profil complète. * **Actions personnalisées :** Peut-être souhaitez-vous qu’un clic déclenche un Flow spécifique ou même qu’il redirige vers un site externe. #### Comment cela fonctionne 1. **Choisissez votre type :** Sélectionnez l’endroit où vous souhaitez que le clic emmène vos utilisateurs. Il peut s’agir d’une page d’enregistrement, d’une page personnalisée, d’un Flow ou d’une URL externe. 2. **Personnaliser le nom de l’action :** Lors de l’utilisation d’une interaction de navigation, choisissez le nom de l’action à invoquer. Grâce à la fonctionnalité Lien vers, votre groupe d’avatars devient plus qu’un simple affichage de visages ; il devient une passerelle vers des informations ou des actions supplémentaires. ## Cas d'utilisation Ces options de configuration vous permettent d’adapter le composant Avonni Avatar Group à vos besoins. Par exemple, vous pouvez mettre en avant des membres d’équipe sur une page de projet, afficher des avatars clients sur des pages de compte ou créer des listes visuellement attrayantes de membres d’une communauté. N’oubliez pas que le composant Avonni Avatar Group est très adaptable. Vous pouvez personnaliser davantage son apparence avec des réglages de style et même ajouter des éléments interactifs pour rendre les avatars cliquables ou les lier à des profils utilisateur. En tirant parti du composant Avonni Avatar Group, vous pouvez créer une expérience plus personnalisée et plus informative pour les utilisateurs de votre site Experience Cloud, en favorisant les connexions et en mettant en valeur la dimension humaine de votre communauté en ligne. ## Mise en forme Personnalisez l’apparence du groupe à partir de **Style** de l’éditeur de propriétés. {% tabs %} {% tab title="Marge" %} Contrôle l’espacement extérieur autour du groupe (Haut / Droite / Bas / Gauche). {% endtab %} {% tab title="Marge intérieure" %} Contrôle l’espacement intérieur du groupe (Haut / Droite / Bas / Gauche). {% endtab %} {% tab title="Taille" %} Contrôle les dimensions globales du groupe. {% endtab %} {% tab title="Bordure" %} Contrôle la bordure autour du groupe (Couleur / Taille / Style / Rayon). {% endtab %} {% tab title="Bordure de l’empilement" %} Stylise la bordure entre les avatars empilés. * **Couleur / Taille / Style :** Contrôle l’apparence de la bordure de l’empilement. {% endtab %} {% tab title="Bouton Afficher plus" %} Stylise le bouton « +X » d’affichage de plus d’éléments. * **Couleurs d’arrière-plan / de texte / de bordure :** Définissez les couleurs pour les états par défaut, actif et au survol. * **Taille de la bordure / Rayon de la bordure :** Contrôle la bordure du bouton. * **Début du bloc / Fin du bloc / Début en ligne / Fin en ligne :** Définissez l’espacement autour du bouton. {% 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-avatar-group.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.