> 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.md). # AX - Avatar ## Übersicht **AX - Avatar** ist eine Experience-Cloud-Komponente, die Profilbilder, Initialen oder Symbole auf Experience-Sites-Seiten anzeigt, um Benutzer, Kontakte, Konten oder beliebige Salesforce-Datensätze darzustellen. Verwenden Sie sie, um Portal-Benutzerprofile, Kontobeauftragte, Kontaktlisten oder Entitätskennungen mit einheitlichem visuellem Design anzuzeigen. Die Komponente zeigt automatisch Bilder an, wenn sie verfügbar sind, oder wechselt andernfalls zu Initialen oder Symbolen. Perfekt für Kopfzeilen von Benutzerprofilen, Listen von Community-Mitgliedern, Kontaktverzeichnisse oder überall dort, wo Portal-Benutzer eine visuelle Identifikation von Personen oder Entitäten benötigen. *** ## Das Avatar anpassen Die Avonni-Avatar-Komponente hilft Ihnen, visuell konsistente Darstellungen von Benutzern oder Entitäten innerhalb Ihrer Salesforce-Experience-Cloud-Site zu erstellen. Hier ist eine Schritt-für-Schritt-Anleitung, um das Avatar an Ihre Anforderungen anzupassen: ### **Initialen anzeigen** Die Avatar-Komponente bietet Flexibilität dabei, wie Sie Initialen anzeigen: #### **Manuelle Eingabe** Wenn Sie die Initialen kennen, die angezeigt werden sollen, geben Sie sie direkt in das Feld "Initials" ein.
#### **Dynamische Generierung (Ausdrücke)** Um Ihre Avonni-Komponenten dynamisch zu machen, können Sie [Experience-Cloud-Ausdrücke](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#expressions). Zum Beispiel können Sie in der untenstehenden Avatar-Komponente den folgenden Ausdruck verwenden, um den aktuell angemeldeten Benutzernamen automatisch anzuzeigen: ``` {!User.Record.Name} ``` Sie können `Name` durch den tatsächlichen Feldnamen ersetzen, der den Namen des Benutzers in Ihrer Salesforce-Organisation speichert. Wenn Sie aus einem vollständigen Namen automatisch Initialen generieren möchten, aktivieren Sie die Option "Initials Auto Formatted". Dadurch werden Experience-Cloud-Ausdrücke verwendet, um den ersten Buchstaben jedes Wortes im Namen zu extrahieren und zu formatieren.

Initialen dynamisch aus dem Namen des aktuellen Benutzers anzeigen

