> 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 sur une ligne compacte dans les pages Experience Sites. Utilisez-le pour afficher les membres d’une équipe, les contributeurs d’un projet, les contacts d’un compte ou tout groupe d’utilisateurs ou d’enregistrements lié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. Idéal pour les listes d’équipe, les groupes de collaboration, les affichages d’attribution de dossiers ou pour montrer qui a accès aux enregistrements partagés dans les portails clients ou partenaires. ## Configuration ### Source de données Indiquez-lui où trouver les informations pour que votre groupe d’avatars affiche les bonnes personnes. C’est ici que **Sources de données** entrent en jeu. Voyez cela comme la connexion de vos avatars au cœur de vos données Salesforce.
#### **Manuel** Cette option est idéale pour les petites équipes ou les situations où vous n’avez besoin d’afficher des avatars que 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. **Fournissez les informations clés :** Cela comprend : * **Image de l’avatar :** Si vous avez une photo, vous pouvez la téléverser ici. * **Initiales :** Elles s’afficheront si aucune image n’est disponible. * **Autres détails :** Vous pouvez inclure des informations supplémentaires comme le poste ou le service de la personne. Bien que l’option Manuelle demande davantage de travail, elle vous offre un contrôle total sur les personnes affichées dans votre groupe d’avatars. #### **Requête** Cette option est votre meilleur choix si votre équipe change fréquemment ou si vous voulez 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é) où se trouvent les informations de vos avatars. 2. **Faites le mappage des données :** Faites le lien entre les attributs de votre groupe d’avatars (comme Nom, Titre, Photo de profil) et les champs correspondants dans l’objet choisi. Cela indique au groupe d’avatars exactement où trouver les bons détails pour chaque personne. En utilisant l’option Requête, votre groupe d’avatars devient une représentation dynamique de vos données Salesforce, affichant toujours les informations les plus exactes et les plus récentes. ### Variante * **Carré :** Les avatars sont affichés sous forme de carrés, avec un style classique et épuré. * **Cercle :** Les avatars sont affichés sous forme de cercles plus modernes et plus conviviaux. * **Vide :** Si aucune image n’est disponible, des initiales ou des icônes de remplacement apparaissent dans des cercles ou des carrés vides. Choisissez cette option pour maintenir une cohérence visuelle même lorsque les données d’image sont absentes.
### Taille * Contrôlez les dimensions de chaque avatar. Choisissez parmi une gamme de tailles pour s’adapter à la mise en page et au contexte de votre site. Les options incluent x-small, small, medium, large, x-large et xx-large. ### Mise en page * **Empilement :** Les avatars sont empilés verticalement, ce qui est idéal pour les espaces étroits ou les barres latérales. * **Grille :** Les avatars sont disposés dans une grille, parfaite pour mettre en valeur un groupe plus important d’utilisateurs ou d’équipes. * **Liste :** Les avatars sont affichés sur une ligne horizontale, ce qui est utile lorsque l’espace est limité, tout en souhaitant présenter plusieurs avatars. ### Nombre maximal * 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 d’éléments visuels. ### Initiales formatées automatiquement (interrupteur) * Activez cette option pour afficher automatiquement les initiales des utilisateurs ou des équipes lorsque les images ne sont pas disponibles. Cela fournit une représentation visuelle cohérente même lorsque les données d’image sont absentes. ### Position de l'icône * **Position de l'icône** aligne les avatars dans le groupe — `début`, `au centre`, ou `fin`. ## Interactions ### Lien vers (rendez vos avatars interactifs) Voyez cette section comme un superpouvoir donné à vos avatars : ils emmènent vos utilisateurs vers un nouvel endroit lorsqu’on clique dessus !
#### Pourquoi est-ce utile ? * **Profils utilisateur :** Imaginez l’affichage d’une équipe d’experts. En configurant un lien vers une action, un clic sur un avatar pourrait ouvrir sa page de profil complète. * **Actions personnalisées :** Vous souhaitez peut-être qu’un clic déclenche un Flow spécifique ou redirige vers un site web externe. #### Fonctionnement 1. **Choisissez votre type :** Sélectionnez l’endroit où vous souhaitez que le clic mène vos utilisateurs. Cela peut être une page d’enregistrement, une page personnalisée, un Flow ou une URL externe. 2. **Personnalisez le nom de l’action :** Lorsque vous utilisez 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 porte d’entrée 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 les membres d’une équipe sur une page de projet, afficher les avatars des clients sur les pages de compte ou créer des listes de membres de la communauté visuellement attrayantes. N’oubliez pas que le composant Avonni Avatar Group est très adaptable. Vous pouvez personnaliser davantage son apparence avec des paramètres 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, favoriser les connexions et mettre en valeur la dimension humaine de votre communauté en ligne. ## Style Personnalisez l’apparence du groupe à partir de **Style** section 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="Rembourrage" %} 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 d’empilement" %} Applique un style à la bordure entre les avatars empilés. * **Couleur / Taille / Style :** Contrôlez l’apparence de la bordure d’empilement. {% endtab %} {% tab title="Bouton Afficher plus" %} Applique un style au bouton « +X » Afficher plus. * **Couleurs de fond / du texte / de bordure :** Définissez les couleurs pour les états par défaut, actif et au survol. * **Taille de la bordure / Rayon de bordure :** Contrôlez 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` 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 optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.