# AX - Liste

## Überblick

**AX - Liste** ist eine Experience Cloud-Komponente, die Salesforce-Datensätze als anpassbare Karten in Raster- oder Listenlayouts auf Experience-Sites-Seiten anzeigt.

Verwenden Sie sie, um Portalnutzern gefilterte Datensätze anzuzeigen – etwa ihre Bestellungen, Fälle, Verträge oder andere zugehörige Daten – mit voller Kontrolle darüber, welche Felder auf jeder Karte erscheinen. Nutzer können suchen, filtern, durch Ergebnisse blättern und auf Karten klicken, um zu Datensätzen zu navigieren. Ziehen Sie Daten aus jedem Standard- oder benutzerdefinierten Objekt in Experience Builder.

Perfekt für den Bestellverlauf von Kunden, Falllisten, Dokumentbibliotheken, Produktkataloge oder überall dort, wo Portalnutzer ihre Salesforce-Datensätze durchsuchen und suchen müssen.

{% hint style="success" %}
Die Avonni-Liste ist eine [reaktive Datenkomponente](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/reaktive-komponenten)
{% endhint %}

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fpt2IfBa0lYKIcPqkp9r4%2FAvonni%20Components%204.2.webp?alt=media&#x26;token=bfa921dd-9ffe-457d-a418-9bd6afe5a723" alt=""><figcaption></figcaption></figure>

## 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-Liste mit Ihren Salesforce-Daten. Es gibt zwei Datenquellenoptionen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbPNBH8BWbxiRQWP0nvC2%2F2024-02-04_15-01-30.png?alt=media&#x26;token=6d86abef-43ac-4b13-8490-d197f0fc154f" alt=""><figcaption></figcaption></figure>

| Art der Datenquelle      | Beschreibung                                                                         | Anwendungsfall                                           |
| ------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------- |
| **Manuelle Datenquelle** | Liste manuell in die Datentabelle eingeben.                                          | Ideal für nicht-dynamische Daten, Tests und Demos.       |
| **Abfrage**              | Erstellen Sie eine Abfrage, um die Liste automatisch mit Salesforce-Daten zu füllen. | Geeignet für dynamische, Echtzeit- und große Datensätze. |

### 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.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FsuXTMbmTsztyn3eSA11F%2F2024-02-04_14-49-35.png?alt=media&#x26;token=0b2c9073-24b6-477d-bbdd-d32f7987f043" alt=""><figcaption></figcaption></figure>

* Anschließend können Sie zusätzliche Elemente neben Ihren Primärdaten einbinden. Dazu können visuelle Komponenten wie Bilder, Avatare oder sogar zusätzliche Felder gehören, um jedes Element in der Liste mit mehr Kontext oder Details zu versehen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fc32Ky8kXM5Bec7yYKlV1%2F2024-02-04_14-52-53.png?alt=media&#x26;token=a9b956a2-f67f-4f5e-bdcc-f389ada8ecd7" alt=""><figcaption></figcaption></figure>

### Konfiguration von Erscheinungsbild und Verhalten

#### Konfiguration des Elementtrenners

Die Funktion Elementtrenner wurde entwickelt, um die visuelle Struktur Ihrer Liste durch das Einfügen von Trennern zwischen Elementen zu verbessern. Mit diesem Attribut können Sie anpassen, wie jedes Element in der Liste von den anderen getrennt wird.

<table><thead><tr><th width="125.33333333333331">Trenner</th><th width="309">Beschreibung</th><th>Abbildung</th></tr></thead><tbody><tr><td><strong>Oben</strong></td><td>Ermöglicht es Ihnen, einen Trenner am oberen Rand jedes Elements in der Liste zu platzieren.</td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Unten</strong></td><td>Fügt am unteren Rand jedes Listenelements eine Trennlinie hinzu.</td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Umgeben</strong></td><td>Platziert Trennlinien sowohl oberhalb als auch unterhalb jedes Elements in der Liste. </td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Karte</strong></td><td>Platziert jedes Listenelement in einem eigenen kartenähnlichen Container, getrennt durch Trenner.</td><td><img src="broken-reference" alt=""></td></tr></tbody></table>

#### Layoutoptionen

Die Funktion Layoutoptionen innerhalb der Avonni-Listenkomponente ermöglicht es, die Darstellung der Daten innerhalb der Liste festzulegen. Dies geschieht durch die Auswahl der gewünschten Anzahl von Spalten, in denen die Daten angeordnet werden sollen; verfügbar sind Optionen von einer bis zwölf Spalten.&#x20;

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUF0NVgdHNfCVLdEPeKIr%2F2024-02-07_21-24-47.png?alt=media&#x26;token=aa9fb4b6-7f17-402b-a6f5-1a00a4c751d8" alt=""><figcaption></figcaption></figure>

