> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-list.md).

# AX - Liste

## Übersicht

**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 Portalbenutzern 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 angezeigt werden. Benutzer können suchen, filtern, durch die Ergebnisse blättern und auf Karten klicken, um zu Datensätzen zu navigieren. Daten können aus jedem Standard- oder benutzerdefinierten Objekt im Experience Builder abgerufen werden.

Perfekt für die Bestellhistorie von Kunden, Falllisten, Dokumentbibliotheken, Produktkataloge oder überall dort, wo Portalbenutzer ihre Salesforce-Datensätze durchsuchen und darin suchen müssen.

{% hint style="success" %}
Die Avonni-Liste ist eine [Reaktive Datenkomponente](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md)
{% endhint %}

<figure><img src="/files/b8ae28b8242cd70ae38e0248facc2aa6305b2247" alt=""><figcaption></figcaption></figure>

## Die Liste konfigurieren

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

### Konfiguration der Datenquelle

Der Abschnitt Datenquelle ist der Ort, an dem Sie die Avonni-Liste mit Ihren Salesforce-Daten verbinden. Sie haben zwei Datenquellenoptionen.

<figure><img src="/files/9a7b5af586569e0cc9bd9f547b5584a081f94592" alt=""><figcaption></figcaption></figure>

| Datenquellentyp          | 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 befüllen. | Geeignet für dynamische, Echtzeit- und große Datensätze. |

### Konfiguration der Datenzuordnung

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

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

<figure><img src="/files/ee18bf0737b808d5f454bc5c8925058c9ed32486" alt=""><figcaption></figcaption></figure>

* Anschließend können Sie neben Ihren primären Daten zusätzliche Elemente einbinden. Dazu können visuelle Komponenten wie Bilder, Avatare oder sogar zusätzliche Felder gehören, um jedem Listeneintrag mehr Kontext oder Details zu geben.

<figure><img src="/files/437d5285b7bd2e78ff2ccf547ac48dd6cd68ddc7" alt=""><figcaption></figcaption></figure>

### Konfiguration des Erscheinungsbilds

#### Konfiguration der Trennlinie für Elemente

Die Funktion „Element-Trennlinie“ wurde entwickelt, um die visuelle Struktur Ihrer Liste zu verbessern, indem Trennlinien zwischen den Einträgen eingefügt werden. Dieses Attribut ermöglicht es Ihnen, anzupassen, wie jedes Element in der Liste von den anderen getrennt wird.

<table><thead><tr><th width="125.33333333333331">Trennlinie</th><th width="309">Beschreibung</th><th>Illustration</th></tr></thead><tbody><tr><td><strong>Oben</strong></td><td>Ermöglicht es Ihnen, eine Trennlinie oberhalb jedes Elements in der Liste zu platzieren.</td><td><img src="/files/9b435193d8b9a806684bc8e68e5dc4237b841730" alt=""></td></tr><tr><td><strong>Unten</strong></td><td>Fügt am unteren Rand jedes Listenelements eine Trennlinie hinzu.</td><td><img src="/files/06370117a2a89b7c9619249bbd3eee0d51dfcd21" alt=""></td></tr><tr><td><strong>Rundum</strong></td><td>Platziert Trennlinien sowohl oberhalb als auch unterhalb jedes Elements in der Liste.</td><td><img src="/files/9e035fb191079a732d8a61edf455a8110ddc7a06" alt=""></td></tr><tr><td><strong>Karte</strong></td><td>Setzt jedes Listenelement in einen eigenen kartenartigen Container, getrennt durch Trennlinien.</td><td><img src="/files/0b03e413c31708d235fa7e233674864a5528f998" alt=""></td></tr></tbody></table>

#### Layoutoptionen

Mit der Funktion „Layoutoptionen“ innerhalb der Avonni-Listenkomponente können Sie die Darstellung der Daten in der Liste festlegen. Dies geschieht durch die Auswahl der gewünschten Anzahl an Spalten, in denen die Daten organisiert werden sollen; verfügbar sind Optionen von einer bis zwölf Spalten.

<figure><img src="/files/e7c1aafe4deb048c7b59a24480801aec2be68fa9" 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 eine präzise Anpassung des Erscheinungsbilds der Liste auf verschiedenen Geräten und sorgt für eine konsistente und benutzerfreundliche Anzeige auf kleinen, mittleren und großen Bildschirmen.

<figure><img src="/files/d086278c89cf9825374ba089a35e336d15424da1" alt="" width="375"><figcaption></figcaption></figure>

#### Feld-Layoutoptionen

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

<figure><img src="/files/5df689051e622788dc5fc7ea70623ed205431750" alt=""><figcaption></figcaption></figure>

**Die Variante anpassen**

Die Eigenschaft „variant“ in der Avonni-Listenkomponente 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 Beschriftung oberhalb des Feldes angezeigt wird. Es ist ein klassisches und weit verbreitetes Layout, das eine klare Trennung zwischen der Beschriftung und dem Feldinhalt bietet.
2. **Beschriftung ausgeblendet**: Wählen Sie diese Variante, wenn Sie ein minimalistisches Design wünschen. Die Beschriftung wird nicht angezeigt, was für ein aufgeräumteres 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. **Beschriftung in einer Zeile**: Bei dieser Variante ist die Beschriftung in einer Linie 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. **Beschriftung gestapelt**: Diese Variante platziert die Beschriftung direkt über dem Feld. Wenn das Feld fokussiert oder ausgefüllt wird, bewegt sich die Beschriftung nach oben. Es ist ein modernes Design, das häufig in mobilen Oberflächen und Webanwendungen verwendet wird, wo es hilft, vertikalen Platz zu sparen und eine saubere, aufgeräumte Ästhetik beizubehalten.

