> 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-de/experience-components/ax-avatar-group.md).

# AX - Avatar-Gruppe

## Übersicht

**AX - Avatar-Gruppe** ist eine Experience-Cloud-Komponente, die auf Experience-Sites-Seiten mehrere Profilbilder, Initialen oder Symbole in einer kompakten Reihe anzeigt.

Verwenden Sie sie, um Teammitglieder, Projektmitwirkende, Kontaktdaten von Konten oder beliebige Gruppen zusammengehöriger Benutzer oder Datensätze anzuzeigen. Die Komponente stapelt Avatare horizontal und zeigt einen „+X“-Hinweis an, wenn mehr Avatare vorhanden sind, als im Anzeigebereich Platz finden.

Perfekt für Teamlisten, Kollaborationsgruppen, Anzeigen zur Fallzuweisung oder um zu zeigen, wer in Kunden- oder Partnerportalen Zugriff auf gemeinsam genutzte Datensätze hat.

## Konfiguration

### Datenquelle

Sagen Sie ihr, wo sie die Informationen finden kann, damit Ihre Avatar-Gruppe die richtigen Personen anzeigt. Hier kommen **Datenquellen** ins Spiel. Stellen Sie es sich so vor, als würden Sie Ihre Avatare mit dem Herzstück Ihrer Salesforce-Daten verbinden.

<figure><img src="/files/55557b26769b1592aa1cc8889b26c2b737afa9e8" alt=""><figcaption></figcaption></figure>

#### **Manuell**

Diese Option eignet sich hervorragend für kleinere Teams oder Situationen, in denen Sie Avatare nur für ein bestimmtes Ereignis oder Projekt anzeigen müssen.

1. **Jede Person hinzufügen:** Sie geben deren Details direkt in den Einstellungen der Avatar-Gruppe für jede einzelne Person ein, die Sie aufnehmen möchten.
2. **Wichtige Informationen bereitstellen:** Dazu gehören:
   * **Avatarbild:** Wenn Sie ein Bild haben, können Sie es hier hochladen.
   * **Initialen:** Diese werden angezeigt, wenn kein Bild verfügbar ist.
   * **Weitere Details:** Sie können zusätzliche Informationen wie die Position oder die Abteilung der Person angeben.

Die manuelle Option erfordert zwar mehr Handarbeit, gibt Ihnen aber die volle Kontrolle darüber, wer in Ihrer Avatar-Gruppe angezeigt wird.

#### **Abfrage**

Diese Option ist die beste Wahl, wenn sich Ihr Team häufig ändert oder Sie möchten, dass die Avatare immer den neuesten Informationen in Ihrer Salesforce-Organisation entsprechen.

So funktioniert es:

1. **Wählen Sie Ihr Objekt:** Wählen Sie das Salesforce-Objekt aus (z. B. Benutzer, Kontakt oder ein benutzerdefiniertes Objekt), in dem Ihre Avatar-Informationen gespeichert sind.
2. **Daten zuordnen:** Verknüpfen Sie die Attribute Ihrer Avatar-Gruppe (z. B. Name, Titel, Profilbild) mit den entsprechenden Feldern in Ihrem ausgewählten Objekt. Dadurch weiß die Avatar-Gruppe genau, wo sie die richtigen Details für jede Person findet.

Mit der Abfrage-Option wird Ihre Avatar-Gruppe zu einer dynamischen Darstellung Ihrer Salesforce-Daten und zeigt immer die genauesten und aktuellsten Informationen an.

### Variante

* **Quadrat:** Avatare werden als Quadrate angezeigt – mit einem klassischen und klaren Erscheinungsbild.
* **Kreis:** Avatare werden als modernere und freundlichere Kreise angezeigt.
* **Leer:** Wenn kein Bild verfügbar ist, erscheinen Initialen oder Platzhalter-Symbole in leeren Kreisen oder Quadraten. Wählen Sie diese Option, um auch dann ein einheitliches Erscheinungsbild beizubehalten, wenn Bilddaten fehlen.

<figure><img src="/files/3e1053d2bbf3fc2511ba544ad08600ae0e053a5e" alt=""><figcaption></figcaption></figure>

### Größe

* Steuern Sie die Abmessungen jedes Avatars. Wählen Sie aus einer Reihe von Größen, die zum Layout und Kontext Ihrer Site passen. Zu den Optionen gehören x-small, small, medium, large, x-large und xx-large.

### Layout

* **Stapel:** Avatare werden vertikal gestapelt und eignen sich ideal für schmale Bereiche oder Seitenleisten.
* **Raster:** Avatare werden in einem Rasterlayout angeordnet und eignen sich perfekt, um eine größere Gruppe von Benutzern oder Teams zu präsentieren.
* **Liste:** Avatare werden in einer horizontalen Reihe angezeigt. Das ist nützlich, wenn der Platz begrenzt ist, Sie aber dennoch mehrere Avatare präsentieren möchten.

### Maximale Anzahl