Darüber hinaus bietet die Avonni-Listenkomponente erweiterte Anpassungsmöglichkeiten durch die Option, Spaltenkonfigurationen abhängig von der Bildschirmgröße des Containers festzulegen. Diese Funktion ermöglicht es, das Erscheinungsbild der Liste auf verschiedenen Geräten präzise anzupassen und sorgt so für eine konsistente und benutzerfreundliche Darstellung auf kleinen, mittleren und großen Bildschirmen.&#x20;

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3dTwkrWEQzbdIGV6TwHa%2F2024-02-07_21-25-19.png?alt=media&#x26;token=48d5c695-2f82-487e-bc3a-f08a81169fc7" alt="" width="375"><figcaption></figcaption></figure>

#### Optionen für das Feldlayout

Der Abschnitt Feldeigenschaften ermöglicht es Ihnen, die Anzahl der Spalten festzulegen, die jedes Feld innerhalb des Containers einnimmt, und gibt Ihnen damit granulare Kontrolle über das Layout und das Erscheinungsbild Ihres Listeninhalts.&#x20;

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrerSxvfhSCDCOBOF6uAp%2F2024-02-07_21-27-15.png?alt=media&#x26;token=e7ecb311-fd51-4271-b601-b45a2fa7d809" alt=""><figcaption></figcaption></figure>

**Variante anpassen**

Die Eigenschaft "Variante" in der Avonni-Listenkomponente wird verwendet, um das Erscheinungsbild der Feldinformationen zu ändern. Im Folgenden sind die verfügbaren Werte für die Eigenschaft "Variante" aufgeführt, jeder mit seinem eigenen Stil.

1. **Standard**: Dies ist die Standardeinstellung, bei der die Bezeichnung oberhalb des Feldes angezeigt wird. Es handelt sich um ein klassisches und weit verbreitetes Layout, das eine klare Trennung zwischen Bezeichnung und Feldinhalt bietet.
2. **Bezeichnung ausgeblendet**: Wählen Sie diese Variante, wenn Sie ein minimalistisches Design wünschen. Die Bezeichnung wird nicht angezeigt, was für ein klareres Erscheinungsbild sorgt. Dies ist ideal für Formulare, bei denen der Kontext oder Platzhaltertext den Zweck des Feldes deutlich macht, oder wenn der Platz begrenzt ist.
3. **Bezeichnung inline**: Bei dieser Variante wird die Bezeichnung in einer Zeile mit dem Feld positioniert, typischerweise links. Dieses platzsparende Layout eignet sich gut für Formulare, 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 wird, bewegt sich die Bezeichnung nach oben. Es handelt sich um ein modernes Design, das häufig in mobilen Oberflächen und Webanwendungen verwendet wird, da es hilft, vertikalen Platz zu sparen und eine saubere, aufgeräumte Ästhetik beizubehalten.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FHsOhZBf72KG2HfCgthFE%2F2024-02-07_21-28-52.png?alt=media&#x26;token=96b20a77-af03-43c8-9acb-5b09db482cd0" alt=""><figcaption></figcaption></figure>

#### Bildoptionen

## Weitere Einstellungen

### Filter

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

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5az4m93BFO7sn6RyKV0d%2F2024-02-04_16-32-15.png?alt=media&#x26;token=87feb3fb-af0e-4547-a17a-dbc7295ee9c8" alt=""><figcaption></figcaption></figure>

### Seitennummerierung

Der Bereich "Optionen für die Seitennummerierung" ermöglicht es Ihnen, lange Listen in der Avonni-Listenkomponente in kleinere Teile aufzuteilen. Sie können wählen, wie viele Elemente auf jeder Seite angezeigt werden und wie die Steuerelemente aussehen. Das erleichtert die Verarbeitung umfangreicher Listen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FzeK9JTrAHa50bc1g2xJV%2F2024-02-04_16-33-26.png?alt=media&#x26;token=e1518494-b96c-44b7-860e-dfdd62a3eb52" alt=""><figcaption></figcaption></figure>

### Suche

Verwenden Sie das Attribut "Suchfelder", um festzulegen, welche Felder innerhalb der Listenkomponente durchsuchbar sein sollen, damit Nutzer die benötigten Informationen schnell finden können.&#x20;

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F06qOPZmtykLJ5oDM6MBC%2F2024-02-04_16-37-32.png?alt=media&#x26;token=2010499d-9896-4ab4-9fc4-76e33e9e006b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIaNqX8MljJ6BiCs2dVfY%2F2024-02-04_16-38-23.png?alt=media&#x26;token=d4d4509a-054f-4864-9b6e-ffc876e413d7" alt=""><figcaption></figcaption></figure>

