AX - Profilkarte

Überblick

AX - Profile Card ist eine Experience-Cloud-Komponente, die Benutzer- oder Kontaktdaten in einem stilisierten Kartenformat mit Profilbildern, Namen, Details und optionalen Hintergrundbildern auf Experience-Sites-Seiten anzeigt.

Verwenden Sie sie, um Teammitglieder, Kundenkontakte, Partnervertreter oder Mitwirkende der Community mit einheitlicher visueller Formatierung zu präsentieren. Konfigurieren Sie, welche Felder angezeigt werden, fügen Sie Profilbilder hinzu, passen Sie das Styling an und schließen Sie Aktionsschaltflächen im Experience Builder ein.

Ideal für Teamverzeichnisse, Kontaktlisten, Profile von Community-Mitgliedern, Bereiche wie „Lernen Sie Ihren Vertreter kennen“ oder überall dort, wo Ihr Portal professionelle Profilanzeigen benötigt.

Diese Komponente verwendet Slots für erweiterte Anpassungen und ist daher ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht.

Erste Schritte

Nutzen Sie dieses einfache Tutorial, um die Grundlagen der Profile-Card-Komponente kennenzulernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen.

Konfiguration

Slots

Die Avonni Profile-Card-Komponente bietet eine flexible, dynamische Möglichkeit, über Slots eine Vielzahl von Informationen darzustellen. Diese Slots sind definierte Bereiche innerhalb der Komponente, in die andere Komponenten eingefügt werden können, wodurch umfangreiche Anpassungen und Funktionalität möglich werden.

Slot-Typen

1. Inhalts-Slot:

   • Der Hauptbereich für detaillierte Informationen.
   • Ideal zum Hinzufügen verschiedener Elemente wie Text, Listen, Bilder oder benutzerdefinierter Komponenten.
   • Kann zur Anzeige umfassender Daten oder interaktiver Elemente verwendet werden.
2. Kopfzeilen-Slot:

   • Für Titel, Überschriften oder einleitende Inhalte reserviert.
   • Geeignet für Textbezeichnungen, Avatare, Symbole oder jede Komponente, die Kontext liefert.
   • Verbessert das unmittelbare Verständnis des Zwecks der Profile Card.
3. Aktions-Slot:

   • Für interaktive Elemente wie Schaltflächen oder Hyperlinks reserviert.
   • Ermöglicht Benutzerinteraktion und bietet Aktionen wie das Bearbeiten von Profilen und die Navigation.
   • Erhöht die Interaktivität der Karte und das Engagement der Benutzer.

Eigenschaften

Titel und Untertitel Legen Sie die Überschrift und die Begleitzeile der Karte fest — verwenden Sie den Untertitel für zusätzlichen Kontext wie Position oder Abteilung. Stil des Titeltexts und Textstil des Untertitels Platzieren Sie sie nebeneinander im Panel und legen Sie für jede Zeile die Typografie fest: Überschrift 1 bis Überschrift 4, oder Absatz 1 / Absatz 2.

CMS-Hintergrund und Hintergrundquelle Legen Sie ein Hintergrundbild für die Karte fest — wählen Sie ein Bild aus dem CMS oder geben Sie eine URL für einen visuell ansprechenden Hintergrund an, der Tiefe und Kontext hinzufügt.

Footer anzeigen zeigt einen Footer-Bereich auf der Karte an, und Innenabstand des Inhalts entfernt den Innenabstand um den Inhalt, sodass er bündig an den Kartenkanten sitzt.

CMS-Avatarbild und Avatarbild-URL oder Ausdruck definieren Sie das Avatarbild, und Name des Fallback-Symbols für den Avatar legt das Symbol fest, das angezeigt wird, wenn kein Bild verfügbar ist.

Avatar-Variante legt die Form des Avatars fest (Quadratisch oder Kreisförmig, die Standardeinstellung) und Avatar-Größe seine Größe (Extra klein, Klein, Mittel (Standard), Groß oder Extra groß).

Avatar-Position platziert den Avatar auf der Karte — Oben links (Standard), Oben zentriert, Oben rechts, Unten links, Unten mittig, Unten rechts, Links, Mitte oder Rechts — mit Avatar-Position in kleinen / mittleren / großen Containern überschreibt die Position pro Breakpoint.

Formatierung

Kopfzeile

Name	Beschreibung	Verwendung
Attribute zur Kopfzeilenformatierung	Gestalten Sie die Kopfzeile umfassend mit Optionen für Hintergrundfarbe, Textfarbe, Schriftgröße, Stil, Schriftstärke und sogar Rahmenanpassungen.	Passen Sie das Erscheinungsbild der Kopfzeile fein an, um eine optisch ansprechende und leicht lesbare Kopfzeile der Profile Card zu erstellen.

Hintergrund & Rahmen

