> 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 - Galerie ## Übersicht **AX - Galerie** ist eine Experience-Cloud-Komponente, die Bilder und Inhalte auf Experience-Sites-Seiten in vier Layout-Stilen anzeigt: Karussell (Slideshow), Tabs (geordnete Abschnitte), Raster (mehrspaltig) oder Galerie (Bildpräsentation). Verwenden Sie sie, um Produktfotos, Projektportfolios, Fallstudienbilder, Ressourcensammlungen oder beliebige visuelle Inhalte anzuzeigen, die Portalbenutzer durchsuchen müssen. Konfigurieren Sie den Layout-Stil, die Navigation und die Bildquellen in Experience Builder ohne Code.
*** ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Galerie-Komponente zu lernen und mit dem Aufbau Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed url="" flowId="QrGyk84126ycSIM6P0oX" %} *** ## Mit Salesforce-Daten verbinden Die **Datenquelle** ist der Bereich, in dem Sie den Inhalt Ihrer Galerie definieren. AX - Gallery unterstützt zwei Typen von Datenquellen: **Manuell** und **Abfrage**.
| Datenquellentyp | Beschreibung | Wann verwenden | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Manuell** | Laden Sie jedes Galerieelement direkt in die Komponente hoch oder geben Sie es ein. Jedes über die Medienquellen-Auswahl hinzugefügte Bild erstellt eine **neue** Datei in Ihrer Salesforce-Files-Bibliothek. | Einmalige Galerien mit statischem Inhalt, der sich selten ändert (Hero-Bereich der Landingpage, feste Produktpräsentation, Demos). | | **Abfrage** | Rufen Sie Elemente dynamisch aus einem Salesforce-Objekt ab (Produkt, Knowledge, ContentVersion, benutzerdefiniertes Objekt …). Die Galerie wird automatisch aktualisiert, wenn sich die zugrunde liegenden Datensätze ändern. | Alle Inhalte, die mit Salesforce-Daten synchron bleiben, regelmäßig wechseln oder von einem nichttechnischen Team außerhalb von Experience Builder verwaltet werden müssen. | {% hint style="info" %} #### **Auswahl zwischen Manuell und Abfrage** Der manuelle Modus erstellt jedes Mal eine **brandneue Datei** in der Bibliothek, wenn Sie ein Bild hochladen. Er verweist nicht auf Dateien, die bereits in Salesforce Files vorhanden sind. Wenn Sie Ihre Galerieninhalte erneut verwenden oder aktualisieren müssen, ohne das Eigenschaftenfenster erneut zu öffnen, verwenden Sie stattdessen **Abfrage** stattdessen. {% endhint %} #### Modellfreigabe mit Avonni AX - Gallery **Einhaltung der Salesforce-Datenfreigaberegeln:** * **Org-Einstellungen beachten:** Avonni-Komponenten entsprechen vollständig den vorhandenen Datenfreigabe-Konfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation. * **Keine Beeinträchtigung:** Diese Komponenten verändern oder beeinflussen Ihre zuvor 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 von Ihrer Organisation definierten Freigabeeinstellungen und Benutzerberechtigungen gesteuert *** ### Vorhandene Salesforce Files als Ihre Medienquelle verwenden Die **Medienquelle** das Feld in AX - Gallery ist flexibel in Bezug darauf, womit Sie es befüllen. Sie können es einer URL, einer ContentDocumentId oder einem vollständigen Salesforce-Files-Downloadpfad zuordnen. Die Komponente erkennt ContentDocumentIds automatisch und löst sie zur Laufzeit in die richtige Vorschau-URL auf. So verknüpfen Sie eine Galerie mit Dateien in der **Salesforce-Files-Bibliothek** ohne jemals über die Komponente erneut hochzuladen. | Was Sie in Medienquelle eintragen | Was die Galerie rendert | | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | | Ein Feld, das eine **ContentDocumentId** enthält (beginnt mit `069…`) | Die neueste Version der Datei wird aufgelöst und angezeigt. Die Komponente erkennt `069…` IDs automatisch. | | Das Standardfeld **VersionDataURL** beim Abfragen von `ContentVersion` | Die Datei wird heruntergeladen und angezeigt. Empfohlen, wenn Ihr Quellobjekt ContentVersion ist. | | Eine **Shepherd-URL** erstellt mit einem Ausdruck wie `/sfc/servlet.shepherd/version/download/{{Record.Id}}` | Die exakt in der URL referenzierte Version wird angezeigt. Nützlich für die benutzerdefinierte URL-Erstellung. | | Eine **Öffentliche URL** (extern gehostetes Bild) | 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 aus (`ContentVersion`, ein benutzerdefiniertes Objekt mit Dateiverweisen oder ein beliebiges Objekt mit einem Bildfeld). 2. Wenden Sie einen Filter an, der festlegt, welche Datensätze angezeigt werden sollen (nach Titelnamen, 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 `Version Data URL` Feld zu. * **Abfrage eines benutzerdefinierten Objekts mit einem ContentDocumentId-Feld:** Ordnen Sie Medienquelle direkt diesem Feld zu (die Komponente erkennt `069…` IDs und löst sie automatisch auf). * **Abfrage eines beliebigen Objekts mit einem vollständigen Bild-URL-Feld:** Ordnen Sie Medienquelle direkt diesem Feld zu. Sobald konfiguriert, ist das Aktualisieren der Inhalte Ihrer Galerie so einfach wie das Ersetzen der Dateien in der Salesforce-Files-Bibliothek oder das Aktualisieren des Referenzfelds auf Ihren Datensätzen. {% hint style="info" %} #### Vorschau in Experience Builder Bilder, die auf Salesforce Files verweisen, werden in der Experience-Builder-Vorschau möglicherweise nicht angezeigt, da sich der Builder nicht als Portalbenutzer authentifiziert. Sie werden korrekt angezeigt, sobald Sie sich auf der veröffentlichten Site als Community-Benutzer anmelden. {% endhint %} *** ## Eine Variante festlegen ### **Karussells** Die Karussell-Variante bietet eine dynamische, ansprechende Möglichkeit, Ihre Inhalte, Bilder oder Karten zu präsentieren. Sie ist darauf ausgelegt, Elemente nacheinander in einem Slideshow-Format anzuzeigen, was sie zu einer ausgezeichneten Wahl für hervorgehobene Inhalte, Produktbilder oder wichtige Ankündigungen macht.
**Wann verwenden:** Verwenden Sie die Karussell-Variante, wenn Sie: * die Aufmerksamkeit der Benutzer mit einer optisch ansprechenden Präsentation gewinnen möchten. * mehrere Elemente oder Bilder platzsparend anzeigen möchten. * rotierende Banner oder Bereiche mit hervorgehobenen Inhalten auf Ihrer Site erstellen möchten. **Funktionen:** * **Navigationselemente:** Navigieren Sie durch das Karussell mit intuitiven Steuerelementen wie Pfeiltasten oder Seitenpunkten. * **Automatische Wiedergabe:** Legen Sie fest, dass das Karussell die Elemente automatisch durchläuft, mit der Möglichkeit, zu pausieren und fortzusetzen. * **Anpassbares Erscheinungsbild:** Passen Sie das Aussehen und Verhalten des Karussells an das Design Ihrer Site an, indem Sie Elemente wie Übergangseffekte und Anzeigedauer anpassen. ### **Registerkarten** Die Tabs-Variante führt eine organisierte, tabellarische Methode zur Inhaltspräsentation ein. Diese Variante ist ideal für die Kategorisierung von Informationen und bietet ein sauberes, strukturiertes Layout, mit dem Benutzer schnell navigieren und auf verschiedene Inhaltsabschnitte zugreifen können.
**Wann verwenden:** Erwägen Sie die Tabs-Variante, wenn Sie: * kategorisierte Informationen in einem klaren, segmentierten Format präsentieren müssen. * Benutzern ermöglichen möchten, problemlos zwischen verschiedenen Inhaltsabschnitten zu wechseln, ohne die Seite zu verlassen. * Inhalte wie Produktspezifikationen, Servicekategorien oder Informations-Tabs benutzerfreundlich organisieren möchten. **Funktionen:** * **Segmentierter Inhalt:** Organisieren Sie Ihre Inhalte in klar definierten Tabs, damit Benutzer verschiedene Bereiche leicht finden und anzeigen können. * **Benutzerfreundliche Navigation:** Ermöglichen Sie Benutzern, nahtlos zwischen Tabs zu wechseln, und sorgen Sie so für ein flüssiges, intuitives Erlebnis. * **Anpassbares Design:** Passen Sie das Erscheinungsbild der Tabs an Ihr Branding und die Ästhetik Ihrer Site an, indem Sie Elemente wie Tab-Beschriftungen, Layout und Farbschemata ändern. ### **Raster** Stellt Inhalte in einem strukturierten, mehrspaltigen Layout dar. Jedes Element belegt eine Zelle im Raster. **Wann verwenden:** Ideal für die Anzeige einer Sammlung von Elementen, bei denen gleiche Gewichtung gewünscht ist, wie zum Beispiel: * Produktlisten * Profile von Teammitgliedern * Vorschauen von Blogbeiträgen **Funktionen** * Anpassbare Anzahl von Spalten * Möglichkeit, den Abstand (Gap) zwischen Elementen festzulegen * Optionen für Bilder, Titel, Beschreibungen und Call-to-Action-Schaltflächen innerhalb jeder Rasterzelle ### **Galerie** Ein visuell ausgerichtetes Layout, das Bilder prominent präsentiert. **Wann verwenden:** Am besten geeignet für bildbasierte Inhalte, wie zum Beispiel: * Fotografie-Portfolios * Produktgalerien * bildzentrierte hervorgehobene Inhalte **Funktionen** * Fokus auf große, hochwertige Bilder * Optionen zum Einfügen von Bildunterschriften oder Lightbox-Funktionalität zum Hineinzoomen in Bilder * Potenzial für kreative Layouts und Hover-Effekte *** ## 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 hervorgehobene Häuser in einer Galerie und ermöglichen Sie Benutzern, auf jedes Bild zu klicken, um auf einer separaten Seite weitere Details anzuzeigen. *** ## Darstellung und Stil Mit den Stilattributen können Sie das visuelle Erscheinungsbild jedes Elements in der Galerie steuern. Die Einstellungen sind nach ihrer Wirkung gruppiert.
### Allgemeine Galerieeinstellungen Gilt für alle Varianten (Karussell, Tabs, Raster, Galerie). | Einstellung | Was es steuert | | ---------------- | --------------------------------------------------------------------------- | | **Größe** | Gesamte Breite und Höhe der Galerie. | | **Rahmen** | Rahmenstil, -breite und -farbe um die Galerie. | | **Beschriftung** | Formatierung des Beschriftungstextes, der bei jedem Element angezeigt wird. | | **Titel** | Formatierung des Titels auf jedem Element. | | **Inhalt** | Formatierung des Hauptinhaltsbereichs innerhalb jedes Elements. | | **Medien** | Wie Bilder und Videos angezeigt werden (Anpassung, Ausrichtung, Größe). | ### Karussell-Variante Gilt nur, wenn **Variante** auf `Karussells`. | Einstellung | Was es steuert | | --------------------------------------- | ------------------------------------------------------------- | | **Slideshow-Element** | Hintergrund, Ausrichtung und Abstand jedes Karussellelements. | | **Titel des Slideshow-Elements** | Schriftart, Größe und Farbe der Elementtitel. | | **Beschreibung des Slideshow-Elements** | Schriftart, Größe und Farbe der Elementbeschreibungen. | | **Slideshow-Bild** | Größe und Rahmen der Bilder innerhalb jedes Elements. | | **Aktiver Slideshow-Indikator** | Stil des Indikators für das aktuell angezeigte Element. | | **Inaktiver Slideshow-Indikator** | Stil der Indikatoren für nicht aktive Elemente. | | **Slideshow-Navigationsschaltfläche** | Stil der Navigationsschaltflächen für vorheriges/nächstes. | ### Tabs-Variante Gilt nur, wenn **Variante** auf `Registerkarten`. | Einstellung | Was es steuert | | ---------------------------- | --------------------------------------------------- | | **Tab** | Formatierung jedes einzelnen Tabs. | | **Tab-Rahmen** | Rahmen um jeden Tab. | | **Aktiver/Hover-Tab-Rahmen** | Rahmen für den aktiven Tab und den Hover-Zustand. | | **Tab-Hintergrund** | Hintergrundfarbe oder -bild für Tabs. | | **Tab-Beschriftung** | Schriftart, Größe und Farbe der Tab-Beschriftungen. | | **Tab-Untertitel** | Schriftart, Größe und Farbe der Tab-Untertitel. | *** ## Fehlerbehebung | Problem | Ursache | Lösung | | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Bilder werden in Experience Builder nicht in der Vorschau angezeigt, erscheinen aber auf der veröffentlichten Site korrekt** | Experience Builder authentifiziert sich nicht als Portalbenutzer und kann daher in der Vorschau keine Bilder aus Salesforce Files abrufen. | Erwartetes Verhalten. Melden Sie sich auf der veröffentlichten Site als Community-Benutzer an, um zu überprüfen, ob die Bilder korrekt angezeigt werden. | | **"Keine Vorschau verfügbar" erscheint im manuellen Modus** | Das hochgeladene Bild wurde nicht als öffentlicher Link markiert, sodass Portalbenutzer es nicht laden können. | Laden Sie das Bild erneut hoch und aktivieren Sie **Öffentlicher Link** beim Hochladen oder wechseln Sie in den Abfragemodus, in dem die standardmäßigen Freigaberegeln gelten. | | **Der manuelle Modus zwingt Sie dazu, jedes Mal neu hochzuladen, wenn Sie ein Bild ändern möchten** | Der manuelle Modus ist ein direkter Uploader – er verweist nicht auf vorhandene Salesforce Files. | Verwenden Sie **Abfrage** den Modus mit ContentVersion oder einem benutzerdefinierten Objekt, das Dateiverweise enthält. Siehe *Vorhandene Salesforce Files als Ihre Medienquelle verwenden* oben. | | **Die Galerie ist für Portalbenutzer leer, funktioniert aber in der Experience-Builder-Vorschau** | Dem Profil des Portalbenutzers fehlt der Zugriff auf das abgefragte Objekt oder auf die referenzierten Dateien. | Prüfen Sie Objektberechtigungen des Profils, Feldzugriff auf Feldebene und Bibliotheks-/Freigabezugriff auf `ContentVersion` oder das Quellobjekt. | | **Bilder werden überhaupt nicht angezeigt (weder in der Vorschau noch auf der veröffentlichten Site)** | Medienquelle ist einem Feld zugeordnet, das keinen gültigen Dateiverweis enthält (ContentDocumentId beginnend mit `069…`, dem `Version Data URL` Feld auf ContentVersion oder einer öffentlichen Bild-URL). | Überprüfen Sie, was das zugeordnete Feld tatsächlich enthält. Beim Abfragen von ContentVersion verwenden Sie das Standard `Version Data 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 an, aber alle Bilder sind fehlerhaft** | 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. | *** ## Anwendungsbeispiele ### Beispiel 1: Kunden-News-Karussell {% @arcade/embed url="" flowId="pOjxSsq8rQ3YgZFvjMgr" %} Halten Sie Ihre Kunden informiert und eingebunden, indem Sie Ihre neuesten Artikel direkt auf Ihrer Experience-Cloud-Startseite präsentieren. Die AX-Galerie-Komponente macht es einfach, ein dynamisches, bildreiches Nachrichtenkarussell anzuzeigen, 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 Durchsuchen:** Lassen Sie Kunden durch Unternehmensnachrichten in einem sauberen, strukturierten Karussell-Layout blättern. * **Gezielte Filterung:** Zeigen Sie nur News-Artikel an, indem Sie ein benutzerdefiniertes Picklist-Feld verwenden, damit 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 **Neuigkeiten** Wert vorhanden ist und auf Ihre Artikel angewendet wird. *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Komponente Ihrer Seite hinzu** * Ziehen Sie die **AX Gallery** Komponente auf die gewünschte Seite in Experience Builder. {% endstep %} {% step %} #### **Komponentenanzeige anpassen** * Setzen Sie den **Titel** auf `News-Karussell`. * Setzen Sie den **Beschriftung** auf `Stöbern Sie in unseren wöchentlichen Artikeln`. * Setzen Sie den **Anzahl der Spalten** auf `3`. {% endstep %} {% step %} #### **Richten Sie Ihre Datenquelle ein** * Erstellen Sie eine neue Abfrage in der Konfiguration der Datenquelle. * Wählen Sie **Knowledge** als Objekt (stellen Sie sicher, dass Sie in der Liste die zweite Knowledge-Option auswählen). * Fügen Sie einen Filter hinzu: **Type\_\_c gleich** `Neuigkeiten`. * Legen Sie die Sortierreihenfolge fest auf **Erstellungsdatum, absteigend** sodass Ihre neuesten Artikel immer zuerst erscheinen. {% endstep %} {% step %} #### **Konfigurieren Sie die Datenzuordnung** * Karte **Titel** zum Knowledge-Objekt `Titel` Feld zu. * Karte **Medienquelle** auf `ImageId__c` um Artikelbilder zu laden. * Setzen Sie den **Wiedergaberate** auf `5`. {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Verwenden Sie die Experience-Builder-Vorschau, 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" %} Geben Sie Ihren Kunden eine visuell überzeugende Möglichkeit, Ihren Produktkatalog direkt von Ihrer Startseite aus zu entdecken. Durch die Kombination der AX-Galerie-Komponente mit Ihren Produktdaten können Sie ein auffälliges Karussell erstellen, das hervorgehobene Produkte betont und Besucher direkt zu den Produktdetailseiten führt. *** #### **Was Sie erreichen werden** * **Eine visuelle Produktpräsentation:** Zeigen Sie hervorgehobene Kopfhörer in einem reich bebilderten, bildstarken Karussell, das zum Durchstöbern einlädt. * **Nahtlose Navigation:** Ermöglichen Sie Kunden, mühelos direkt vom Karussell zu einzelnen Produktdetailseiten zu wechseln. * **Ein kuratiertes Homepage-Erlebnis:** 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 **Kopfhörer** 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 Ihrer Seite hinzu** * Ziehen Sie die **AX Gallery** Komponente auf die gewünschte Seite in Experience Builder. {% endstep %} {% step %} #### **Komponentenanzeige anpassen** * Setzen Sie den **Titel** auf `Produktkarussell`. * Setzen Sie den **Beschriftung** auf `Stöbern Sie in unseren hervorgehobenen Produkten!` * Setzen Sie den **Anzahl der Spalten** auf `3`. {% endstep %} {% step %} #### **Richten Sie Ihre Datenquelle ein** * Erstellen Sie eine neue Abfrage in der Konfiguration der Datenquelle. * Wählen Sie **Produkt** als Objekt. {% endstep %} {% step %} #### **Konfigurieren Sie die Datenzuordnung** * Karte **Titel** auf das `Produktname` Feld zu. * Karte **Medienquelle** auf `ContentDocumentId__c` um das Bild jedes Produkts anzuzeigen. * Setzen Sie den **Wiedergaberate** auf `5`. {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Verwenden Sie die Experience-Builder-Vorschau, 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-gallery.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.