Liste

Daten anzeigen und verwalten

Um mit der Avonni List-Komponente zu beginnen, müssen Sie sie zunächst mit Ihren Daten verbinden und konfigurieren, wie diese angezeigt werden.

Verbinden Sie Ihre Daten

Bevor Sie Ihre Liste erstellen, müssen Sie der Avonni List-Komponente mitteilen, woher sie die anzuzeigenden Daten beziehen soll. Je nach Quelle und Art Ihrer Daten haben Sie mehrere Optionen:

Ordnen Sie Ihre Daten der Liste zu

Wenn Sie eine dynamische Datenquelle für Ihre Liste verwenden, müssen Sie den Datenzuordnungen Abschnitt konfigurieren, um der Komponente zu sagen, wie Listen aus Ihren Daten erstellt werden sollen.

Denken Sie daran wie an einen Übersetzer: Datenzuordnungen stellen sicher, dass die richtigen Informationen aus Ihren Salesforce-Daten verwendet werden.

Warum sind Datenzuordnungen wichtig?

Ohne Datenzuordnung wüsste die Liste nicht, welcher Teil Ihrer Daten verwendet werden soll. Dies könnte dazu führen, dass die Liste falsche oder irrelevante Informationen anzeigt.

Wie funktionieren Datenzuordnungen?

Im Abschnitt Datenzuordnungen stellen Sie die Verbindung zwischen Ihren Salesforce-Datenfeldern und den entsprechenden Listeneigenschaften her. Indem Sie auswählen, welches Feld welcher Eigenschaft zugeordnet wird (z. B. das Feld „Account Name“ der Eigenschaft „Label“), stellen Sie sicher, dass jedes Element die korrekten Informationen aus Ihren Salesforce-Daten anzeigt.

Listen-Variante

Das Variante Die Eigenschaft ermöglicht es Ihnen, den allgemeinen Stil und das Layout Ihrer Avonni List zu definieren. Durch die Auswahl einer bestimmten Variante können Sie das Erscheinungsbild der Liste an Ihre Inhalte und Designvorlieben anpassen.

Verfügbare Variante

Basis (Standard)

Dies ist die Standardlistenansicht. Elemente werden in einem vertikalen Listenformat angezeigt, ideal für detaillierte Informationen und verschiedene Inhaltstypen.

Einzeilig

Diese Variante präsentiert Listenelemente horizontal in einer einzigen Reihe und ermöglicht die Navigation zwischen den Elementen mit linken und rechten Pfeilen. Sie eignet sich gut für die Anzeige kurzer Informationen oder zur Platzersparnis, wenn vertikaler Raum begrenzt ist.

Checkliste

Diese spezielle Variante verwandelt die Liste in ein Checklisten-Format. Jedes Element enthält ein Kontrollkästchen zur Auswahl, was sie ideal für interaktive Aufgabenlisten oder Präferenzauswahlen macht.

Die richtige Variante wählen

• Base: Dies ist sinnvoll, wenn Sie detaillierte Informationen für jedes Listenelement präsentieren müssen, einschließlich mehrerer Felder oder reichhaltiger Medien.

• Einzeilig: Für prägnante Datenpunkte oder wenn Sie ein kompaktes Listenlayout wünschen.

• Checkliste: Wenn Sie Benutzereingaben in Form von Auswahlmöglichkeiten oder Kontrollkästchen benötigen

Trennerkonfiguration

Die Trenner-Eigenschaft ist darauf ausgelegt, die visuelle Struktur Ihrer Liste zu verbessern, indem zwischen den Elementen Trenner eingefügt werden.

Diese Eigenschaft ermöglicht es Ihnen, anzupassen, wie jedes Element in der Liste von den anderen getrennt wird.

Element anklickbar

Wenn aktiviert, werden alle Elemente in der Liste anklickbar.

Layout-Konfiguration

Anzahl der Spalten

Die Layout-Funktion befähigt Sie, Listen zu gestalten, die sich nahtlos an verschiedene Bildschirmgrößen anpassen. Sie können mühelos steuern, in wie vielen Spalten Ihre Listenelemente angeordnet werden, um eine optimale Anzeige auf Geräten von großen Desktop-Monitoren bis zu kompakten Smartphone-Bildschirmen zu gewährleisten.

Layout-Anpassung