Name	Beschreibung	Verwendung
Hintergrundfarbe und Rahmen	Passen Sie die allgemeine Hintergrundfarbe der Karte an und definieren Sie Rahmeneigenschaften wie Größe, Radius und Farbe.	Diese Funktionen ermöglichen eine weitere visuelle Abgrenzung und Verfeinerung des Erscheinungsbilds der Profile Card und stellen sicher, dass sie Ihren Designvorstellungen entspricht.

Anwendungsfälle

Name	Beschreibung
Die Profile Card so konfigurieren, dass aktuelle Benutzerinformationen angezeigt werden	Richten Sie eine Avonni Card ein, um Benutzerinformationen in Experience Cloud anzuzeigen und so die Personalisierung zu verbessern.

Beispiel 1: Kontohighlight-Panel (Container)

Verwandeln Sie Ihre Partner-Experience-Site mit einer eleganten, informationsreichen Konto-Profile-Card, die wichtige Kontodetails, Branding und Aktionen in den Mittelpunkt stellt.

---

Was du erreichen wirst

• Marken-Kopfzeile: Zeigen Sie den Kontonamen und die Branche zusammen mit einem Firmenlogo an, um eine sofortige visuelle Wiedererkennung zu ermöglichen
• Kontextbezogene Aktionen: Starten Sie einen neuen Opportunity-Flow direkt von der Karte aus mit nur einem Klick
• Kompakte Datensatzdetails: Blenden Sie die relevantesten Kontofelder ein, ohne die Seite zu überladen

---

Bevor Sie beginnen

• Benutzerdefiniertes Logo-Feld: Ein benutzerdefiniertes Feld im Account-Objekt zum Speichern der URL des Firmenlogos
• Bildschirm-Flow: Ein neuer Opportunity-Bildschirm-Flow, bereit zum Starten
• Schaltflächenkomponente: In Ihrer Komponentenbibliothek verfügbar
• Record-Detail-Komponente: In Ihrer Komponentenbibliothek verfügbar

---

So richtest du es ein

1

Fügen Sie die Profile Card zu Ihrer Seite hinzu

• Ziehen Sie die Komponente AX – Profile Card auf die Experience-Account-Datensatzseite

2

Konfigurieren Sie die Kartenkopfzeile

• Setzen Sie die Kopfzeile auf {!Item.Name}
• Setzen Sie den Stil auf Überschrift 2
• Setzen Sie den Untertitel auf {!Item.Industry}

3

Fügen Sie das Firmenlogo hinzu

• Setzen Sie die Avatar-Bild-URL auf {!Item.LogoURL__c}
• Setzen Sie die Variante auf Kreisförmig
• Setzen Sie die Größe auf Mittel

4

Fügen Sie eine benutzerdefinierte Aktionsschaltfläche hinzu

• Ziehen Sie die Button-Komponente in den Aktions-Slot

5

Fügen Sie ein kompaktes Datensatzlayout hinzu

• Ziehen Sie die Record-Detail-Komponente in den Inhalts-Slot

6

Sehen Sie sich eine Vorschau Ihrer Seite an

• Überprüfen Sie die Karte in der Vorschau, um sicherzustellen, dass Layout, Logo und Aktionsschaltfläche wie erwartet angezeigt werden

---

Links

AX - DatensatzdetailAX - Schaltfläche

---

Beispiel 2: Profilinformationen des aktuellen Benutzers

Bereiten Sie Ihren Benutzern in dem Moment, in dem sie Ihre Experience-Site besuchen, einen warmen, personalisierten Empfang und fördern Sie die Bindung sowie die Akzeptanz der Plattform schon beim ersten Besuch.

---

Was du erreichen wirst

• Persönliche Begrüßung: Sprechen Sie jeden Benutzer mit seinem Namen an — mit einer dynamischen Willkommensnachricht, die menschlich und nicht generisch wirkt
• Rollenkontext: Zeigen Sie den Titel des Benutzers unter seinem Namen an, damit Teammitglieder und Kunden sofort verstehen, mit wem sie interagieren
• Profilfoto: Laden Sie das Profilbild des Benutzers automatisch für ein elegantes, vertrautes Erscheinungsbild

---

So richtest du es ein

1

Fügen Sie die Profile Card zu Ihrer Seite hinzu

• Ziehen Sie die Komponente AX – Profile Card auf die Experience-Site-Seite

2

Konfigurieren Sie die Kartenkopfzeile

• Setzen Sie die Kopfzeile auf Willkommen, {!User.Record.Name}
• Setzen Sie den Stil auf Überschrift 2
• Setzen Sie den Untertitel auf {!User.Record.Title}

3

Richten Sie das Profilbild ein

• Setzen Sie die Avatar-Bild-URL auf {!User.Record.SmallPhotoUrl}
• Setzen Sie die Avatar-Position auf Oben zentriert

4

Sehen Sie sich eine Vorschau Ihrer Seite an

---

Links

AX - AvatarAX - Akkordeonabschnitt