Liste

Übersicht

Die Avonni List-Komponente ist hervorragend geeignet, um eine Reihe von Elementen oder Optionen klar und geordnet zu organisieren und darzustellen. Sie wurde entwickelt, um die Navigation und das Verständnis von Informationen innerhalb Ihrer Experience Cloud-Seite zu erleichtern. Über die bloße Auflistung von Informationen hinaus bietet diese Komponente verschiedene Formatierungsoptionen, damit Elemente hervorstechen und wichtige Botschaften oder Konzepte effektiv vermittelt werden.

Zusätzlich bietet die List-Komponente Anpassungsmöglichkeiten, mit denen Sie Aussehen und Funktionalität an die spezifischen Bedürfnisse der Benutzer Ihrer Seite anpassen können, wodurch das Gesamterlebnis auf Ihren Dokumentationsseiten optimiert wird.

Konfiguration der Liste

Das Verständnis des Konfigurationsprozesses, insbesondere der Abschnitte Datenquelle und Zuordnungen, ist entscheidend, um die Liste effektiv zu nutzen.

Konfiguration der Datenquelle

Im Abschnitt Datenquelle verbinden Sie die Avonni List mit Ihren Salesforce-Daten. Sie haben zwei Optionen für die Datenquelle.

Konfiguration der Datenzuordnungen

Im Abschnitt Datenzuordnungen erwecken Sie Ihre Liste zum Leben, indem Sie sie definieren und anpassen.

• Klicken Sie auf die 'Spalten hinzufügen'-Schaltfläche, um das Feld auszuwählen, das Sie als Bezeichnung in der Liste anzeigen möchten.

• Anschließend können Sie neben Ihren Primärdaten zusätzliche Elemente einbinden. Dazu können visuelle Komponenten wie Bilder, Avatare oder auch zusätzliche Felder gehören, um jedem Eintrag in der Liste mehr Kontext oder Details zu geben.

Konfiguration von Aussehen und Gefühl

Konfiguration des Element-Trenners

Die Funktion Element-Trenner ist darauf ausgelegt, die visuelle Struktur Ihrer Liste durch Einfügen von Trennlinien zwischen den Elementen zu verbessern. Dieses Attribut ermöglicht es Ihnen, anzupassen, wie jedes Element in der Liste von den anderen getrennt wird.

Layout-Optionen

Die Layout-Optionen innerhalb der Avonni List-Komponente bieten die Möglichkeit, die Darstellung der Daten in der Liste zu definieren. Dies wird erreicht, indem die gewünschte Anzahl von Spalten ausgewählt wird, in denen die Daten organisiert werden sollen, mit Optionen von einer bis zwölf Spalten.

Darüber hinaus bietet die Avonni List-Komponente erweiterte Anpassungsmöglichkeiten durch die Angabe von Spaltenkonfigurationen, die von der Bildschirmgröße des Containers abhängen. Diese Funktion ermöglicht eine präzise Anpassung des Erscheinungsbildes der Liste auf verschiedenen Geräten und sorgt für eine konsistente und benutzerfreundliche Darstellung auf kleinen, mittleren und großen Bildschirmen.

Feld-Layout-Optionen

Der Abschnitt Feldattribute ermöglicht es Ihnen, die Anzahl der Spalten zu definieren, die jedes Feld innerhalb des Containers einnehmen soll, und gibt Ihnen so eine detaillierte Kontrolle über das Layout und Erscheinungsbild Ihrer Listeninhalte.

Ändern Sie die Variante

Die Eigenschaft "variant" in der Avonni-List-Komponente wird verwendet, um das Erscheinungsbild der Anzeige von Feldinformationen zu ändern. Im Folgenden sind die verfügbaren Werte für die Eigenschaft "variant" aufgeführt, jeweils mit ihrem eigenen Stil.

1. Standard: Dies ist die Standardeinstellung, bei der die Bezeichnung über dem Feld angezeigt wird. Es ist ein klassisches und weit verbreitetes Layout, das eine klare Trennung zwischen der Bezeichnung und dem Feldinhalt bietet.

2. Bezeichnung ausgeblendet: Wählen Sie diese Variante, wenn Sie ein minimalistisches Design wünschen. Die Bezeichnung wird nicht angezeigt, wodurch ein saubereres Erscheinungsbild entsteht. Dies ist ideal für Formulare, in denen der Kontext oder der Platzhaltertext den Zweck des Feldes deutlich macht, oder wenn nur begrenzter Platz zur Verfügung steht.

3. Bezeichnung inline: In dieser Variante ist die Bezeichnung in einer Linie mit dem Feld positioniert, typischerweise links. Dieses platzsparende Layout funktioniert gut in Formularen, in denen horizontal mehr Platz als vertikal vorhanden ist. Es ist auch nützlich, wenn Sie ein kompakteres Formulardesign erreichen möchten.

4. Bezeichnung gestapelt: Diese Variante platziert die Bezeichnung direkt über dem Feld. Wenn das Feld fokussiert oder ausgefüllt ist, bewegt sich die Bezeichnung nach oben. Es ist ein modernes Design, das oft in mobilen Oberflächen und Webanwendungen verwendet wird, da es hilft, vertikalen Platz zu sparen und eine saubere, aufgeräumte Ästhetik zu bewahren.

Bildoptionen

Andere Einstellungen

Filter