<figure><img src="/files/57193869ddae27a213b9aebc44ba443079d9cc92" 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="/files/9b55b3346123ea31f02f3f0d762d09f9ca748afe" alt=""><figcaption></figcaption></figure>

### Paginierung

Der Bereich „Paginierungsoptionen“ ermöglicht es Ihnen, lange Listen in der Avonni-Listenkomponente in kleinere Teile zu unterteilen. Sie können auswählen, wie viele Einträge pro Seite angezeigt werden und wie die Steuerelemente aussehen. Dadurch lassen sich umfangreiche Listen leichter verwalten.

<figure><img src="/files/330e95791e8a35f91e4f4929e7dcf83d8f063626" alt=""><figcaption></figcaption></figure>

### Suche

Nutzen Sie das Attribut „Suchfelder“, um festzulegen, welche Felder innerhalb der Listenkomponente durchsuchbar sein sollen, damit Benutzer die benötigten Informationen schnell finden können.

<figure><img src="/files/2336795c2b4f366745d2180c76e1b7459bfb73e4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/4528e545fc47c0266c5e8107e1a2cd721cf52408" alt=""><figcaption></figcaption></figure>

**Platzhaltertext festlegen**: Passen Sie die Suchleiste an, indem Sie Platzhaltertext hinzufügen, um Benutzer anzuleiten.

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

## Interaktionen

Die "**Abschnitt Beim Klicken**" ermöglicht es Ihnen zu definieren, was passiert, wenn Benutzer mit der Listenkomponente interagieren, indem sie auf ein Element klicken.

<figure><img src="/files/dd1afe230bc8414e98e2087441d8c2dc476e003b" alt=""><figcaption></figcaption></figure>

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

* [Toast anzeigen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/show-toast.md)
* [Navigieren](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md)
* [Warn-Modal öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-alert-modal.md)
* [Bestätigungsdialog öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-confirm.md)
* [Flow-Dialog öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-flow-dialog.md)

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

## Darstellung und Stil

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.

Hier sind die Styling-Attribute, die für die Anpassung in der Avonni-Liste verfügbar sind:

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, damit sie zu Ihrem Layout passt.
3. **Abstand:** Steuern Sie den Abstand zwischen Listeneinträgen, Überschriften und dem Listeninhalt, um die Lesbarkeit und die optische Attraktivität zu verbessern.
4. **Kopfzeile:** Gestalten Sie den Kopfzeilenbereich, einschließlich Titel, Untertitel und Avataren, damit er visuell unterscheidbar und informativ ist.
5. **Titel der Kopfzeile:** Passen Sie Schriftart, Größe und Farbe des Titels an, damit er hervorsticht oder zum Design Ihrer Site passt.
6. **Untertitel der Kopfzeile:** Gestalten Sie den Untertitel unter dem Kopfzeilentitel für eine kurze Beschreibung oder einen Kontext zur Liste.
7. **Avatar der Kopfzeile:** Fügen Sie in der Kopfzeile einen Avatar oder ein Bild hinzu und gestalten Sie ihn, um eine visuelle Darstellung oder Markenkennzeichnung zu erhalten.
8. **Eintrag:** Passen Sie das Erscheinungsbild einzelner Listeneinträge an, einschließlich Hintergrund, Ausrichtung und Abstand.
9. **Vertikale Ausrichtung des Eintrags:** Steuern Sie die vertikale Ausrichtung von Listeneinträgen für ein konsistentes und professionelles Erscheinungsbild.
10. **Eintragskopfzeile:** Passen Sie das Erscheinungsbild der Eintragskopfzeilen innerhalb der Liste an, um eine klare Gliederung und bessere Lesbarkeit zu erreichen.
11. **Eintragsbeschreibung:** Gestalten Sie den Beschreibungstext des Eintrags, um detaillierte Informationen auf optisch ansprechende Weise bereitzustellen.
12. **Hintergrund des Eintrags:** Legen Sie die Hintergrundfarbe oder ein Bild für Listeneinträge fest, um einzelne Einträge voneinander zu unterscheiden oder hervorzuheben.
13. **Eintragsfelder:** Gestalten Sie die Felder innerhalb jedes Eintrags, z. B. durch Änderung von Schriftart oder Farbe, um Klarheit und visuelle Hierarchie zu schaffen.
14. **Wert der Eintragsfelder:** Passen Sie die Darstellung der Feldwerte an, um Daten klar darzustellen.
15. **Beschriftung der Eintragsfelder:** Gestalten Sie die Beschriftungen der Felder, um sie von den Werten zu unterscheiden und die Lesbarkeit zu verbessern.
16. **Paginierungsschaltflächen:** Gestalten Sie die Schaltflächen zur Seitennavigation 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 im Zusammenhang mit der Liste an und stellen Sie sicher, dass er das Gesamtdesign ergänzt.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.