• Anzahl der Spalten: Wählen Sie die Anzahl der Spalten, die Ihre Listenelemente einnehmen sollen. Sie können flexibel zwischen einer und zwölf Spalten wählen.

• Responsive Design: Feinabstimmung des Layouts für verschiedene Bildschirmgrößen. Beispielsweise bevorzugen Sie möglicherweise auf Mobiltelefonen eine einzelne Spalte, um die Lesbarkeit zu maximieren, während Sie auf größeren Bildschirmen mehrere Spalten verwenden, um gleichzeitig mehr Inhalte anzuzeigen.

Aktionen

Die Avonni List-Komponente kann Aktionen in Ihrer Liste einbetten und sie so von einer reinen Anzeige-Komponente in eine ansprechende, interaktive Oberfläche verwandeln.

Wo Aktionen hinzugefügt werden können

Elementebene

Erweitern Sie jedes Listenelement mit anklickbaren Elementen wie Schaltflächen oder Links. Diese Aktionen könnten zur Navigation zu einer Detailseite führen, ein Popup zum Bearbeiten öffnen oder jede andere benutzerdefinierte Flow-Logik ausführen.

Medienebene

Wenn Ihre Liste Bilder oder Videos enthält, können Sie Aktionen direkt in diese Medienelemente einbetten. Zum Beispiel könnte ein Klick auf ein Produktbild eine Produktdetailseite öffnen oder ein Tippen auf ein Videovorschaubild die Wiedergabe starten.

Eigenschaften

Kopfzeile

Der Header-Bereich gibt Ihnen Kontrolle über das Aussehen und die Funktionalität Ihres Listenkopfs.

Header-Bereich in einer Liste

Schaltflächen

Fügen Sie interaktive Schaltflächen zu Ihrem Header hinzu, um bestimmte Aktionen aus dem Interaktionsbereichzu ermöglichen. Dies bietet zusätzliche Funktionalität und erhöht die Benutzerbindung an die Liste.

Checkliste

Wenn Sie die "Checkliste" Variante in der Avonni List-Komponente wählen, steht Ihnen eine neue Reihe von Anpassungsoptionen zur Verfügung, mit denen Sie das Erscheinungsbild und Verhalten Ihrer interaktiven Checkliste anpassen können.

Wichtige Checklisteneinstellungen

• Durchgestrichen bei Markierung: Aktivieren Sie diesen Schalter, um bei abgehakten Elementen einen Durchstreichungsstil anzuwenden. Dieser visuelle Hinweis gibt dem Benutzer sofortiges Feedback und hilft, den Fortschritt zu verfolgen.

• Anzahl der markierten Elemente anzeigen: Aktivieren Sie diese Option, um einen Echtzeitzähler anzuzeigen, der die Anzahl der markierten Elemente angibt. Dies ist nützlich, wenn Benutzer schnell abschätzen müssen, wie viele Elemente ausgewählt oder abgeschlossen wurden.

Avatar-Eigenschaften

Der Bereich Avatar-Eigenschaften ermöglicht es Ihnen, das Aussehen und die Platzierung von Avataren innerhalb jedes Elements in Ihrer Avonni List anzupassen.

Bild-Eigenschaften

Einem Element kann ein Bild hinzugefügt werden. Die Bildeigenschaften ermöglichen es Ihnen, die Bildeigenschaften für Ihre Elemente anzupassen. Sie können die Position, Größe, Höhe und Zuschneiden Optionen festlegen.

Feld-Eigenschaften

Der Abschnitt Feld-Eigenschaften ermöglicht es Ihnen, die Anzahl der Spalten festzulegen, die jedes Feld innerhalb des Containers einnimmt, und gibt Ihnen damit detaillierte Kontrolle über das Layout und das Erscheinungsbild Ihrer Listeninhalte.

Wie man es verwendet

1 - Felder definieren: Fügen Sie die Felder hinzu, die Sie in Ihrer Avonni List-Komponente anzeigen möchten - navigieren Sie zur Eigenschaft 'Fields'. Sie finden diese am unteren Rand des Eigenschaften-Bereichs.

2 - Spaltenüberspannung festlegen: Verwenden Sie den Abschnitt Feld-Eigenschaften, um die Anzahl der Spalten anzugeben, die die hinzugefügten Felder überspannen sollen.

