> 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 Group

## Übersicht

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

Verwenden Sie sie, um Teammitglieder, Projektbeteiligte, Kontaktdaten von Konten oder jede Gruppe zusammengehöriger Benutzer oder Datensätze anzuzeigen. Die Komponente stapelt Avatare horizontal und zeigt einen „+X“-Hinweis an, wenn mehr Avatare vorhanden sind, als in den Anzeigebereich passen.

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

## Konfiguration

### Datenquelle

Teilen Sie ihr mit, wo die Informationen zu finden sind, 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 Kern Ihrer Salesforce-Daten verbinden.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-6a64f5314735e74363472f91359b1b28f207b8c7%2F2024-07-03_07-00-12.png?alt=media" 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 die Details für jede Person, die Sie aufnehmen möchten, direkt in den Einstellungen der Avatar-Gruppe ein.
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.

Auch wenn die manuelle Option mehr Aufwand erfordert, haben Sie damit die vollständige Kontrolle darüber, wer in Ihrer Avatar-Gruppe angezeigt wird.

#### **Abfrage**

Diese Option ist die richtige 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 (z. B. Benutzer, Kontakt oder ein benutzerdefiniertes Objekt) aus, 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 gewählten Objekt. Dadurch weiß die Avatar-Gruppe genau, wo sie die richtigen Details für jede Person findet.

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

### Variante

* **Quadratisch:** Avatare werden als Quadrate angezeigt, mit einem klassischen und sauberen Look. Dies ist die Standardeinstellung.
* **Kreis:** Avatare werden als modernere und freundlichere Kreise angezeigt.
* **Leer:** Avatare werden als abgerundete Quadrate angezeigt, genau wie bei **Quadrat** — nur **Kreis** ändert sich die Form.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-738ae02abb3eacaee416f1f4ac4770274757a462%2F2024-07-03_06-58-10.png?alt=media" alt=""><figcaption></figcaption></figure>

### Größe

* Steuern Sie die Abmessungen jedes Avatars: **X-Klein**, **Klein**, **Mittel** (der Standard), **Groß**, **X-Groß** oder **XX-Groß**.

### Layout

* **Stapeln:** Die Standardeinstellung — Avatare stehen in einer Linie und überlappen sich, sodass eine Gruppe nur sehr wenig Breite einnimmt.
* **Raster:** Avatare werden nebeneinander ohne Überlappung angeordnet und auf weitere Zeilen umgebrochen, was sich für eine größere Gruppe eignet.
* **Liste:** Ein Avatar pro Zeile, vertikal gestapelt — nützlich in einem schmalen Bereich oder einer Seitenleiste und das einzige Layout, das zum Laden weiterer Avatare scrollt.

### Maximale Anzahl

* Begrenzen Sie die Anzahl der in der Gruppe angezeigten Avatare. Das hilft, ein klares Layout beizubehalten und verhindert, dass der Nutzer mit zu vielen visuellen Elementen überfordert wird.

### Initialen automatisch formatiert

* Aktivieren Sie diese Option, damit die auf jedem Avatar angezeigten Initialen automatisch formatiert werden: Wenn der Wert mehr als ein Wort enthält, wird der erste Buchstabe jedes Wortes verwendet; bei einem einzelnen Wort werden die ersten beiden Buchstaben verwendet. Standardmäßig deaktiviert.

### Symbolposition

* **Symbolposition** platziert das Symbol in jedem Avatar — **Start**, **Mitte** (der Standard) oder **Ende**.

### Keine-Ergebnisse-Nachricht

* **Keine-Ergebnisse-Nachricht** ersetzt den standardmäßigen Leerzustand durch Ihren eigenen Text, wenn die Datenquelle keine Elemente zurückgibt. **Attribute der Keine-Ergebnisse-Nachricht** steuert dann, was der Leerzustand anzeigt: **Keine-Ergebnisse-Bild ausblenden** lässt die Illustration weg, und **Keine-Ergebnisse-Nachricht ausblenden** entfernt den Text. Beide sind standardmäßig deaktiviert.

## Interaktionen

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

Stellen Sie sich diesen Abschnitt als eine Superkraft für Ihre Avatare vor – sie führen Ihre Nutzer per Klick an einen neuen Ort!

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-5a9b69223bea8e9a73a175eee3b81773949c53af%2F2024-07-03_06-53-05.png?alt=media" 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 ein Klick auf einen Avatar deren vollständige Profilseite öffnen.
* **Benutzerdefinierte Aktionen:** Vielleicht möchten Sie, dass ein Klick einen bestimmten Flow auslöst oder sogar auf eine externe Website weiterleitet.

#### So funktioniert es

1. **Wählen Sie Ihren Typ:** Wählen Sie aus, wohin der Klick Ihre Nutzer führen soll. Das kann zu einer Datensatzseite, einer benutzerdefinierten Seite, einem Flow oder einer externen URL sein.
2. **Den Aktionsnamen 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 Tor zu zusätzlichen Informationen oder Aktionen.

## Anwendungsfälle

Diese Konfigurationsoptionen ermöglichen es Ihnen, die Avonni Avatar Group-Komponente an Ihre Bedürfnisse anzupassen. Sie können zum Beispiel Teammitglieder auf einer Projektseite präsentieren, Kunden-Avatare auf Kontoseiten anzeigen oder visuell ansprechende Listen von Community-Mitgliedern erstellen.

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

Wenn Sie die Avonni Avatar Group-Komponente nutzen, können Sie für die Nutzer Ihrer Experience-Cloud-Website ein persönlicheres und informativeres Erlebnis schaffen, Verbindungen fördern und die menschliche Seite Ihrer Online-Community hervorheben.

## Formatierung

Passen Sie das Erscheinungsbild der Gruppe über die **Registerkarte „Stil“** Abschnitt des Eigenschaftseditors an.

{% tabs %}
{% tab title="Außenabstand" %}
Steuert den äußeren Abstand um die Gruppe herum (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" %}
Formatiert den Rahmen zwischen gestapelten Avataren.

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

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

* **Hintergrund-/Text-/Rahmenfarben:** Legen Sie die Farben für den Standard-, Aktiven- und Hover-Zustand fest.
* **Rahmengröße / Rahmenradius:** Steuern Sie den Rahmen der Schaltfläche.
* **Blockanfang / Blockende / Inlineanfang / Inlineende:** 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 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-de/experience-components/ax-avatar-group.md?ask=<question>&goal=<user_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.
