> 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-profile-card.md). # AX - Profilkarte ## Übersicht **AX - Profilkarte** 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, Vertreter von Partnern 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 Design an und fügen Sie in Experience Builder Aktionsschaltflächen hinzu. Ideal für Teamverzeichnisse, Kontaktlisten, Profile von Community-Mitgliedern, Abschnitte wie „Lernen Sie Ihren Vertreter kennen“ oder überall dort, wo Ihr Portal professionelle Profildarstellungen benötigt.
{% hint style="danger" %} Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht. {% endhint %} ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Profilkarten-Komponente zu erlernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed url="" flowId="5SMa268wZsjsteVlpI8B" %} ## Konfiguration ### Slots Die Avonni-Profilkartenkomponente bietet eine flexible, dynamische Möglichkeit, eine Vielzahl von Informationen über Slots darzustellen. Diese Slots sind definierte Bereiche innerhalb der Komponente, in die andere Komponenten eingefügt werden können, was umfangreiche Anpassungen und Funktionen ermöglicht. #### Slot-Typen 1. **Inhalts-Slot:** * Der primäre Bereich für detaillierte Informationen. * Ideal, um unterschiedliche Elemente wie Text, Listen, Bilder oder benutzerdefinierte Komponenten hinzuzufügen. * Kann verwendet werden, um umfassende Daten oder interaktive Elemente anzuzeigen. 2. **Header-Slot:** * Für Titel, Überschriften oder einleitende Inhalte vorgesehen. * Geeignet für Textbeschriftungen, Avatare, Symbole oder jede Komponente, die Kontext liefert. * Verbessert das unmittelbare Verständnis des Zwecks der Profilkarte. 3. **Aktions-Slot:** * Für interaktive Elemente wie Schaltflächen oder Hyperlinks reserviert. * Erleichtert die Benutzerinteraktion und bietet Aktionen wie das Bearbeiten von Profilen und die Navigation. * Erhöht die Interaktivität der Karte und die Benutzerbindung. ### Eigenschaften **Titel** und **Untertitel** legt die Überschrift und die unterstützende Zeile der Karte fest — verwenden Sie den Untertitel für zusätzlichen Kontext wie Position oder Abteilung. Ihre Textstile (H1–H4, P1–P2) werden auf der Registerkarte „Stil“ festgelegt. **CMS-Hintergrund** und **Hintergrund-Src** legt ein Hintergrundbild für die Karte fest — wählen Sie ein Bild aus dem CMS oder geben Sie eine URL für einen visuell angereicherten Hintergrund an, der Tiefe und Kontext hinzufügt. **Fußzeile anzeigen** zeigt einen Fußbereich auf der Karte an und **Innenabstand des Inhalts** entfernt den Innenabstand um den Inhalt, sodass er bündig mit den Kartenrändern abschließt. **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 (`Kreis` oder `quadratisch`) und **Avatargröße** seine Größe (x-klein bis x-groß). **Avatar-Position** platziert den Avatar auf der Karte (oben links, oben mittig, unten rechts usw.), mit **Avatar-Position in kleinen / mittleren / großen Containern** wobei die Position pro Haltepunkt überschrieben wird. ## Styling {% tabs %} {% tab title="Kopfzeile" %} | Name | Beschreibung | Verwendung | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | **Stilattribute des Headers** | Gestalten Sie den Header umfassend mit Optionen für Hintergrundfarbe, Textfarbe, Schriftgröße, Schriftart, Schriftstärke und sogar benutzerdefinierte Rahmen. | Feinabstimmung des Erscheinungsbilds des Headers, um einen optisch markanten und leicht lesbaren Kopfbereich der Profilkarte zu erstellen. | | {% endtab %} | | | {% tab title="Hintergrund und 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 Profilkarte und stellen sicher, dass sie Ihren Designvorlieben entspricht. | | {% endtab %} | | | | {% endtabs %} | | | ## Anwendungsfälle | Name | Beschreibung | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | [**Konfigurieren der Profilkarte, um Informationen des aktuellen Benutzers anzuzeigen**](/experience-cloud/experience-cloud-de/anleitungen/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | Richten Sie eine Avonni-Karte ein, um Benutzerinformationen auf Experience Cloud anzuzeigen und so die Personalisierung zu verbessern. | ### Beispiel 1: Konto-Hervorhebungsbereich (Container) {% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %} Verwandeln Sie Ihre Partner-Experience-Site mit einer ausgefeilten, informationsreichen Kontoprofilkarte, die wichtige Kontodetails, Branding und Aktionen in den Mittelpunkt stellt. *** #### **Was Sie erreichen werden** * **Markenkopfzeile:** Zeigen Sie Kontonamen und Branche mit einem Firmenlogo für sofortige visuelle Wiedererkennung an * **Kontextbezogene Aktionen:** Starten Sie einen New-Opportunity-Flow direkt von der Karte mit einem einzigen Klick * **Kompakte Datensatzdetails:** Zeigen Sie die relevantesten Kontofelder an, ohne die Seite zu überladen *** #### **Bevor Sie beginnen** * **Benutzerdefiniertes Logo-Feld:** Ein benutzerdefiniertes Feld im Konto-Objekt zur Speicherung der URL des Firmenlogos * **Bildschirm-Flow:** Ein New-Opportunity-Bildschirm-Flow, bereit zum Start * **Schaltflächenkomponente:** In Ihrer Komponentenbibliothek verfügbar * **Datensatzdetail-Komponente:** In Ihrer Komponentenbibliothek verfügbar *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Profilkarte zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profilkarte auf die Experience-Kontodatensatzseite {% endstep %} {% step %} #### **Konfigurieren Sie die Kartenkopfzeile** * Legen Sie Header fest auf `{!Item.Name}` * Legen Sie Stil fest auf `Überschrift 2` * Legen Sie Untertitel fest auf `{!Item.Industry}` {% endstep %} {% step %} #### **Fügen Sie das Firmenlogo hinzu** * Legen Sie die Avatarbild-URL fest auf `{!Item.LogoURL__c}` * Legen Sie Variante fest auf `Kreis` * Legen Sie Größe fest auf `Mittel` {% endstep %} {% step %} #### **Fügen Sie eine benutzerdefinierte Aktionsschaltfläche hinzu** * Ziehen Sie die Schaltflächenkomponente in den Aktions-Slot {% endstep %} {% step %} #### **Fügen Sie ein kompaktes Datensatzlayout hinzu** * Ziehen Sie die Datensatzdetail-Komponente in den Inhalts-Slot {% endstep %} {% step %} #### **Sehen Sie sich Ihre Seite in der Vorschau an** * Überprüfen Sie die Karte im Vorschaumodus, um sicherzustellen, dass Layout, Logo und Aktionsschaltfläche wie erwartet angezeigt werden {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="/pages/a253f06b22ccd6ec4f2fe11cd4ee49a608cc1dce" %} [AX - Datensatzdetail](/experience-cloud/experience-cloud-de/experience-components/ax-record-detail.md) {% endcontent-ref %} {% content-ref url="/pages/ddfa61ffe86d642dee4531c737dab63c342c2df6" %} [AX - Schaltfläche](/experience-cloud/experience-cloud-de/experience-components/ax-button.md) {% endcontent-ref %} *** ### Beispiel 2: Profilinformationen des aktuellen Benutzers {% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %} Geben Sie Ihren Benutzern einen herzlichen, personalisierten Empfang in dem Moment, in dem sie auf Ihrer Experience-Site landen, und fördern Sie von der ersten Besichtigung an die Verbindung und die Akzeptanz der Plattform. *** #### **Was Sie erreichen werden** * **Personalisierte Begrüßung:** Sprechen Sie jeden Benutzer mit Namen an, mit einer dynamischen Willkommensnachricht, die sich menschlich und nicht generisch anfühlt * **Rollenkontext:** Zeigen Sie den Titel des Benutzers unter seinem Namen an, damit Teammitglieder und Kunden sofort verstehen, mit wem sie interagieren * **Profilfoto:** Rufen Sie das Profilbild des Benutzers automatisch für ein ausgefeiltes, vertrautes Gefühl ab *** #### **So richten Sie es ein** {% stepper %} {% step %} ### **Fügen Sie die Profilkarte zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profilkarte auf die Experience-Site-Seite {% endstep %} {% step %} ### **Konfigurieren Sie die Kartenkopfzeile** * Legen Sie Header fest auf `Willkommen, {!User.Record.Name}` * Legen Sie Stil fest auf `Überschrift 2` * Legen Sie Untertitel fest auf `{!User.Record.Title}` {% endstep %} {% step %} ### **Richten Sie das Profilbild ein** * Legen Sie die Avatarbild-URL fest auf `{!User.Record.SmallPhotoUrl}` * Legen Sie Avatar-Position fest auf `Oben mittig` {% endstep %} {% step %} ### **Sehen Sie sich Ihre Seite in der Vorschau an** {% endstep %} {% endstepper %} *** **Links** {% content-ref url="/pages/28f4a607bbfb650ac649c377b14f53a8702df9ab" %} [AX - Avatar](/experience-cloud/experience-cloud-de/experience-components/ax-avatar.md) {% endcontent-ref %} {% content-ref url="/pages/34a96c3b8599eba833479d353aee4771f1eaf87b" %} [AX - Akkordeonabschnitt](/experience-cloud/experience-cloud-de/experience-components/ax-accordion-section.md) {% endcontent-ref %} --- # 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-profile-card.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.