AX - Galerie
Übersicht
AX - Galerie ist eine Experience-Cloud-Komponente, die Bilder und Inhalte auf Experience-Sites-Seiten in vier Layout-Stilen anzeigt: Karussell (Diashow), Tabs (strukturierte Abschnitte), Raster (mehrspaltig) oder Galerie (Bildpräsentation).
Verwenden Sie sie, um Produktfotos, Projektportfolios, Bilder von Fallstudien, Ressourcensammlungen oder andere 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 Gallery-Komponente zu lernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen.
Konfiguration
Datenquelle
Die Datenquelle ist der Ort, an dem Sie den Inhalt Ihrer Galerie definieren. AX - Galerie unterstützt zwei Arten von Datenquellen: Manuell und Abfrage. (Legen Sie ein API-Name fest, um der Komponente eine eindeutige Kennung zu geben, und Medienposition fest, um die Medien jedes Elements relativ zu seinem Inhalt zu platzieren.)
Manuell
Laden Sie jedes Galerieelement direkt in die Komponente hoch oder geben Sie es dort ein. Jedes über den Medienquellen-Auswahldialog hinzugefügte Bild erstellt eine neue Datei in Ihrer Salesforce-Files-Bibliothek.
Einmalige Galerien mit statischem Inhalt, der sich nur selten ändert (Hero-Bereich auf der Landingpage, feste Produktpräsentation, Demos).
Abfrage
Ziehen Sie Elemente dynamisch aus einem Salesforce-Objekt (Product, 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 nicht-technischen Team außerhalb von Experience Builder verwaltet werden müssen.
Wahl 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 bereits in Salesforce Files vorhandene Dateien. Wenn Sie Ihre Galerieinhalte wiederverwenden oder aktualisieren müssen, ohne das Eigenschaftenfenster erneut zu öffnen, verwenden Sie stattdessen Abfrage .
Freigabemodell mit Avonni AX - Galerie
Einhaltung der Salesforce-Datenaustauschregeln:
Berücksichtigung der Org-Einstellungen: Avonni-Komponenten entsprechen vollständig den bestehenden Datenfreigabe-Konfigurationen und Zugriffs-Einstellungen Ihrer Salesforce-Organisation.
Nicht-Eingriffsrichtlinie: Diese Komponenten ä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 - Galerie ist flexibel hinsichtlich der Eingaben. 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 richtigen Vorschau-URL zur Laufzeit auf.
So sorgen Sie dafür, dass eine Galerie auf Dateien in der Salesforce-Files-Bibliothek verweist, ohne jemals über die Komponente erneut hochzuladen.
Ein Feld, das eine ContentDocumentId enthält (beginnt mit 069…)
Die neueste Version der Datei wird aufgelöst und angezeigt. Die Komponente erkennt automatisch 069… -IDs.
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 von der externen Quelle geladen.
So richten Sie es im Abfragemodus ein
In der Datenquellewählen Sie Abfrage und wählen Sie Ihr Quellobjekt aus (
ContentVersion, ein benutzerdefiniertes Objekt mit Dateireferenzen oder ein beliebiges Objekt mit einem Bildfeld).Wenden Sie einen Filter an, der festlegt, welche Datensätze angezeigt werden sollen (über Titelkonvention, Tag, benutzerdefiniertes Feld, Auswahllistenwert usw.).
In Datenzuordnungenordnen Sie Medienquelle basierend auf Ihrem Quellobjekt zu:
Beim Abfragen von ContentVersion: ordnen Sie Medienquelle dem Standardfeld
Version Data URLzu.Beim Abfragen 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).Beim Abfragen eines beliebigen Objekts mit einem vollständigen Bild-URL-Feld: ordnen Sie Medienquelle direkt diesem Feld zu.
Sobald alles konfiguriert ist, ist die Aktualisierung 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.
Vorschau in Experience Builder
Bilder, die auf Salesforce Files verweisen, werden in der Vorschau von Experience Builder möglicherweise nicht gerendert, da sich der Builder nicht als Portalbenutzer authentifiziert. Sie werden korrekt angezeigt, sobald Sie sich als Community-Benutzer auf der veröffentlichten Site anmelden
Variante
Karussell
Die Karussell-Variante bietet eine dynamische, ansprechende Möglichkeit, Ihre Inhalte, Bilder oder Karten zu präsentieren. Sie ist darauf ausgelegt, Elemente nacheinander im Diashow-Format anzuzeigen, was sie zu einer ausgezeichneten Wahl macht, um hervorgehobene Inhalte, Produktbilder oder wichtige Ankündigungen zu betonen.
Wann verwenden: Verwenden Sie die Karussell-Variante, wenn Sie:
die Aufmerksamkeit der Benutzer mit einer optisch ansprechenden Präsentation auf sich ziehen möchten.
mehrere Elemente oder Bilder platzsparend anzeigen möchten.
rotierende Banner oder Bereiche mit hervorgehobenen Inhalten auf Ihrer Website erstellen möchten.
Funktionen:
Navigationselemente: Navigieren Sie durch das Karussell mit intuitiven Steuerelementen wie Pfeiltasten oder Seitenpunkt-Navigation.
Autoplay-Option: Lassen Sie das Karussell automatisch durch die Elemente laufen, mit der Möglichkeit, es anzuhalten und fortzusetzen.
Anpassbares Erscheinungsbild: Passen Sie das Aussehen und die Wirkung des Karussells an das Design Ihrer Website an, indem Sie Elemente wie Übergangseffekte und Anzeigedauer anpassen.
Tabs
Die Tabs-Variante führt einen geordneten, tabellarischen Ansatz für die Inhaltspräsentation ein. Diese Variante ist ideal für die Kategorisierung von Informationen und bietet ein sauberes, strukturiertes Layout, mit dem Benutzer schnell zu verschiedenen Inhaltsbereichen navigieren und darauf zugreifen können.
Wann verwenden: Erwägen Sie die Tabs-Variante, wenn Sie:
kategorisierte Informationen in einem klaren, gegliederten Format präsentieren müssen.
Benutzern ermöglichen möchten, einfach zwischen verschiedenen Inhaltsbereichen zu wechseln, ohne die Seite zu verlassen.
Inhalte wie Produktspezifikationen, Servicekategorien oder Informationstabs benutzerfreundlich organisieren möchten.
Funktionen:
Gegliederte Inhalte: 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 reibungsloses, intuitives Erlebnis.
Anpassbares Design: Passen Sie das Erscheinungsbild der Tabs an Ihr Branding und die Ästhetik Ihrer Website an, indem Sie Elemente wie Tab-Beschriftungen, Layout und Farbschemata ändern.
Raster
Präsentiert Inhalte in einem strukturierten, mehrspaltigen Layout. Jedes Element belegt eine Zelle im Raster.
Wann verwenden: Ideal zur Anzeige einer Sammlung von Elementen, bei denen eine gleichmäßige 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 den Elementen zu definieren
Optionen für Bilder, Titel, Beschreibungen und Call-to-Action-Buttons innerhalb jeder Rasterzelle
Galerie
Ein visuell geprägtes Layout, das Bilder prominent in den Mittelpunkt stellt.
Wann verwenden: Am besten geeignet, um bildbasierte Inhalte hervorzuheben, wie zum Beispiel:
Fotografie-პორტfolios
Produktgalerien
bildzentrierte hervorgehobene Inhalte
Funktionen
Fokus auf große, hochwertige Bilder
Optionen zum Hinzufügen von Bildunterschriften oder Lightbox-Funktionen zum Vergrößern von Bildern
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 dies, 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.
Formatierung
Mit den Stilattributen steuern Sie das visuelle Erscheinungsbild jedes Elements in der Galerie. Die Einstellungen sind danach gruppiert, was sie beeinflussen.
Gilt für alle Varianten (Karussell, Tabs, Raster, Galerie).
Größe
Gesamte Breite und Höhe der Galerie.
Rahmen
Rahmenstil, -breite und -farbe um die Galerie herum.
Beschriftung
Stil des Beschriftungstextes, der bei jedem Element angezeigt wird.
Titel
Stil des Titels bei jedem Element.
Inhalt
Stil des Hauptinhaltsbereichs innerhalb jedes Elements.
Medien
Wie Bilder und Videos angezeigt werden (Anpassung, Ausrichtung, Größe).
Gilt nur, wenn Variante auf Karussell.
Diashow-Element
Hintergrund, Ausrichtung und Abstand jedes Karussellelements.
Titel des Diashow-Elements
Schriftart, Größe und Farbe der Elementtitel.
Beschreibung des Diashow-Elements
Schriftart, Größe und Farbe der Elementbeschreibungen.
Diashow-Bild
Größe und Rahmen der Bilder innerhalb jedes Elements.
Aktiver Diashow-Indikator
Stil des Indikators für das aktuell angezeigte Element.
Inaktiver Diashow-Indikator
Stil der Indikatoren für nicht aktive Elemente.
Navigationsschaltfläche der Diashow
Stil der Schaltflächen für Zurück/Vorwärts-Navigation.
Gilt nur, wenn Variante auf Tabs.
Tab
Stil jedes einzelnen Tabs.
Tab-Rahmen
Rahmen um jeden Tab.
Tab-Rahmen für aktiv/bei Hover
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
Bilder werden in Experience Builder nicht in der Vorschau angezeigt, aber auf der veröffentlichten Site korrekt dargestellt
Experience Builder authentifiziert sich nicht als Portalbenutzer und kann daher während 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 gerendert 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 zum Abfragemodus, in dem die Standardfreigaberegeln gelten.
Im manuellen Modus müssen Sie jedes Mal neu hochladen, 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.
Die Galerie ist für Portalbenutzer leer, funktioniert aber in der Experience-Builder-Vorschau
Dem Profil des Portalbenutzers fehlen Zugriffsrechte auf das abgefragte Objekt oder auf die referenzierten Dateien.
Überprüfen Sie Objektberechtigungen im Profil, Feldzugriff und Bibliotheks-/Freigabezugriff auf ContentVersion oder das Quellobjekt.
Bilder werden überhaupt nicht gerendert (weder in der Vorschau noch auf der veröffentlichten Site)
Media Source ist einem Feld zugeordnet, das keinen gültigen Dateiverweis enthält (ContentDocumentId beginnend mit 069…, das Version Data URL Feld auf ContentVersion oder eine öffentliche Bild-URL).
Überprüfen Sie, was das zugeordnete Feld tatsächlich enthält. Verwenden Sie beim Abfragen von ContentVersion das Standardfeld Version Data URL . Speichern Sie bei benutzerdefinierten Objekten eine ContentDocumentId (beginnend mit 069…) und ordnen Sie Media Source direkt diesem Feld zu.
Die Galerie zeigt die korrekten Titel, aber alle Bilder sind defekt
Media Source ist einem Feld zugeordnet, das keine ContentDocumentId oder gültige URL enthält.
Bestätigen Sie in den Datenzuordnungen, dass Media Source auf ein ContentDocumentId-Feld, eine Shepherd-URL oder eine gültige öffentliche Bild-URL verweist.
Anwendungsfälle
Beispiel 1: Kunden-News-Karussell
Halten Sie Ihre Kunden informiert und eingebunden, indem Sie Ihre neuesten Artikel direkt auf Ihrer Experience-Cloud-Startseite präsentieren. Mit der AX-Galerie-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 auf der Startseite mit Bildern bereit, damit Besucher keine Aktualisierung verpassen.
Müheloses Durchstöbern: Lassen Sie Kunden durch Unternehmensnachrichten in einem klaren, strukturierten Karussell-Layout scrollen.
Gezielte Filterung: Zeigen Sie nur News-Artikel an, indem Sie ein benutzerdefiniertes Auswahllistenfeld verwenden, damit das Karussell fokussiert und relevant bleibt.
Bevor Sie beginnen
ImageId__cFeld: Erstellen Sie ein Textfeld im Knowledge-Objekt, um die Content-Document-ID des Bildes jedes Artikels zu speichern.Type__cFeld: Erstellen Sie ein Auswahllistenfeld im Knowledge-Objekt, um Artikel zu kategorisieren, und stellen Sie sicher, dass der News Wert vorhanden ist und auf Ihre Artikel angewendet wird.
So richten Sie es ein
Richten Sie Ihre Datenquelle ein
Erstellen Sie eine neue Abfrage in der Konfiguration der Datenquelle.
Wählen Sie Knowledge als Objekt aus (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 auf Erstellungsdatum, absteigend fest, damit Ihre neuesten Artikel immer zuerst angezeigt werden.
Beispiel 2: Produktgalerie für Kunden
Bieten Sie Ihren Kunden eine visuell ansprechende Möglichkeit, Ihren Produktkatalog direkt über Ihre Startseite zu entdecken. Durch die Kombination der AX-Galerie-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: Präsentieren Sie hervorgehobene Kopfhörer in einem ansprechenden, bildstarken Karussell, das zum Stöbern einlädt.
Nahtlose Navigation: Ermöglichen Sie Kunden, mühelos vom Karussell direkt zu einzelnen Produktdetailseiten zu wechseln.
Ein kuratiertes Homepage-Erlebnis: Heben Sie die wichtigsten Produkte hervor, indem Sie nur Ihren hervorgehobenen Katalog auf der Startseite anzeigen.
Bevor Sie beginnen
Type__cFeld: Erstellen Sie ein Auswahllistenfeld 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__cFeld: Erstellen Sie ein Textfeld auf dem Product2-Objekt, um die Bild-URL für jedes Produkt zu speichern.
So richten Sie es ein
Zuletzt aktualisiert
War das hilfreich?