* Begrenzen Sie die Anzahl der in der Gruppe angezeigten Avatare. Dies hilft dabei, ein sauberes Layout beizubehalten und zu verhindern, dass der Benutzer mit zu vielen visuellen Elementen überfordert wird.

### Initialen automatisch formatiert (Umschalter)

* Aktivieren Sie diese Option, um automatisch die Initialen der Benutzer oder Teams anzuzeigen, wenn keine Bilder verfügbar sind. Dadurch wird auch dann eine konsistente visuelle Darstellung gewährleistet, wenn Bilddaten fehlen.

### Icon-Position

* **Icon-Position** richtet die Avatare innerhalb der Gruppe aus — `Anfang`, `zentriert`, oder `Ende`.

## Interaktionen

### Verknüpfen mit (Machen Sie Ihre Avatare interaktiv)

Stellen Sie sich diesen Abschnitt so vor, als würden Sie Ihren Avataren eine Superkraft verleihen – sie bringen Ihre Benutzer per Klick an einen neuen Ort!

<figure><img src="/files/296eb6187e6276bdfc57df392da1f984fae59865" alt=""><figcaption></figcaption></figure>

#### Warum ist das nützlich?

* **Benutzerprofile:** Stellen Sie sich vor, Sie zeigen ein Team von Experten an. Wenn Sie eine Verknüpfung zu einer Aktion einrichten, könnte das Klicken auf einen Avatar deren vollständige Profilseite öffnen.
* **Benutzerdefinierte Aktionen:** Vielleicht möchten Sie, dass ein Klick einen bestimmten Flow auslöst oder sogar zu einer externen Website weiterleitet.

#### So funktioniert es

1. **Wählen Sie Ihren Typ:** Wählen Sie aus, wohin der Klick Ihre Benutzer führen soll. Dies kann eine Datensatzseite, eine benutzerdefinierte Seite, ein Flow oder eine externe URL sein.
2. **Aktionnamen anpassen:** Wenn Sie eine Navigationsinteraktion verwenden, wählen Sie den auszuführenden Aktionsnamen aus.

Mit der Funktion „Verknüpfen mit“ wird Ihre Avatar-Gruppe mehr als nur eine Anzeige von Gesichtern; sie wird zu einem Zugang zu zusätzlichen Informationen oder Aktionen.

## Anwendungsfälle

Mit diesen Konfigurationsoptionen können Sie die Avonni-Avatar-Gruppe an Ihre Anforderungen anpassen. Sie können beispielsweise Teammitglieder auf einer Projektseite hervorheben, Kunden-Avatare auf Kontoseiten anzeigen oder visuell ansprechende Listen von Community-Mitgliedern erstellen.

Denken Sie daran, dass die Avonni-Avatar-Gruppe äußerst anpassungsfähig ist. Sie können ihr Erscheinungsbild mit Stileinstellungen weiter anpassen und sogar interaktive Elemente hinzufügen, um die Avatare anklickbar zu machen oder sie mit Benutzerprofilen zu verknüpfen.

Wenn Sie die Avonni-Avatar-Gruppe nutzen, können Sie für die Benutzer Ihrer Experience-Cloud-Site ein persönlicheres und informativeres Erlebnis schaffen, Verbindungen fördern und den menschlichen Aspekt innerhalb Ihrer Online-Community hervorheben.

## Styling

Passen Sie das Erscheinungsbild der Gruppe an über die **Stil** Bereich des Eigenschaftseditors an.

{% tabs %}
{% tab title="Außenabstand" %}
Steuert den äußeren Abstand um die Gruppe (Oben / Rechts / Unten / Links).
{% endtab %}

{% tab title="Innenabstand" %}
Steuert den inneren Abstand der Gruppe (Oben / Rechts / Unten / Links).
{% endtab %}

{% tab title="Größe" %}
Steuert die Gesamtabmessungen der Gruppe.
{% endtab %}

{% tab title="Rahmen" %}
Steuert den Rahmen um die Gruppe (Farbe / Größe / Stil / Radius).
{% endtab %}

{% tab title="Stapelrahmen" %}
Gestaltet den Rahmen zwischen gestapelten Avataren.

* **Farbe / Größe / Stil:** Steuern Sie das Erscheinungsbild des Stapelrahmens.
  {% endtab %}

{% tab title="Schaltfläche „Mehr anzeigen“" %}
Gestaltet die „+X“-Schaltfläche zum Anzeigen weiterer Elemente.

* **Hintergrund- / Text- / Rahmenfarben:** Legen Sie die Farben für den Standard-, Aktiv- und Hover-Zustand fest.
* **Rahmengröße / Rahmenradius:** Steuert den Schaltflächenrahmen.
* **Blockanfang / Blockende / Inline-Anfang / Inline-Ende:** Legen Sie den Abstand um die Schaltfläche fest.
  {% 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-de/experience-components/ax-avatar-group.md?ask=<question>&goal=<endgoal>
```

`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.
