> 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-gallery.md). # AX - Gallery ## Übersicht **AX - Galerie** ist eine Experience-Cloud-Komponente, die Bilder und Inhalte auf Experience-Sites-Seiten in vier Layout-Stilen anzeigt: Karussell (Slideshow), Registerkarten (geordnete Abschnitte), Raster (mehrspaltig) oder Galerie (Bildpräsentation). Verwenden Sie sie, um Produktfotos, Projektportfolios, Bilder von Fallstudien, Ressourcensammlungen oder beliebige visuelle Inhalte anzuzeigen, die Portalbenutzer durchsuchen müssen. Konfigurieren Sie den Layout-Stil, die Navigation und die Bildquellen im Experience Builder ohne Code.
{% hint style="info" %} **Sehen Sie sie in einem echten Projekt** [Herbstkurskatalog](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/fall-course-catalog): Ein Kurskatalog in einem Portal, sechs Fotos mit Preis und verfügbaren Plätzen. {% endhint %} ## Erste Schritte Nutzen Sie dieses einfache Tutorial, um die Grundlagen der Galerie-Komponente kennenzulernen und mit Ihren Anwendungsfällen zu beginnen. {% @arcade/embed url="" flowId="QrGyk84126ycSIM6P0oX" %} ## Konfiguration ### Datenquelle Die **Datenquelle** Hier definieren Sie den Inhalt Ihrer Galerie. AX - Gallery unterstützt zwei Arten von Datenquellen: **Manuell** und **Abfrage**.
| Typ der Datenquelle | Beschreibung | Wann verwenden | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Manuell** | Laden Sie jedes Galerienelement direkt in die Komponente hoch oder geben Sie es ein. Jedes Bild, das über die Medienquellen-Auswahl hinzugefügt wird, erstellt eine **neue** Datei in Ihrer Salesforce Files-Bibliothek. | Einmalige Galerien mit statischem Inhalt, der sich selten ändert (Hero-Bereich einer Landingpage, feste Produktpräsentation, Demos). | | **Abfrage** | Ziehen Sie Elemente dynamisch aus einem Salesforce-Objekt (Produkt, Knowledge, ContentVersion, benutzerdefiniertes Objekt …). Die Galerie wird automatisch aktualisiert, wenn sich die zugrunde liegenden Datensätze ändern. | Jeglicher Inhalt, der mit Salesforce-Daten synchron bleiben, regelmäßig rotieren oder von einem nichttechnischen Team außerhalb des Experience Builders verwaltet werden muss. | {% hint style="info" %} #### **Die Wahl zwischen Manuell und Abfrage** Der manuelle Modus erstellt eine **brandneue Datei** in der Bibliothek jedes Mal, wenn Sie ein Bild hochladen. Er bezieht sich nicht auf Dateien, die bereits in Salesforce Files vorhanden sind. Wenn Sie Ihren Galeriekontent wiederverwenden oder aktualisieren müssen, ohne das Eigenschaften-Panel erneut zu öffnen, verwenden Sie **Abfrage** stattdessen. {% endhint %} #### Freigabemodell mit Avonni AX - Galerie **Einhaltung der Salesforce-Datenfreigaberegeln:** * **Berücksichtigung der Org-Einstellungen:** Avonni Components entsprechen vollständig den vorhandenen Datenfreigabe-Konfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation. * **Keine-Einmischungs-Richtlinie:** Diese Komponenten ändern oder beeinflussen Ihre festgelegten Datenfreigaberegeln in keiner Weise. * **Kontrollierte Sichtbarkeit und Zugriff:** Die Möglichkeit, Datensätze über Avonni-Komponenten anzuzeigen und mit ihnen zu interagieren, wird durch die Freigabeeinstellungen und Benutzerberechtigungen Ihrer Organisation gesteuert ### Vorhandene Salesforce-Files als Ihre Medienquelle verwenden Die **Medienquelle** Das Feld in AX - Gallery ist flexibel, was Sie ihm zuweisen. Sie können es einer URL, einer ContentDocumentId oder einem vollständigen Downloadpfad von Salesforce Files zuordnen. Die Komponente erkennt ContentDocumentIds automatisch und löst sie zur richtigen Vorschau-URL zur Renderzeit auf. So halten Sie eine Galerie so ausgerichtet auf Dateien in der **Salesforce Files-Bibliothek** ohne sie jemals erneut über die Komponente hochzuladen. | Was Sie in Medienquelle eintragen | Was die Galerie rendert | | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | Ein Feld, das eine **ContentDocumentId** (beginnt mit `069…`) | Die neueste Version der Datei wird aufgelöst und angezeigt. Die Komponente erkennt automatisch `069…` IDs. | | Das Standard- **VersionDataURL** Feld bei einer Abfrage von `ContentVersion` | Die Datei wird heruntergeladen und angezeigt. Empfohlen, wenn Ihr Quellobjekt ContentVersion ist. | | Ein **Shepherd-URL** erstellt mit einem Ausdruck wie `/sfc/servlet.shepherd/version/download/{{Record.Id}}` | Die im URL referenzierte exakte Version wird angezeigt. Nützlich für die Erstellung benutzerdefinierter URLs. | | Ein **Öffentliche URL** (externes Bild, das anderswo gehostet wird) | Das Bild wird aus der externen Quelle geladen. | #### **So richten Sie es im Abfragemodus ein** 1. In der **Datenquelle**, wählen Sie **Abfrage** und wählen Sie Ihr Quellobjekt (`ContentVersion`, ein benutzerdefiniertes Objekt, das Dateireferenzen enthält, oder jedes Objekt mit einem Bildfeld). 2. Wenden Sie einen Filter an, der festlegt, welche Datensätze angezeigt werden sollen (nach Titelschema, Tag, benutzerdefiniertem Feld, Picklist-Wert usw.). 3. In **Datenzuordnungen**, ordnen Sie **Medienquelle** basierend auf Ihrem Quellobjekt zu: * **Abfrage von ContentVersion:** ordnen Sie Medienquelle dem Standard- `Versiondaten-URL` Feld zu. * **Abfrage eines benutzerdefinierten Objekts mit einem ContentDocumentId-Feld:** ordnen Sie Medienquelle direkt diesem Feld zu (die Komponente erkennt `069…` IDs automatisch und löst sie auf). * **Abfrage eines beliebigen Objekts mit einem vollständigen Bild-URL-Feld:** ordnen Sie Medienquelle direkt diesem Feld zu. Sobald dies konfiguriert ist, ist das Aktualisieren des Inhalts Ihrer Galerie so einfach wie das Ersetzen der Dateien in der Salesforce Files-Bibliothek oder das Aktualisieren des Referenzfelds in Ihren Datensätzen. {% hint style="info" %} #### Vorschau im Experience Builder Bilder, die auf Salesforce Files verweisen, werden in der Vorschau des Experience Builders möglicherweise nicht angezeigt, da sich der Builder nicht als Portalbenutzer authentifiziert. Sie werden korrekt angezeigt, sobald Sie als Community-Benutzer auf der veröffentlichten Site angemeldet sind {% endhint %} ### Eigenschaften **API-Name** gibt der Komponente eine eindeutige Kennung, mit der sie referenziert wird (3 bis 30 Zeichen; Buchstaben, Ziffern, Unterstriche und Bindestriche). **Untertitel**, **Titel** und **Inhalt** sind die Texte auf Komponentenebene, die oberhalb der Elemente angezeigt werden — eine kurze Beschriftung, die Überschrift und der darunterstehende Fließtext. Jeder hat daneben seine eigene Textstil-Einstellung — **Untertiteltextstil**, **Titeltextstil** und **Inhaltstextstil** — mit `Überschrift 1` bis `Überschrift 4` und `Absatz 1` / `Absatz 2`. **Medienposition** ordnet die Medien jedes Elements relativ zu diesem Inhalt an: `Oben links`, `Oben mittig` (der Standard), `Oben rechts`, `Links`, `Rechts`, `Unten links`, `Unten zentriert` oder `Unten rechts`. **Anzahl der Spalten** legt fest, wie viele Elemente nebeneinander angezeigt werden — in der `Karussell` -Variante, wie viele sich auf einer Fläche befinden. Standardmäßig 1. **Keine-Ergebnisse-Nachricht** ersetzt den Standard-Leerzustand durch Ihren eigenen Text, wenn die Datenquelle keine Elemente zurückgibt, und **Attribute der Keine-Ergebnisse-Nachricht** steuert, was dieser Leerzustand anzeigt — **Keine-Ergebnisse-Bild ausblenden** blendet die Illustration aus, **Keine-Ergebnisse-Nachricht ausblenden** entfernt den Text. Beide sind standardmäßig deaktiviert. ### Karussell **Karussell** enthält die Einstellungen für die `Karussell` -Variante: * **Indikatorvariante**: das Erscheinungsbild der Fortschrittsindikatoren, `Basis` (der Standard) oder `Schattiert`. * **Indikator ausblenden**: blendet den Fortschrittsindikator aus. * **Navigation ausblenden**: blendet die Pfeile nach links und rechts aus. * **Endlos**: springt nach dem letzten Element zurück zum ersten. * **Automatische Aktualisierung deaktivieren**: verhindert, dass das Karussell nach dem letzten Bild weiterläuft. * **Automatisches Scrollen deaktivieren**: stoppt das automatische Scrollen, sodass Benutzer mit den Indikatoren durch die Elemente wechseln. * **Scroll-Dauer**: wie lange jedes Bild vor dem nächsten angezeigt wird, standardmäßig 5 Sekunden. ### Variante **Variante** wählt das Layout, in dem die Elemente gerendert werden: `Karussell` (der Standard), `Registerkarten`, `Raster` oder `Galerie`. Jede Variante zeigt dieselben feldbezogenen Angaben pro Element — **Titel**, **Beschreibung** und **Medienquelle** — und führt die **Verknüpfen mit** Interaktion des Elements aus, wenn darauf geklickt wird. #### **Karussell** Elemente werden jeweils auf einer Fläche angezeigt, als Slideshow. **Anzahl der Spalten** legt fest, wie viele Elemente sich in einem breiten Container eine Fläche teilen; in einem schmalen Container enthält jede Fläche ein einzelnes Element.
Die Fläche wechselt automatisch alle **Scroll-Dauer** (standardmäßig 5 Sekunden), sofern nicht **Automatisches Scrollen deaktivieren** aktiviert ist, und **Endlos** springt von der letzten Fläche zurück zur ersten. Unter den Flächen befinden sich die Fortschrittsindikatoren, und links und rechts stehen Zurück-/Weiter-Pfeile; **Indikator ausblenden** und **Navigation ausblenden** entfernen Sie sie. All dies wird im **Karussell** Abschnitt festgelegt. #### **Registerkarten** Jedes Element wird zu einer Registerkarte, beschriftet mit dem **Titel** Titel des Elements **Beschreibung**und mit dem Untertitel seines **Medienposition**. Wenn Sie eine Registerkarte auswählen, werden die Medien dieses Elements gemäß
**Medienposition** legt auch die Richtung der Registerkartenleiste fest: `Links` oder `Rechts` stapelt die Registerkarten vertikal neben den Medien, mit dem auf Komponentenebene **Untertitel**, **Titel** und **Inhalt** daneben; jede andere Position ordnet die Registerkarten horizontal an, wobei diese drei Texte darüber stehen. #### **Raster** Elemente werden in Reihen aus Zellen gleicher Breite angeordnet, **Anzahl der Spalten** pro Reihe, wobei jede Reihe von links nach rechts gefüllt wird, bevor die nächste beginnt. Jedes Element wird auf einmal angezeigt; nichts wird hinter einer Navigation verborgen. #### **Galerie** Elemente werden auf **Anzahl der Spalten** Spalten verteilt, wobei jede Spalte ihre Elemente vertikal stapelt, sodass Elemente unterschiedlicher Höhe bündig an dem darüberliegenden sitzen, statt sich in Reihen auszurichten. Wie bei **Raster**, wird jedes Element auf einmal angezeigt. ## Interaktionen Der Abschnitt „Link zu“ bestimmt, was passiert, wenn ein Benutzer auf ein Element in Ihrer Avonni-Galerie klickt. Verwenden Sie ihn, um Benutzer auf Detailseiten zu leiten, neue Inhalte zu öffnen oder andere Aktionen auszulösen. **Beispiel:** * Präsentieren Sie beispielsweise in einer Galerie besondere Häuser und ermöglichen Sie Benutzern, auf jedes Bild zu klicken, um auf einer separaten Seite weitere Details anzuzeigen. ## Formatierung Mit den Stileigenschaften können Sie das visuelle Erscheinungsbild jedes Elements in der Galerie steuern. Die Einstellungen sind nach ihrer Wirkung gruppiert.
{% tabs %} {% tab title="Allgemein" %} Gilt für jede Variante. | Einstellung | Was es steuert | | ---------------- | ------------------------------------------------------------------------------------------------------- | | **Größe** | Breite, Höhe und Überlauf der Komponente. | | **Rahmen** | Farbe, Größe, Stil und Radius des Rahmens um die Komponente. | | **Außenabstand** | Äußerer Abstand um die Komponente. | | **Innenabstand** | Innerer Abstand der Komponente. | | **Untertitel** | Farbe, Schriftart und Zeilenbegrenzung des auf Komponentenebene **Untertitel**. | | **Titel** | Farbe, Schriftart, horizontale Ausrichtung und Zeilenbegrenzung des auf Komponentenebene **Titel**. | | **Inhalt** | Farbe, Schriftart und horizontale Ausrichtung des auf Komponentenebene **Inhalt**. | | **Medien** | **Objektanpassung** — wie das Bild oder Video jedes Elements sein Feld ausfüllt. | | **Flow-Dialog** | **Flow-Dialog-Kopfzeile** und **Flow-Dialog-Fußzeile** eines aus einem Element geöffneten Flow-Dialogs. | | {% endtab %} | | {% tab title="Elemente" %} Gilt für die **Karussell**, **Raster** und **Galerie** Varianten — in der **Registerkarten** Variante sind die Elemente Registerkarten, gestaltet unter **Registerkarten**. | Einstellung | Was es steuert | | -------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | **Galerie/Raster/Karussell-Element** | Hintergrundfarbe, Rahmen (Farbe, Größe, Stil, Radius) und Inhaltsrahmenradius eines Elements. | | **Titel des Galerie-/Raster-/Karussell-Elements** | Farbe, Schriftart und Zeilenbegrenzung des Titels jedes Elements. | | **Beschreibung des Galerie-/Raster-/Karussell-Elements** | Farbe und Schriftart der Beschreibung jedes Elements. | | **Bild der Galerie-/Raster-/Karussell-** | Hintergrundfarbe, Höhe und Radius der Medien jedes Elements. | | {% endtab %} | | {% tab title="Karussell" %} Gilt nur, wenn **Variante** auf `Karussell`. | Einstellung | Was es steuert | | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | **Aktiver Karussell-Indikator** | Hintergrund und Rahmen des Indikators für die aktuell sichtbare Fläche, einschließlich seiner **Schattiert** Variante. | | **Inaktiver Karussell-Indikator** | Dieselben Einstellungen für die Indikatoren der anderen Flächen. | | **Karussell-Navigationsschaltfläche** | Hintergrund, Symbol und Rahmen der Zurück-/Weiter-Schaltflächen in ihrem normalen, Hover- und deaktivierten Zustand. | | {% endtab %} | | {% tab title="Registerkarten" %} Gilt nur, wenn **Variante** auf `Registerkarten`. | Einstellung | Was es steuert | | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | **Registerkarte** | Vertikale Ausrichtung, Breite, Höhe, Zeilenhöhe sowie linker/rechter Abstand jeder Registerkarte. | | **Registerkartenrahmen** | Größe und Farbe des Rahmens um jede Registerkarte. | | **Rahmen der aktiven/hovernden Registerkarte** | Dieselben beiden Einstellungen für die aktive Registerkarte und den Hover-Zustand. | | **Registerkartenhintergrund** | Hintergrundfarbe der aktiven Registerkarte und des Hover-Zustands. | | **Registerkartenbeschriftung** | Farbe, Schriftart und Textschatten der Registerkartenbeschriftungen (der Elemente' **Titel**), jeweils mit einem aktiven und einem Hover-Wert. | | **Untertitel der Registerkarte** | Dieselben Einstellungen für die Untertitel der Registerkarten (der Elemente' **Beschreibung**). | | {% endtab %} | | | {% endtabs %} | | ## Fehlerbehebung | Problem | Ursache | Lösung | | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Bilder werden im Experience Builder nicht in der Vorschau angezeigt, auf der veröffentlichten Website jedoch korrekt dargestellt** | Experience Builder authentifiziert sich nicht als Portalbenutzer, daher kann er während der Vorschau keine Bilder aus Salesforce Files abrufen. | Erwartetes Verhalten. Melden Sie sich auf der veröffentlichten Website als Community-Benutzer an, um zu überprüfen, ob die Bilder korrekt dargestellt werden. | | **„Keine Vorschau verfügbar“ erscheint im manuellen Modus** | Das hochgeladene Bild wurde nicht als öffentlicher Link markiert, daher können Portalbenutzer es nicht laden. | Laden Sie das Bild erneut hoch und aktivieren Sie **Öffentlicher Link** beim Hochladen oder wechseln Sie in den Abfragemodus, in dem die Standard-Freigaberegeln gelten. | | **Der manuelle Modus zwingt Sie dazu, jedes Mal ein erneutes Hochladen vorzunehmen, wenn Sie ein Bild ändern möchten** | Der manuelle Modus ist ein direkter Uploader — er verweist nicht auf vorhandene Salesforce-Files. | Verwenden Sie den **Abfrage** Modus mit ContentVersion oder einem benutzerdefinierten Objekt mit Dateireferenzen. Siehe *Vorhandene Salesforce-Files als Ihre Medienquelle verwenden* oben. | | **Galerie ist für Portalbenutzer leer, funktioniert aber in der Vorschau des Experience Builders** | Dem Profil des Portalbenutzers fehlt der Zugriff auf das abgefragte Objekt oder auf die referenzierten Dateien. | Prüfen Sie die Objektberechtigungen des Profils, die feldbasierte Sicherheit und den Bibliotheks-/Freigabezugriff auf `ContentVersion` oder das Quellobjekt. | | **Bilder werden überhaupt nicht angezeigt (weder in der Vorschau noch auf der veröffentlichten Website)** | Medienquelle ist einem Feld zugeordnet, das keine gültige Dateireferenz enthält (ContentDocumentId, beginnend mit `069…`, die `Versiondaten-URL` Feld auf ContentVersion oder eine öffentliche Bild-URL). | Prüfen Sie, was das zugeordnete Feld tatsächlich enthält. Wenn Sie ContentVersion abfragen, verwenden Sie das Standard- `Versiondaten-URL` Feld. Speichern Sie bei benutzerdefinierten Objekten eine ContentDocumentId (beginnend mit `069…`) und ordnen Sie Medienquelle direkt diesem Feld zu. | | **Die Galerie zeigt die richtigen Titel, aber alle Bilder sind defekt** | Medienquelle ist einem Feld zugeordnet, das keine ContentDocumentId oder gültige URL enthält. | Bestätigen Sie in den Datenzuordnungen, dass Medienquelle auf ein ContentDocumentId-Feld, eine Shepherd-URL oder eine gültige öffentliche Bild-URL verweist. | ## Anwendungsfälle ### Beispiel 1: Kunden-News-Karussell {% @arcade/embed url="" flowId="pOjxSsq8rQ3YgZFvjMgr" %} Informieren und binden Sie Ihre Kunden, indem Sie Ihre neuesten Artikel direkt auf Ihrer Experience-Cloud-Startseite präsentieren. Mit der AX-Gallery-Komponente können Sie ganz einfach ein dynamisches, bildreiches News-Karussell anzeigen, das sich automatisch aktualisiert, sobald neue Inhalte veröffentlicht werden. *** #### **Was Sie erreichen werden** * **Frische Inhalte auf einen Blick:** Stellen Sie Ihre neuesten Knowledge-Artikel samt Bildern auf der Startseite bereit, damit Besucher keine Aktualisierung verpassen. * **Müheloses Durchstöbern:** Lassen Sie Kunden in einem klaren, strukturierten Karussell-Layout durch Unternehmensnachrichten scrollen. * **Gezielte Filterung:** Zeigen Sie nur News-Artikel an, indem Sie ein benutzerdefiniertes Picklist-Feld nutzen, sodass das Karussell fokussiert und relevant bleibt. *** #### **Bevor Sie beginnen** * **`ImageId__c` Feld:** Erstellen Sie ein Textfeld auf dem Knowledge-Objekt, um die Content Document ID des Bildes jedes Artikels zu speichern. * **`Type__c` Feld:** Erstellen Sie ein Picklist-Feld auf dem Knowledge-Objekt, um Artikel zu kategorisieren, und stellen Sie sicher, dass der **News** -Wert vorhanden ist und Ihren Artikeln zugewiesen wird. *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Komponente zu Ihrer Seite hinzu** * Ziehen Sie die **AX-Galerie** -Komponente auf die gewünschte Seite im Experience Builder. {% endstep %} {% step %} #### **Passen Sie die Anzeige der Komponente an** * Setzen Sie die **Titel** bis `News-Karussell`. * Setzen Sie die **Untertitel** bis `Durchsuchen Sie unsere wöchentlichen Artikel`. * Setzen Sie die **Anzahl der Spalten** bis `3`. {% endstep %} {% step %} #### **Richten Sie Ihre Datenquelle ein** * Erstellen Sie eine neue Abfrage in der Datenquellenkonfiguration. * Wählen Sie **Knowledge** als Objekt (achten Sie darauf, die zweite Knowledge-Option in der Liste auszuwählen). * Fügen Sie einen Filter hinzu: **Type\_\_c entspricht** `News`. * Legen Sie die Sortierreihenfolge fest auf **Erstellungsdatum, absteigend** damit Ihre neuesten Artikel immer zuerst angezeigt werden. {% endstep %} {% step %} #### **Konfigurieren Sie die Datenzuordnung** * Karte **Titel** auf das Knowledge- `Titel` Feld zu. * Karte **Medienquelle** bis `ImageId__c` um Artikelbilder abzurufen. * Setzen Sie die **Wiedergaberate** bis `5`. {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Verwenden Sie die Vorschau des Experience Builders, um vor der Veröffentlichung zu bestätigen, dass Ihr Karussell die richtigen Artikel, Bilder und das richtige Layout anzeigt. {% endstep %} {% endstepper %} *** ### Beispiel 2: Produktgalerie für Kunden {% @arcade/embed url="" flowId="aIu9ZNuteXdewe19LJL0" %} Bieten Sie Ihren Kunden direkt von Ihrer Startseite aus eine visuell ansprechende Möglichkeit, Ihren Produktkatalog zu entdecken. Durch die Kombination der AX-Gallery-Komponente mit Ihren Produktdaten können Sie ein auffälliges Karussell erstellen, das hervorgehobene Produkte präsentiert und Besucher direkt zu Produktdetailseiten führt. *** #### **Was Sie erreichen werden** * **Eine visuelle Produktpräsentation:** Zeigen Sie hervorgehobene Kopfhörer in einem bildstarken Karussell, das zum Stöbern einlädt. * **Nahtlose Navigation:** Ermöglichen Sie Kunden, bequem vom Karussell direkt zu einzelnen Produktdetailseiten zu wechseln. * **Ein kuratiertes Startseitenerlebnis:** Heben Sie die wichtigsten Produkte hervor, indem Sie auf der Startseite nur Ihren hervorgehobenen Katalog anzeigen. *** #### **Bevor Sie beginnen** * **`Type__c` Feld:** Erstellen Sie ein Picklist-Feld auf dem Product2-Objekt und stellen Sie sicher, dass der **Headphone** -Wert vorhanden ist, damit Sie das Karussell auf die richtigen Produkte filtern können. * **`ContentDocumentId__c` Feld:** Erstellen Sie ein Textfeld auf dem Product2-Objekt, um die Bild-URL für jedes Produkt zu speichern. *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Komponente zu Ihrer Seite hinzu** * Ziehen Sie die **AX-Galerie** -Komponente auf die gewünschte Seite im Experience Builder. {% endstep %} {% step %} #### **Passen Sie die Anzeige der Komponente an** * Setzen Sie die **Titel** bis `Produkt-Karussell`. * Setzen Sie die **Untertitel** bis `Entdecken Sie unsere hervorgehobenen Produkte!` * Setzen Sie die **Anzahl der Spalten** bis `3`. {% endstep %} {% step %} #### **Richten Sie Ihre Datenquelle ein** * Erstellen Sie eine neue Abfrage in der Datenquellenkonfiguration. * Wählen Sie **Produkt** als Objekt. {% endstep %} {% step %} #### **Konfigurieren Sie die Datenzuordnung** * Karte **Titel** auf das `Produktname` Feld zu. * Karte **Medienquelle** bis `ContentDocumentId__c` um das Bild jedes Produkts anzuzeigen. * Setzen Sie die **Wiedergaberate** bis `5`. {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Verwenden Sie die Vorschau des Experience Builders, um vor der Veröffentlichung zu bestätigen, dass Ihre Produkte, Bilder und das Karussell-Layout wie erwartet angezeigt werden. {% endstep %} {% endstepper %} --- # 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-gallery.md?ask=&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.