Bilderliste
Übersicht
Die Image List-Komponente rendert Bilder entweder aus manuellen Einträgen oder Salesforce-Abfragen in vier verschiedenen Layoutstilen: Basisgitter, Quilt, Gewebt oder Mauerwerk. Benutzer können Bilder durchsuchen, suchen und filtern, während optionale Elementaktionen ihnen ermöglichen, mit einzelnen Elementen zu interagieren. Konfigurieren Sie alles über das Eigenschaften-Panel – von responsiven Spaltenzahlen bis hin zu Ersatzbildern für fehlende Quellen.
Anwendungsfälle
Anzeige von Produktbildgalerien auf Produktdatensatzseiten, wo Vertriebsmitarbeiter alle verfügbaren Fotos sehen müssen.
Erstellen von Teamverzeichnisseiten mit Mitarbeiterfotos, die zu ihren Benutzerprofilen verlinken.
Erstellen von Portfolio-Präsentationen auf Experience Sites damit Partner oder Kunden Projektbeispiele durchsuchen können.
Anzeigen von Immobilienfotos in Immobilienanzeigen Datensätzen, damit Makler den verfügbaren Bestand prüfen können.
Präsentation von Veranstaltungsfotosammlungen aus Marketingkampagnen mit Filtermöglichkeit nach Veranstaltungstyp oder Datum.
Anzeige von Asset-Bibliotheken in denen Benutzer Bilder nach Kategorie, Namen oder benutzerdefinierten Attributen suchen und filtern können.
Schnellstart: Kontaktfotos auf einer Account-Seite anzeigen
Erstellen Sie eine funktionierende Bildgalerie, die alle Kontakte anzeigt, die mit dem aktuellen Account verknüpft sind. Dies verwendet Standard-Salesforce-Objekte, sodass Sie in jeder Organisation mitarbeiten können.
Voraussetzungen: Ihre Kontakte benötigen Fotos. Wenn ihr PhotoUrl nicht gefüllt ist, können Sie das Standardbenutzer-Symbol als Ersatz verwenden oder zunächst Bilder für einige Testkontakte hochladen.
Erstellen Sie eine neue Komponente in Dynamic Components
Öffnen Sie die Avonni Dynamic Components App über den App Launcher
Klicken Sie Neue Komponente
Geben Sie Ihrer Komponente einen Namen (z. B. „Contact Photo Gallery")
Setzen Sie Zielseitenobjekt auf Account — dies teilt der Komponente mit, dass sie auf Account-Datensatzseiten arbeitet und gibt Ihnen Zugriff auf die
$ComponentVariable zum Verweisen auf die Felder des aktuellen Datensatzes.
Konfigurieren Sie die Datenquelle
Im Eigenschaften-Panel auf der rechten Seite:
Setzen Sie Datenquelle auf Abfrage
Klicken Sie Abfrage erstellen
Für Objekt, wählen Sie Contact
Unter Filter, fügen Sie hinzu:
AccountId = '$Component.RecordId'Für Sortieren nach, wählen Sie LastName mit Richtung Aufsteigend
Klicken Sie Fertig um die Abfrage zu speichern
Ordnen Sie Ihre Felder zu
Im Datenzuordnungen Abschnitt:
Bezeichnung: Wählen Sie
Name(dies zeigt den vollständigen Namen des Kontakts unter jedem Foto)Beschreibung: Wählen Sie
Titel(zeigt deren Berufsbezeichnung)Bildquelle: Wählen Sie
PhotoUrl(das standardmäßige Kontaktfoto-Feld)
Hinweis
Bezeichnung und Beschreibung sind optional. Nur die Bildquelle ist erforderlich, um die Galerie anzuzeigen. Verwenden Sie Bezeichnung und Beschreibung, wenn Sie zusätzlichen Kontext neben jedem Bild anzeigen möchten — lassen Sie sie leer für eine sauberere, nur bildbasierte Darstellung.
Konfigurieren Sie das Layout
Im Inhalt Abschnitt:
Variante: Wählen Sie
Masonryfür ein sauberes Gitterlayout
Andere Layoutoptionen:
Quilted — Wechselt zwischen größeren hervorgehobenen Bildern und kleineren und schafft so eine visuelle Hierarchie
Woven — Verflochtenes Muster, das Bilder in abwechselnden Reihen webt für ein ausgewogenes Erscheinungsbild
Base —
Im Layout Abschnitt:
Anzahl der Spalten:
4Anzahl der Spalten (kleiner Container):
2Anzahl der Spalten (mittlerer Container):
3Anzahl der Spalten (großer Container):
4
Klicken-Interaktion hinzufügen
Machen Sie Kontaktfotos anklickbar, um zum Kontaktdatensatz zu navigieren:
Klicken Sie auf die Interaktionen Registerkarte im Eigenschaften-Panel
Unter Elementklick, klicken Sie Elementklick hinzufügen
Konfigurieren Sie im Interaktionsdialog:
Typ: Wählen Sie
NavigierenSeitenreferenztyp: Wählen Sie
DatensatzseiteObjekt-API-Name: Wählen Sie
ContactDatensatz-ID: Wählen Sie
Datensatz: Id(die ID des angeklickten Kontakts)Aktionsname: Geben Sie ein
AnzeigenKonsole-Tab öffnen: Belassen Sie den Schalter auf Aus
Klicken Sie Speichern
Nun, wenn Benutzer auf ein Kontaktfoto klicken, gelangen sie direkt zur Datensatzseite dieses Kontakts
Konfigurationseinstellungen
Datenquelle
Die Einstellung der Datenquelle bestimmt, woher Ihre Bilder stammen. Wählen Sie Manuell, um Bilder direkt in der Komponenten-Konfiguration zu definieren, oder Abfrage, um Bilder dynamisch aus Salesforce-Datensätzen zu ziehen
Modus
Manuell (statischer Inhalt) oder Abfrage (Salesforce-Datensätze)
Abfrage
Manuelle Modus-Elemente
Im manuellen Modus definieren Sie jedes Bild direkt in der Komponenten-Konfiguration. Dies eignet sich gut für statische Galerien, in denen sich Bilder nicht häufig ändern, wie z. B. eine feste Auswahl an Produkticons, Team-Bannern oder Instruktionsgrafiken.
Bezeichnung
Anzeigename für das Bild
„Product Front View"
Beschreibung
Zusätzlicher Detailtext, der mit dem Bild angezeigt wird
„Hochauflösendes Foto, das..."
Bild
URL zu der Bilddatei
/resource/products/widget.png
Name
Interner Bezeichner für das Element
product-front-01
Datenzuordnungen im Abfragemodus
Im Abfragemodus verbinden Sie Salesforce-Felder mit der Anzeige der Image List. Jede Zuordnung teilt der Komponente mit, welches Feld die Daten für dieses Element enthält – z. B. welches Feld die Bild-URL oder das Anzeigelabel enthält.
Bezeichnung
Feld, das den Anzeigenamen enthält
Name, Title__c
Beschreibung
Feld, das Detailtext enthält
Description__c, Caption__c
Bildquelle
Feld, das die Bild-URL enthält
PhotoUrl__c, ImageURL__c
Filter
Feld für Filterwerte
Category__c, Type__c
Suchfelder
Felder, nach denen gesucht wird
Name, Description__c
Inhalt
Diese Einstellungen steuern das Gesamterscheinungsbild und Verhalten der Image List, einschließlich welche Layoutvariante verwendet wird und wie Benutzer mit Elementen interagieren.
Variante
Layoutstil für die Bilder
Base, Quilted, Woven, Masonry
Anzahl der Elemente anzeigen
Gesamte Anzahl der Bilder anzeigen
true / false
Elemente anklickbar
Benutzern erlauben, Bilder anzuklicken/anzutippen
true / false HINWEIS: stellen Sie sicher, dass Sie die Interaktion konfigurieren um dies funktional zu machen
Layoutvarianten erklärt:
Base — Ein sauberes, einheitliches Gitter, in dem alle Bilder in derselben Größe angezeigt werden. Am besten für konsistente Inhalte wie Kopfporträts oder Produkt-Thumbnails.
Quilted — Ein strukturiertes Layout, das zwischen größeren hervorgehobenen Bildern und kleineren unterstützenden Bildern wechselt. Schafft eine visuelle Hierarchie bei gleichzeitiger Organisation.
Woven — Ein verflochtenes Muster, das Bilder in abwechselnden Reihen zusammenwebt. Fügt visuelles Interesse hinzu und bewahrt ein ausgewogenes, symmetrisches Erscheinungsbild.
Masonry — Ein Pinterest-ähnliches gestaffeltes Layout, in dem Bilder ihre natürlichen Seitenverhältnisse beibehalten. Ideal für vielfältige Inhalte wie Portfoliowerke, Lifestyle-Fotos oder nutzergenerierte Bilder
Kopfzeile
Fügen Sie oberhalb Ihrer Image List einen Kopfbereich mit Titel, Beschriftung, Avatar und Aktionsschaltflächen hinzu. Verwenden Sie diesen, um Ihre Galerie zu beschriften und Schnellaktionen anzubieten, z. B. neue Bilder hochzuladen oder Anzeigeoptionen zu ändern.
Titel
Hauptkopfzeilentext
„Product Gallery"
Beschriftung
Sekundärtext unter dem Titel
„Klicken Sie auf ein beliebiges Bild, um Details anzuzeigen"
Avatar-Bild
URL zum Avatar/Logo in der Kopfzeile
/resource/logo.png
Ist verbunden
Visueller Stil, der Kopfzeile mit dem Körper verbindet
true / false
Aktionen
Schaltflächenaktionen im Kopfbereich
Aktion hinzufügen → Bezeichnung: „Upload"
Sichtbare Aktionsschaltflächen
Anzahl der Aktionen, die vor Überlauf angezeigt werden
2
Aktionen ausblenden
Alle Kopfzeilenaktionen ausblenden
true / false
Aktionen deaktivieren
Kopfzeilenaktionen ausgrauen
true / false
Layout
Steuern Sie, wie viele Spalten bei verschiedenen Bildschirmgrößen angezeigt werden. Das Festlegen unterschiedlicher Werte für kleine, mittlere und große Container stellt sicher, dass Ihre Galerie auf Mobilgeräten, Tablets und Desktops gut aussieht.
Anzahl der Spalten
Standardanzahl der Spalten
4
Anzahl der Spalten (kleiner Container)
Spalten auf kleinen Bildschirmen
1
Anzahl der Spalten (mittlerer Container)
Spalten auf mittleren Bildschirmen
2
Anzahl der Spalten (großer Container)
Spalten auf großen Bildschirmen
4
Bild
Konfigurieren Sie, wie einzelne Bilder in der Galerie gerendert werden. Legen Sie einen Ersatz für fehlende Bilder fest, steuern Sie die Bildpositionierung und definieren Sie, wie Bilder zugeschnitten werden, um in ihre Container zu passen.
Bild-Ersatz
URL, die angezeigt wird, wenn die Bildquelle ungültig oder leer ist
/resource/placeholder.png
Position
Wo das Bild im Element erscheint
Oben, Unten, Links, Rechts
Zuschneideanpassung
Wie Bilder innerhalb ihres Containers skaliert werden
Cover, Contain, Fill
Zuschneideposition X
Horizontale Ausrichtung von zugeschnittenen Bildern
Links, Mitte, Rechts
Zuschneideposition Y
Vertikale Ausrichtung von zugeschnittenen Bildern
Oben, Mitte, Unten
Aktionen
.Fügen Sie Aktionen hinzu, die in einzelnen Bildelementen angezeigt werden, wie Details anzeigen, herunterladen oder bearbeiten. Jede Aktion kann beim Klicken eine andere Interaktion auslösen
Konfigurieren Sie jede Elementaktion mit einer Bezeichnung, einem Symbol und einer Interaktion, die beim Klicken ausgelöst wird.
Paginierung
Bei Galerien mit vielen Bildern teilt die Paginierung die Sammlung in Seiten auf, um die Ladezeiten zu verbessern und das Durchsuchen zu erleichtern. Benutzer navigieren zwischen Seiten mit den Paginierungssteuerungen.
Paginierung anzeigen
Paginierungssteuerungen anzeigen
true / false
Anzahl der Elemente pro Seite
Bilder, die vor der Paginierung angezeigt werden
12
Filter
Ermöglichen Sie Benutzern, die Galerie einzugrenzen, indem sie nach zugeordneten Feldwerten filtern. Wählen Sie, wo die Filtersteuerungen erscheinen sollen, basierend auf Ihrem Seitenlayout und wie prominent Sie das Filtern platzieren möchten.
Typ
Wo die Filtersteuerungen erscheinen
Horizontal, Panel, Popover
Suche
Aktivieren Sie ein Suchfeld, mit dem Benutzer Bilder durch Eingabe von Schlüsselwörtern finden können. Die Suche stimmt mit den Feldern überein, die Sie in der Datenzuordnung Suchfelder angegeben haben.
Seitenbereich
Konfigurieren Sie ein optionales Seitenpanel für Filter, Details oder zusätzliche Inhalte. Das Panel kann auf beiden Seiten erscheinen und kann standardmäßig eingeklappt sein, um Platz zu sparen.
Position
Welche Seite das Panel erscheint
Links, Rechts
Ist geschlossen
Panel startet eingeklappt
true / false
Umschaltschaltfläche ausblenden
Entfernen Sie die Ein-/Ausklapp-Schaltfläche
true / false
Bezeichnung der Zurücksetzen-Schaltfläche
Text für die Filter-Zurücksetzen-Aktion
„Alles löschen"
Keine Ergebnisnachricht
Passen Sie die Nachricht an, die Benutzer sehen, wenn keine Bilder den Such- oder Filterkriterien entsprechen. Eine hilfreiche Nachricht leitet Benutzer an, ihre Filter anzupassen oder andere Suchbegriffe zu versuchen.
Interaktionen
Definieren Sie, was passiert, wenn Benutzer mit Bildern in Ihrer Galerie interagieren. Die Registerkarte Interaktionen ermöglicht es Ihnen, Reaktionen auf Klicks und Aktionen ohne Programmierung zu konfigurieren.
Verfügbare Auslöser
Elementklick
Wird ausgelöst, wenn ein Benutzer auf ein Bild klickt (erfordert, dass Elemente anklickbar aktiviert ist)
Navigieren Sie zu einer Detailseite, öffnen Sie eine größere Vorschau oder zeigen Sie zugehörige Informationen an
Element-Aktionsklick
Wird ausgelöst, wenn ein Benutzer auf eine Aktionsschaltfläche eines Bildelements klickt
Laden Sie das Bild herunter, bearbeiten Sie Details oder löschen Sie den Datensatz
Kopfzeilen-Aktionsklick
Wird ausgelöst, wenn ein Benutzer auf eine Aktionsschaltfläche in der Kopfzeile klickt
Laden Sie neue Bilder hoch, ändern Sie Anzeigeeinstellungen oder exportieren Sie die Galerie
Interaktionen konfigurieren
Wählen Sie das Image List-Element auf Ihrer Leinwand aus
Klicken Sie auf die Interaktionen Registerkarte im Eigenschaften-Panel
Wählen Sie einen Auslöser (Elementklick, Element-Aktionsklick oder Kopfzeilen-Aktionsklick)
Klicken Sie Aktion hinzufügen und wählen Sie Ihren Interaktionstyp
Konfigurieren Sie die Aktionseinstellungen und speichern Sie
Gängige Interaktionsmuster
Beim Klick zum Datensatz navigieren
Ermöglichen Sie Benutzern, auf ein Bild zu klicken, um den vollständigen Datensatz anzuzeigen:
Setzen Sie Elemente anklickbar auf Ein in den Inhalts-Einstellungen
Wählen Sie in Interaktionen Elementklick
Aktion hinzufügen → Navigieren
Ziel auf setzen Datensatzseite
Ordnen Sie die Datensatz-ID dem ID-Feld Ihres Bilddatensatzes zu
Vollbildvorschau im Panel öffnen
Zeigen Sie eine größere Version des Bildes in einem Seitenpanel an:
Setzen Sie Elemente anklickbar auf Ein in den Inhalts-Einstellungen
Wählen Sie in Interaktionen Elementklick
Aktion hinzufügen → Dynamisches Komponenten-Panel öffnen
Wählen Sie eine dynamische Komponente, die so konfiguriert ist, dass das Vollbild angezeigt wird
Übergeben Sie die Bildquelle-URL als Eingabevariable
Beispiel: Erstellen Sie eine Produktfotogalerie
Dieses Tutorial führt Sie durch das Erstellen einer Pinterest-ähnlichen Fotogalerie, die auf Produktdatensatzseiten angezeigt wird. Benutzer können Produktbilder durchsuchen, nach Kategorie filtern und Fotos anklicken, um Aktionen auszuführen.
Was Sie bauen werden
Eine Galerie im Mauerwerk-Layout, die alle Fotos anzeigt, die mit dem aktuellen Produkt verknüpft sind. Die Galerie enthält horizontale Kategorie-Filter, Paginierung für umfangreiche Sammlungen und anklickbare Bilder.
Wo sie erscheint
Sobald Sie diese Komponente erstellt und bereitgestellt haben, erscheint sie auf Produktdatensatzseiten in Lightning Experience. Wenn ein Benutzer einen Produktdatensatz öffnet, sieht er die Fotogalerie mit allen Bildern, die mit diesem bestimmten Produkt verknüpft sind. Die Komponente filtert automatisch, sodass nur Fotos angezeigt werden, die zu dem Produkt gehören, das der Benutzer gerade betrachtet
Voraussetzungen
Dieses Beispiel setzt voraus, dass Sie ein benutzerdefiniertes Objekt zum Speichern von Produktfotos haben. Wenn Sie keines haben, erstellen Sie ein benutzerdefiniertes Objekt mit dem Namen Product Photo (API-Name: Product_Photo__c) mit diesen Feldern
Fotobezeichnung
Name
Text (Standard)
Produkt
ProductId__c
Lookup (zu Product2)
Foto-URL
PhotoURL__c
URL
Beschriftung
Caption__c
Text
Kategorie
Category__c
Auswahlliste (z. B. Front View, Side View, Detail, Lifestyle)
Sortierreihenfolge
SortOrder__c
Zahl
Erstellen Sie eine neue Komponente in Dynamic Components
Öffnen Sie die Avonni Experiences App über den App Launcher
Klicken Sie auf Get Started auf der Dynamic Components-Karte
Klicken Sie Neue Komponente
Geben Sie Ihrer Komponente einen Namen (z. B. „Product Photo Gallery")
Setzen Sie Zielseitenobjekt auf Produkt — dies teilt der Komponente mit, dass sie auf Produktdatensatzseiten arbeitet und gibt Ihnen Zugriff auf die
$ComponentVariable zum Verweisen auf die Felder des aktuellen Datensatzes
Konfigurieren Sie die Datenquelle
Mit ausgewähltem Image List-Element konfigurieren Sie die Abfrage im Eigenschaften-Panel:
Setzen Sie Datenquelle auf Abfrage
Klicken Sie Abfrage erstellen
Objekt: Wählen Sie
Product_Photo(das benutzerdefinierte Objekt, das Sie in den Voraussetzungen erstellt haben)Filter: Fügen Sie hinzu
ProductId__c = '{{$Component.recordId}}'— dies filtert die Fotos so, dass nur Datensätze angezeigt werden, bei denen der Produkt-Lookup dem Produktdatensatz entspricht, den der Benutzer gerade betrachtetSortieren nach: Wählen Sie
SortOrder__cmit Richtung AufsteigendKlicken Sie Fertig
Ordnen Sie Ihre Felder zu
Im Datenzuordnungen Abschnitt, verbinden Sie Ihre Salesforce-Felder mit der Galerieanzeige:
Bezeichnung: Wählen Sie
Fotobezeichnung— zeigt den Fototitel unter jedem Bild anBeschreibung: Wählen Sie
Caption__c— zeigt zusätzlichen Kontext für das Foto anBildquelle: Wählen Sie
PhotoURL__c— das tatsächliche Bild zur AnzeigeFilter: Wählen Sie
Category__c— ermöglicht das Filtern nach dieser Auswahlliste
Richten Sie responsive Spalten ein
Im Layout Abschnitt, konfigurieren Sie, wie viele Spalten bei verschiedenen Bildschirmgrößen angezeigt werden:
Anzahl der Spalten (kleiner Container):
1— eine Spalte auf MobilgerätenAnzahl der Spalten (mittlerer Container):
2— zwei Spalten auf TabletsAnzahl der Spalten (großer Container):
3— drei Spalten auf Desktop
Klicken-Interaktion hinzufügen
Nun, wenn Benutzer auf ein beliebiges Foto in der Galerie klicken, gelangen sie direkt zur Datensatzseite dieses Produktfotos
Klicken Sie auf die Interaktionen Registerkarte im Eigenschaften-Panel
Unter Elementklick, klicken Sie Elementklick hinzufügen
Konfigurieren Sie im Interaktionsdialog:
Typ: Wählen Sie
NavigierenSeitenreferenztyp: Wählen Sie
DatensatzseiteObjekt-API-Name: Wählen Sie
Product PhotoDatensatz-ID: Wählen Sie
Datensatz: Id(die ID des angeklickten Bilddatensatzes)Aktionsname: Geben Sie ein
AnzeigenKonsole-Tab öffnen: Belassen Sie den Schalter auf Aus
Klicken Sie Speichern
Was Sie sehen sollten
Ihre Galerie zeigt Produktfotos in einem Mauerwerk-Layout an, mit Bildern unterschiedlicher Höhe, die elegant angeordnet sind. Über der Galerie ermöglichen horizontale Filter-Schaltflächen Benutzern, nach Kategorie zu filtern (Front View, Side View usw.). Paginierungssteuerelemente erscheinen unten, wenn mehr als 9 Fotos vorhanden sind.
Zuletzt aktualisiert
War das hilfreich?