**Platzhaltertext festlegen**: Passen Sie die Suchleiste an, indem Sie Platzhaltertext hinzufügen, um Nutzern eine Orientierung zu geben.

**Suchleiste positionieren**: Verwenden Sie das Attribut Position, um den Standort der Suchleiste festzulegen. Zu den Optionen gehören:

## Interaktionen

Die "**Abschnitt Bei Klick**" ermöglicht es Ihnen festzulegen, was passiert, wenn Nutzer mit der Listenkomponente interagieren, indem sie auf ein Element klicken.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FgU5pBJZqt1tHVmeY8EPp%2F2024-02-04_20-37-16.png?alt=media&#x26;token=1929d1aa-7c5a-42dc-84b5-81459adb889a" alt=""><figcaption></figcaption></figure>

Hier sind die verfügbaren Interaktionen für die Listenkomponente:

* [Toast anzeigen](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/eigenschaftenbereich/interaktionen/toast-anzeigen)
* [Navigieren](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/eigenschaftenbereich/interaktionen/navigieren)
* [Warnungsmodale öffnen](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/eigenschaftenbereich/interaktionen/warnungsdialog-offnen)
* [Bestätigung öffnen](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/eigenschaftenbereich/interaktionen/bestatigung-offnen)
* [Flow-Dialog öffnen](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/eigenschaftenbereich/interaktionen/flow-dialog-offnen)

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

## Darstellungsstil

Die Avonni-Listenkomponente für Experience Cloud Sites bietet umfassende Anpassungsoptionen für ihr Erscheinungsbild, sodass Sie sie perfekt an die Ästhetik Ihrer Site anpassen können.&#x20;

Hier sind die für die Anpassung verfügbaren Stilattribute für die Avonni-Liste:

1. **Rahmen:** Passen Sie Dicke, Stil und Farbe des Rahmens an, um die Grenzen der Liste zu definieren oder hervorzuheben.
2. **Größe:** Passen Sie die Gesamtgröße der Liste, einschließlich Breite und Höhe, an Ihr Layout an.
3. **Abstand:** Steuern Sie den Abstand zwischen Listenelementen, Kopfzeilen und dem Listenrumpf, um die Lesbarkeit und visuelle Wirkung zu verbessern.
4. **Kopfzeile:** Gestalten Sie den Kopfzeilenbereich, einschließlich Titel, Untertitel und Avataren, damit er visuell hervorsticht und informativ ist.
5. **Kopfzeilentitel:** Passen Sie Schriftart, Größe und Farbe des Titels an, damit er hervorsticht oder zum Design Ihrer Site passt.
6. **Kopfzeilenuntertitel:** Gestalten Sie den Untertitel unter dem Kopfzeilentitel für eine prägnante Beschreibung oder einen Kontext zur Liste.
7. **Kopfzeilen-Avatar:** Fügen Sie in der Kopfzeile einen Avatar oder ein Bild hinzu und gestalten Sie es für die visuelle Darstellung oder das Branding.
8. **Element:** Passen Sie das Erscheinungsbild einzelner Listenelemente an, einschließlich Hintergrund, Ausrichtung und Abstand.
9. **Vertikale Ausrichtung des Elements:** Steuern Sie die vertikale Ausrichtung der Listenelemente für ein konsistentes und gepflegtes Erscheinungsbild.
10. **Elementkopfzeile:** Passen Sie das Erscheinungsbild der Kopfzeilen der Elemente innerhalb der Liste an, um eine klare Gliederung und bessere Lesbarkeit zu erreichen.
11. **Elementbeschreibung:** Gestalten Sie den Beschreibungstext des Elements, um detaillierte Informationen auf visuell ansprechende Weise bereitzustellen.
12. **Elementhintergrund:** Legen Sie die Hintergrundfarbe oder ein Hintergrundbild für Listenelemente fest, um einzelne Einträge zu unterscheiden oder hervorzuheben.
13. **Elementfelder:** Gestalten Sie die Felder innerhalb jedes Elements, z. B. durch Änderung von Schriftart oder Farbe, für Klarheit und visuelle Hierarchie.
14. **Wert der Elementfelder:** Passen Sie die Darstellung der Feldwerte für eine klare Datendarstellung an.
15. **Bezeichnung der Elementfelder:** Gestalten Sie die Bezeichnungen der Felder so, dass sie sich von den Werten unterscheiden und die Lesbarkeit verbessern.
16. **Seitennummerierungs-Schaltflächen:** Gestalten Sie die Schaltflächen zur Seitennummerierung für die Navigation in der Liste so, dass sie benutzerfreundlich sind und zur Ästhetik Ihrer Site passen.
17. **Fußzeile:** Passen Sie den Fußzeilenbereich für zusätzliche Informationen oder Aktionen zur Liste an und stellen Sie sicher, dass er das Gesamtdesign ergänzt.