Varianten für Felder

Die Eigenschaft "variant" in der Avonni-Listenkomponente verändert das Erscheinungsbild von Feldinformationen. Die folgenden Werte sind für die Eigenschaft "variant" verfügbar, jeweils mit einem eigenen Stil.

• Standard: Dies ist die übliche Darstellung, bei der das Label über dem Feld sitzt. Sie ist leicht zu lesen.

• Label verborgen: Verwenden Sie dies, wenn Sie ein besonders sauberes Aussehen wünschen. Das Label ist verborgen, was großartig ist, wenn Sie wenig Platz haben oder der Zweck des Feldes bereits offensichtlich ist.

• Label Inline: Das Label steht neben dem Feld, meist links. Dies ist hilfreich, wenn Sie seitlich mehr Platz als vertikal haben.

• Label gestapelt: Das Label beginnt über dem Feld und bewegt sich nach oben, wenn Sie darauf klicken oder zu tippen beginnen. Dies ist ein moderner Stil, der Platz spart, besonders auf Mobilgeräten.

Paginierung

Der Bereich „Paginierungsoptionen“ ermöglicht es Ihnen, lange Listen in kleinere Teile innerhalb der Avonni List-Komponente zu unterteilen. Sie können wählen, wie viele Elemente auf jeder Seite angezeigt werden und wie die Steuerelemente aussehen, was die Handhabung umfangreicher Listen erleichtert.

Hauptmerkmale

Sortieren

Um Benutzern das Sortieren von Elementen in Ihrer Liste zu ermöglichen, aktivieren Sie die "Sortieren" Option. Wenn aktiviert, erscheint auf jedem Element ein klarer visueller Indikator (typischerweise ein Symbol), der signalisiert, dass die Liste neu geordnet werden kann.

Beispiel für das sortierbare Symbol in linker Position

Filter hinzufügen

Felder als Filter hinzufügen

Um Felder als Filter zu Ihrer Liste hinzuzufügen, suchen Sie den Abschnitt "Filter-Eigenschaften" im Eigenschaften-Bedienfeld. In diesem Abschnitt können Sie die Felder auswählen, die Sie zum Filtern verwenden möchten.

Filteroption

Die "FilterDer Abschnitt "" ermöglicht es Ihnen, ein Filtermenü hinzuzufügen, das als Popover erscheint. Wenn diese Funktion aktiviert ist, werden alle als Filter festgelegten Felder in diesem Popover angezeigt, wodurch die Liste aufgeräumt und fokussiert bleibt.

• Öffnen Sie den Komponenten-Builder

• Scrollen Sie zum Filterabschnitt nach unten

• Wählen Sie, wie Sie die Filter anzeigen möchten.

Filtertyp

Die Avonni List bietet drei Filteroptionen, um Ihre Daten-Navigation zu vereinfachen. Jede Option ist darauf ausgelegt, unterschiedlichen Benutzerpräferenzen und Bildschirmgrößen gerecht zu werden.

Optionen des Seitenpanel-Filtermenüs

Wenn Sie Ihre Avonni List-Komponente so konfigurieren, dass ein "Panel"-Filter verwendet wird, können Sie Filteroptionen in einem praktischen Seitenpanel präsentieren. Dieses Panel bietet zusätzliche Anpassungseinstellungen, die unten beschrieben sind:

Wo das Filterpanel erscheint

• Position (Links oder Rechts): Das Filterpanel fährt von der Seite des Bildschirms aus. Wählen Sie die Position, die am besten zu Ihrem Design passt.

Wie das Filterpanel startet

• Ist geschlossen: Entscheiden Sie, ob das Filterpanel beim ersten Laden des Bildschirms verborgen oder sichtbar sein soll.

  • Wahr: Das Panel startet verborgen. Dies ist gut, wenn Sie sich zuerst auf die Datentabelle konzentrieren möchten.

  • Falsch: Das Panel startet geöffnet und ermutigt Benutzer, sofort Filter anzuwenden.

Ein- oder Ausblenden der Umschalttaste