### **Benutzerdefiniertes Bild** Fügen Sie ein Profilfoto, ein Logo oder ein beliebiges Bild hinzu, damit das Avatar sofort erkennbar ist. Laden Sie Ihr Bild über die **Ausgewählter Inhalt** Option hoch – die Komponente beschneidet und formatiert es automatisch so, dass es in die Avatar-Form passt. Wenn kein Bild hinzugefügt wird, zeigt das Avatar stattdessen Initialen an ### **Variante (Form)** Wählen Sie zwischen **Kreis** oder **Quadrat** über das **Variante** Feld, um zum Design Ihres Portals zu passen. Runde Avatare eignen sich gut für Personen, während quadratische Formen für Logos oder Entitätssymbole geeignet sind
### **Größe** Steuern Sie mit der **Größe** Eigenschaft, wie groß das Avatar auf der Seite angezeigt wird. Die Optionen reichen von **x-klein** auf **xx-groß**, sodass Sie es mit den umliegenden Inhalten ausbalancieren können – kleiner für Inline-Listen, größer für Profilkopfzeilen. ### **Primär- und Sekundärtext** Zeigen Sie zusätzlichen Kontext neben dem Avatar an, indem Sie Textfelder hinzufügen. Verwenden Sie **Primärtext** für die wichtigsten Informationen (wie einen vollständigen Namen) und **Sekundärtext** für unterstützende Details (wie Berufsbezeichnung oder E-Mail-Adresse). Sie können außerdem für jede Textebene Schriftstile festlegen, um eine visuelle Hierarchie zwischen den primären und sekundären Informationen zu schaffen.
### **Tags** Fügen Sie visuelle Labels hinzu, um Informationen über das Avatar zu kategorisieren oder hervorzuheben. Tags erscheinen als kleine Badges und können mit unterschiedlichen Farben über die **Tag-Variante** Option gestaltet werden – nützlich, um Status, Abteilung, Rolle oder jede andere schnelle Kennung anzuzeigen. *** ## **Beispielanwendungsfälle** **Benutzerprofile** – Erstellen Sie vollständige Profilkopfzeilen, indem Sie ein benutzerdefiniertes Bild mit Primärtext für den Namen des Benutzers und Sekundärtext für dessen Berufsbezeichnung oder Abteilung kombinieren. Dadurch erhalten Portal-Benutzer eine klare, professionelle Darstellung auf ihren Profilseiten. **Community-Foren** – Zeigen Sie Avatare neben Beiträgen und Kommentaren an, damit Community-Mitglieder schnell erkennen können, wer etwas beiträgt. Dies verleiht eine persönliche Note, fördert das Engagement und erleichtert das Verfolgen von Gesprächen. **Teamseiten** – Präsentieren Sie Teammitglieder mit Avataren, die Namen, Rollen und Tags für Abteilung oder Fachgebiet enthalten. So können Portal-Benutzer den richtigen Kontakt finden und die Teamstruktur auf einen Blick verstehen. *** ## Spezifikationen {% tabs %} {% tab title="Eigenschaften" %} | Name | Beschreibung | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Initialen** | Geben Sie bestimmte Initialen ein, die innerhalb des Avatars angezeigt werden sollen. Damit können Sie die repräsentativen Buchstaben für einen Benutzer oder eine Entität manuell festlegen | | **Initialen automatisch formatiert** | Diese Funktion generiert und zeigt Initialen automatisch anhand eines angegebenen vollständigen Namens an und sorgt so für eine konsistente Darstellung ohne manuelle Eingabe | | **Fallback-Symbolname** | Bestimmt das Ersatzsymbol, das im Avatar angezeigt wird, wenn primäre Daten (wie ein Bild oder Initialen) fehlen, und sorgt so für visuelle Kontinuität | | **Größe** | Passen Sie die Gesamtabmessungen des Avatars an, damit er in verschiedene UI-Kontexte passt | | **Variante** | Wählen Sie zwischen einer kreisförmigen (`Kreis`) oder einer quadratischen (`Quadrat`) Form für den Avatar, um ihn an Ihre Designvorlieben anzupassen | | **Avatar-Details ausblenden** | Umschalten, um zusätzliche Details, die mit dem Avatar verknüpft sind, wie Texte oder Tags, anzuzeigen oder zu verbergen | | **Primärtext** | Der Haupttext, der neben dem Avatar angezeigt wird und häufig für Namen oder Hauptkennungen verwendet wird | | **Primärtextstil** | Legen Sie den Schriftstil für den Primärtext fest und wählen Sie aus Optionen wie Überschrift 1-4 oder Absatz 1-2 | | **Sekundärtext** | Zusätzlicher Text, der unter dem Primärtext angezeigt wird und sich für ergänzende Informationen oder Zwischenüberschriften eignet | | **Sekundärtextstil** | Definieren Sie den Schriftstil für den Sekundärtext mit Auswahlmöglichkeiten von Überschrift 1-4 bis Absatz 1-2 | | **Tertiärtext** | Text dritter Ebene, typischerweise für zusätzliche Details oder Attribute im Zusammenhang mit dem Avatar verwendet | | **Tertiärtextstil** | Wählen Sie den gewünschten Schriftstil für den Tertiärtext, mit Optionen einschließlich Überschrift 1-4 und Absatz 1-2 | | **Textposition** | Geben Sie die Ausrichtung oder Positionierung der begleitenden Texte in Bezug auf das Avatar an, um ein besseres visuelles Layout zu ermöglichen | | **Tags** | Legen Sie Eigenschaften für beliebige Badge-Tags fest, die mit dem Avatar verbunden sind, und bieten Sie so eine Möglichkeit, Ihren Avataren kategoriale Markierungen oder Hinweise hinzuzufügen | | {% endtab %} | | {% tab title="Erscheinungsbild" %} | Attribut | Eigenschaftsname | Beschreibung | Mögliche Werte | | ---------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------- | | **Primärtext** | Primäre Textfarbe | Legt die Farbe des Haupttexts innerhalb des Avatars fest | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Primärtext** | Schriftgröße des Primärtexts | Ändert die Größe des Primärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) | | **Primärtext** | Schriftstil des Primärtexts | Steuert den Schriftstil (z. B. kursiv, schräg) | Standard-Schriftstiloptionen | | **Primärtext** | Schriftgewicht des Primärtexts | Definiert die Fettigkeit des Primärtexts | Schriftgewichtswerte (z. B. normal, fett) | | **Sekundärtext** | Sekundäre Textfarbe | Legt die Farbe des Zusatztexts fest | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Sekundärtext** | Schriftgröße des Sekundärtexts | Ändert die Größe des Sekundärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) | | **Sekundärtext** | Schriftstil des Sekundärtexts | Steuert den Schriftstil (z. B. kursiv, schräg) | Standard-Schriftstiloptionen | | **Sekundärtext** | Schriftgewicht des Sekundärtexts | Definiert die Fettigkeit des Sekundärtexts | Schriftgewichtswerte (z. B. normal, fett) | | **Tertiärtext** | Tertiäre Textfarbe | Legt die Farbe des Texts dritter Ebene fest | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Tertiärtext** | Schriftgröße des Tertiärtexts | Ändert die Größe des Tertiärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) | | **Tertiärtext** | Schriftstil des Tertiärtexts | Steuert den Schriftstil (z. B. kursiv, schräg) | Standard-Schriftstiloptionen | | **Tertiärtext** | Schriftgewicht des Tertiärtexts | Definiert die Fettigkeit des Tertiärtexts | Schriftgewichtswerte (z. B. normal, fett) | | **Symbol** | Hintergrundfarbe des Symbols | Legt die Hintergrundfarbe des Symbolbereichs fest | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Symbol** | Vordergrundfarbe des Symbols | Legt die Farbe des Symbolbilds oder der Initialen fest | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Symbol** | Hilfseinstellung für die Vordergrundfarbe des Symbols | Wendet ein vordefiniertes Farbschema auf das Symbol an | Spezifische Namen von Hilfsklassen | | **Symbol** | Objektanpassung des Symbolbilds | Steuert, wie ein Symbolbild in seinen verfügbaren Platz passt | fill, contain, cover, none, scale-down | | **Rahmen** | Rahmengröße | Gibt die Breite des Avatar-Rahmens an | Pixelwerte (z. B. 1px, 2px) | | **Rahmen** | Rahmenradius | Steuert die Rundung der Avatar-Ecken | Pixelwerte, % (z. B. 50 % für einen Kreis) | | **Rahmen** | Rahmenfarbe | Legt die Farbe des Avatar-Rahmens fest | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Rahmen** | Rahmenstil | Definiert das Erscheinungsbild des Rahmens (z. B. durchgezogen, gestrichelt) | Standard-CSS-Rahmenstile | | **Initialen** | Initialenfarbe | Legt die Textfarbe für die angezeigten Initialen fest | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Initialen** | Initialenfarbe beim Hover | Farbe der Initialen, wenn der Avatar mit der Maus darüber bewegt wird | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Initialen** | Schriftgewicht der Initialen | Steuert die Fettigkeit des Initialentexts | Schriftgewichtswerte (z. B. normal, fett) | | **Initialen** | Entitätsfarbe | Hintergrundfarbe, wenn Initialen generiert werden | Standard-Farbwerte, Farb-Dienstprogrammklassen | | **Initialen** | Schriftgewicht der Entität | Schriftgewicht der aus einer Entität generierten Initialen | Schriftgewichtswerte (z. B. normal, fett) | | {% 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.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.