Die "Filteroption" ermöglicht es Ihnen, ein Filtermenü hinzuzufügen. Wenn diese Funktion aktiviert ist, werden alle Felder, die als Filter festgelegt sind, in diesem Popover angezeigt, wodurch die Liste übersichtlich und fokussiert bleibt.

Seitennummerierung

Der Bereich "Paginierungsoptionen" ermöglicht es Ihnen, lange Listen in der Avonni List-Komponente in kleinere Teile aufzuteilen. Sie können festlegen, wie viele Elemente auf jeder Seite angezeigt werden und wie die Steuerungselemente aussehen. Dies erleichtert den Umgang mit umfangreichen Listen.

Suche

Verwenden Sie das Attribut 'Suchfelder', um festzulegen, welche Felder innerhalb der List-Komponente durchsuchbar sein sollen, damit Benutzer die benötigten Informationen schnell finden können.

Suche aktivieren: Um die Suchfunktion zu aktivieren, navigieren Sie zum Abschnitt Suche und schalten Sie die Option 'Suche anzeigen' ein. Dadurch wird ein Suchfeld innerhalb der List-Komponente eingefügt. Sie können diese Funktion anpassen, indem Sie den Platzhaltertext ändern und die Position des Suchfelds nach Bedarf einstellen.

Platzhaltertext festlegen: Passen Sie die Suchleiste an, indem Sie Platzhaltertext hinzufügen, der die Benutzer anleitet.

Position der Suchleiste: Verwenden Sie das Positionsattribut, um den Standort der Suchleiste festzulegen. Optionen umfassen:

Interaktionen

Die "Abschnitt "Bei Klick"" lässt Sie definieren, was passieren soll, wenn Benutzer mit der Liste interagieren, indem sie auf ein Element klicken.

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

• Toast anzeigen

• Navigieren

• Alarm-Modal öffnen

• Bestätigungs-Modal öffnen

• Flow-Dialog öffnen

Erkunden Sie jeden Abschnitt, um Einblicke in die Konfiguration dieser Funktionen zu erhalten und die Interaktivität für Ihre Endbenutzer innerhalb der Avonni List-Komponente zu verbessern.

Stil / Erscheinungsbild

Die Avonni List-Komponente für Experience Cloud-Sites bietet umfassende Anpassungsoptionen für ihr Erscheinungsbild, sodass Sie sie perfekt an die Ästhetik Ihrer Seite anpassen können.

Hier sind die Stilattribute, die für die Anpassung der Avonni List verfügbar sind:

1. Rahmen: Passen Sie die Stärke, den Stil und die Farbe der Randlinie an, um die Begrenzungen der Liste zu definieren oder hervorzuheben.

2. Größe: Passen Sie die Gesamtgröße der Liste an, einschließlich Breite und Höhe, um sie in Ihr Layout einzupassen.

3. Abstände: Steuern Sie den Abstand zwischen Listenelementen, Kopfzeilen und dem Listenkörper, um Lesbarkeit und visuelle Attraktivität zu verbessern.

4. Kopfzeile: Gestalten Sie den Kopfzeilenbereich, einschließlich Titel, Untertitel und Avataren, sodass er optisch hervorsticht und informativ ist.

5. Kopfzeilentitel: Passen Sie Schriftart, Größe und Farbe des Titels an, damit er hervortritt oder mit dem Thema Ihrer Seite übereinstimmt.

6. Kopfzeilen-Untertitel: Gestalten Sie die Bildunterschrift unter dem Kopfzeilentitel für eine kurze Beschreibung oder Kontext zur Liste.

7. Kopfzeilen-Avatar: Fügen Sie einen Avatar oder ein Bild in der Kopfzeile hinzu und gestalten Sie ihn für visuelle Darstellung oder Branding.

8. Element: Passen Sie das Erscheinungsbild einzelner Listenelemente an, einschließlich Hintergrund, Ausrichtung und Abstände.

9. Vertikale Ausrichtung des Elements: Steuern Sie die vertikale Ausrichtung der Listenelemente für ein konsistentes und gepflegtes Erscheinungsbild.

10. Elementkopf: Passen Sie das Erscheinungsbild der Elementüberschriften in der Liste an, um eine klare Segmentierung und Lesbarkeit zu gewährleisten.

11. Elementbeschreibung: Gestalten Sie den Beschreibungstext des Elements, um detaillierte Informationen auf ansprechende Weise darzustellen.

12. Elementhintergrund: Legen Sie die Hintergrundfarbe oder ein Hintergrundbild für Listenelemente fest, um Einträge zu unterscheiden oder hervorzuheben.

13. Elementfelder: Gestalten Sie die Felder innerhalb jedes Elements, z. B. durch Ändern von Schriftart oder Farbe, für Klarheit und visuelle Hierarchie.

14. Werte der Elementfelder: Passen Sie die Darstellung der Feldwerte an, um eine klare Datenwiedergabe zu gewährleisten.

15. Beschriftungen der Elementfelder: Gestalten Sie die Bezeichnungen der Felder, um sie von den Werten zu unterscheiden und die Lesbarkeit zu verbessern.

16. Paginierungs-Schaltflächen: Gestalten Sie die Paginierungs-Schaltflächen für die Navigation in der Liste, damit sie benutzerfreundlich sind und zum Erscheinungsbild Ihrer Seite passen.

17. Fußzeile: Passen Sie den Fußzeilenbereich für zusätzliche Informationen oder Aktionen zur Liste an und sorgen Sie dafür, dass er das Gesamtdesign ergänzt.