• Umschalttaste verbergen: Steuern Sie, ob Benutzer eine Schaltfläche sehen, um das Filterpanel zu öffnen und zu schließen.

  • Wahr: Die Schaltfläche ist verborgen. Verwenden Sie dies, wenn das Panel sich automatisch basierend auf anderen Vorgängen in Ihrem Flow (z. B. Klick auf ein Filtersymbol) öffnen und schließen soll.

  • Falsch: Die Schaltfläche ist immer sichtbar, damit Benutzer das Panel steuern können.

Suche

Der Umschalter „Durchsuchbar“ lässt Sie festlegen, ob die Datensätze innerhalb einer bestimmten Spalte durchsucht werden können. Wenn aktiviert, steht eine Suchleiste zur Verfügung. Zusätzlich können Sie Platzhaltertext für die Suchleiste festlegen und ihre Position mit den verfügbaren Werten links, rechts, zentriert und ausfüllend bestimmen.

Suche aktivieren: Um eine Spalte durchsuchbar zu machen, aktivieren Sie die Option "Durchsuchbar" in den Konfigurationseinstellungen Ihrer Avonni List-Komponente.

Platzhaltertext einstellen: Passen Sie die Suchleiste an, indem Sie Platzhaltertext hinzufügen, der die Benutzer leitet.

Positionierung der Suchleiste: Verwenden Sie die Positions-Eigenschaft, um den Ort der Suchleiste festzulegen. Optionen umfassen:

• links: Richtet die Suchleiste links aus.

• rechts: Richtet die Suchleiste rechts aus.

• zentriert: Zentriert die Suchleiste.

• fill: Erweitert die Suchleiste, sodass sie den verfügbaren Raum ausfüllt.

Best Practices

• Verwenden Sie beschreibenden Platzhaltertext, um Benutzer darüber zu informieren, wonach sie suchen können.

• Wählen Sie eine Position für die Suchleiste, die mit dem Gesamtlayout Ihrer Listenkomponente harmoniert.

Interaktionen

Interaktionen definieren, was passieren soll, wenn Benutzer mit der Avonni List interagieren.

Hier sind die verfügbaren Interaktionen für die List-Komponente:

Beim Klicken auf ein Element

Entscheiden Sie, was passiert, wenn ein Benutzer auf ein Element in der Liste klickt. Dies könnte sein:

• Zu einer Seite mit weiteren Details zu diesem Element zu gelangen.

• Ein Pop-up zu öffnen, um die Informationen des Elements zu bearbeiten.

• Etwas anderes auszuführen, das Sie in Ihrem Flow entworfen haben.

Beim Klicken auf eine Aktion

Wenn Sie Schaltflächen zu Ihren Listenelementen hinzugefügt haben (wie „Bearbeiten“ oder „Details anzeigen“), können Sie auswählen, was passiert, wenn diese Schaltflächen geklickt werden. Dies könnte Folgendes umfassen:

• Die Informationen für dieses Element zu aktualisieren.

• Einen neuen Bildschirm zu öffnen.

• Bestimmte Aktionen in Ihrem Flow auszulösen.

Bei Header-Aktionen

Wenn Sie Schaltflächen im Header der Liste haben, können Sie anpassen, was passiert, wenn diese geklickt werden. Dies könnte sein:

• Die Liste zu filtern, sodass nur bestimmte Elemente angezeigt werden.

• Die Elemente anders zu sortieren.

• Andere Aktionen, die für Ihre Liste sinnvoll sind.

Beim Klicken auf Medienaktionen

Wenn Ihre Listenelemente Bilder oder Videos mit Schaltflächen haben (wie eine „Wiedergabe“-Schaltfläche), können Sie entscheiden, was passiert, wenn jemand diese Schaltflächen klickt.

Beim Neuordnen

Wenn Sie Benutzern erlauben, Elemente in Ihrer Liste neu anzuordnen, können Sie Aktionen auslösen, wann immer sie dies tun. Beispielsweise könnten Sie im Hintergrund automatisch ein Feld aktualisieren, um die neue Reihenfolge der Elemente zu verfolgen.

Stellen Sie sicher, dass Sie ein Feld "Order By" in den Listeneinstellungen festgelegt haben, damit dies funktioniert. Dadurch wird die "Datensätze-Reihenfolge aktualisieren" Option in den Interaktionseinstellungen aktiviert.

Stil

Die Avonni List-Komponente bietet umfangreiche Stiloptionen, damit Sie sie nahtlos in Ihr Salesforce integrieren können.