> 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 Datensatzmengen 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. Ziehen Sie Daten aus jedem Standard- oder benutzerdefinierten Objekt im Experience Builder.

Ideal für den Bestellverlauf 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>

## Konfiguration

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

### Datenquelle

Im Abschnitt Datenquelle verbinden Sie die Avonni-Liste mit Ihren Salesforce-Daten. Sie haben zwei Datenquellenoptionen.

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

| Typ der Datenquelle | Beschreibung                                                                         | Anwendungsfall                                           |
| ------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------- |
| **Manuell**         | Listeneinträge manuell 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. |

### Datenzuordnung

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="/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 Eintrag in der Liste mehr Kontext oder Details zu geben.

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

### Elementtrennlinie

Die Funktion „Elementtrennlinie“ soll die visuelle Struktur Ihrer Liste verbessern, indem Trennlinien zwischen den Einträgen eingefügt werden. Mit diesem Attribut können Sie anpassen, wie jeder Eintrag in der Liste von den anderen getrennt wird.

<table><thead><tr><th width="125.33333333333331">Trennlinie</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>Oben</strong></td><td>Ermöglicht es Ihnen, am oberen Rand jedes Eintrags in der Liste eine Trennlinie zu platzieren.</td></tr><tr><td><strong>Unten</strong></td><td>Fügt am unteren Rand jedes Listeneintrags eine Trennlinie hinzu.</td></tr><tr><td><strong>Rundum</strong></td><td>Platziert Trennlinien sowohl oberhalb als auch unterhalb jedes Eintrags in der Liste.</td></tr><tr><td><strong>Karte</strong></td><td>Platziert jeden Listeneintrag in einem eigenen kartenähnlichen Container, getrennt durch Trennlinien.</td></tr></tbody></table>

### Variante

Die **Variante** legt den Listenstil fest: `Basis` (eine standardmäßige vertikale Liste), `einzeilig` (eine horizontale Reihe von Elementen) oder `Kontrollliste` (jedes Element erhält ein Kontrollkästchen). **Bei Klick hervorheben** hebt den angeklickten Eintrag visuell hervor und **API-Name** verleiht der Komponente eine eindeutige Kennung zur Referenzierung.

### Kopfzeile

Konfigurieren Sie den Listen-Header mit einer **Titel** und **Untertitel** (und deren Textstilen), einer Kopfzeile **Symbolname** und **Symbolgröße**, **Anzahl der Elemente anzeigen** um eine Anzahl neben dem Titel anzuzeigen, **Header ist verbunden** um den Header bündig mit dem Inhalt darunter auszurichten, und **Kopfzeilenaktionen** um dem Header Aktionsschaltflächen hinzuzufügen.

### Avatar

**Avatar-Attribute** Passen Sie den Avatar an, der bei jedem Eintrag angezeigt wird — seine **Variante** (Kreis/Quadrat), **Größe**, **Position**, **Fallback-Symbolname**, **Anwesenheits** anzeige und ihre Position sowie die automatische Initialenformatierung.

### Kontrollliste

Wenn die **Variante** ist `Kontrollliste`, **Kontrolllistenattribute** einen **Kontrollzähler anzeigen** (eine markierte/gesamte Anzahl) und **Durchstreichen bei Kontrolle** (streicht erledigte Einträge durch).

### Layout

Die Funktion „Layoutoptionen“ innerhalb der Avonni-Listenkomponente bietet die Möglichkeit, die Darstellung der Daten innerhalb der Liste festzulegen. 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 Darstellung auf kleinen, mittleren und großen Bildschirmen.

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

### Feldlayout

Im Abschnitt Feldattribute können Sie definieren, wie viele Spalten jedes Feld innerhalb des Containers einnimmt, wodurch Sie eine feingranulare Kontrolle über das Layout und die Darstellung Ihres Listeninhalts erhalten.

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

**Passen Sie die Variante an**

Die Eigenschaft „variant“ in der Avonni-Listenkomponente wird verwendet, um das Erscheinungsbild der Feldinformationen zu ändern. Im Folgenden sind die verfügbaren Werte für die Eigenschaft „variant“ aufgeführt, jeweils mit ihrem einzigartigen 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 inline**: In dieser Variante wird die Beschriftung in einer Linie mit dem Feld positioniert, typischerweise links. Dieses platzsparende Layout eignet sich gut für Formulare, in denen der horizontale Platz reichlicher vorhanden ist als der vertikale. 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 ist, 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>

### Bild

Zu jedem Eintrag kann ein Bild hinzugefügt werden. Im Abschnitt Bildeigenschaften werden Position, Größe, Zuschneideanpassung und eine Fallback-Quelle angepasst.

### Filter

"**`Filteroption`**" ermöglicht es Ihnen, ein Filtermenü hinzuzufügen. Wenn diese Funktion aktiviert ist, werden alle als Filter definierten Felder in diesem Popover angezeigt, sodass 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 Abschnitte aufzuteilen. Sie können festlegen, wie viele Elemente auf jeder Seite angezeigt werden und wie die Steuerelemente aussehen. Das erleichtert die Handhabung umfangreicher Listen.

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

{% hint style="info" %}
**Elemente werden geladen.** Mit **Paginierung** deaktiviert lädt die Liste **Anzahl der Elemente pro Seite** Elemente gleichzeitig hinter einer **Mehr anzeigen** -Schaltfläche — oder, wenn Sie eine feste **Höhe** (Größenstil) festlegen, wechselt sie zu **Endlosscrollen** (lädt den nächsten Block, sobald Sie den unteren Rand erreichen). Mit **Paginierung** aktiviert zeigt sie eine Seite mit **Anzahl der Elemente pro Seite** Elementen mit Paginierungssteuerelementen an.
{% endhint %}

### Suche

Verwenden Sie das Attribut „Search Fields“, 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, navigieren Sie zum Abschnitt Suche und schalten Sie den Schalter „Suche anzeigen“ ein. Dadurch wird ein Suchfeld in 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="/files/4528e545fc47c0266c5e8107e1a2cd721cf52408" alt=""><figcaption></figcaption></figure>

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

**Suchleiste positionieren**: Verwenden Sie das Positionsattribut, um den Standort der Suchleiste festzulegen. Zu den Optionen gehören: links, rechts, zentriert und füllend.

## Interaktionen

"**Abschnitt „Beim Klicken“**" ermöglicht es Ihnen festzulegen, was passieren soll, wenn Benutzer mit der Listenkomponente interagieren, indem sie auf einen Eintrag 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)
* [Alarm-Modalfenster ö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.

## Styling

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.

{% tabs %}
{% tab title="Rahmen" %}
Passen Sie die Randstärke, -art und -farbe an, um die Grenzen der Liste festzulegen oder hervorzuheben.
{% endtab %}

{% tab title="Größe" %}
Passen Sie die Gesamtgröße der Liste einschließlich Breite und Höhe an, damit sie in Ihr Layout passt.
{% endtab %}

{% tab title="Abstand" %}
Steuern Sie den Abstand zwischen Listenelementen, Kopfzeilen und dem Listenrumpf, um die Lesbarkeit und die optische Wirkung zu verbessern.
{% endtab %}

{% tab title="Kopfzeile" %}
Gestalten Sie den Kopfzeilenbereich einschließlich Titel, Untertitel und Avataren, damit er optisch hervorsticht und informativ ist.
{% endtab %}

{% tab title="Kopfzeilentitel" %}
Passen Sie die Schriftart, Größe und Farbe des Titels an, damit er hervorsticht oder zum Thema Ihrer Site passt.
{% endtab %}

{% tab title="Kopfzeilenbeschriftung" %}
Gestalten Sie den Untertitel unter dem Kopfzeilentitel für eine kurze Beschreibung oder einen Kontext zur Liste.
{% endtab %}

{% tab title="Header-Avatar" %}
Fügen Sie in der Kopfzeile einen Avatar oder ein Bild hinzu und gestalten Sie es für eine visuelle Darstellung oder das Branding.
{% endtab %}

{% tab title="Element" %}
Passen Sie das Erscheinungsbild einzelner Listeneinträge an, einschließlich Hintergrund, Ausrichtung und Abstand.
{% endtab %}

{% tab title="Vertikale Ausrichtung des Eintrags" %}
Steuern Sie die vertikale Ausrichtung von Listeneinträgen für ein einheitliches und gepflegtes Erscheinungsbild.
{% endtab %}

{% tab title="Eintragskopfzeile" %}
Passen Sie das Erscheinungsbild der Eintragskopfzeilen innerhalb der Liste an, um eine klare Segmentierung und Lesbarkeit zu gewährleisten.
{% endtab %}

{% tab title="Elementbeschreibung" %}
Gestalten Sie den Beschreibungstext des Eintrags, um detaillierte Informationen auf optisch ansprechende Weise bereitzustellen.
{% endtab %}

{% tab title="Hintergrund des Eintrags" %}
Legen Sie die Hintergrundfarbe oder das Hintergrundbild für Listeneinträge fest, um einzelne Einträge voneinander zu unterscheiden oder hervorzuheben.
{% endtab %}

{% tab title="Eintragsfelder" %}
Gestalten Sie die Felder innerhalb jedes Eintrags, z. B. indem Sie Schriftart oder Farbe ändern, um Klarheit und visuelle Hierarchie zu schaffen.
{% endtab %}

{% tab title="Wert der Eintragsfelder" %}
Passen Sie die Darstellung der Feldwerte für eine klare Datenpräsentation an.
{% endtab %}

{% tab title="Beschriftung der Eintragsfelder" %}
Gestalten Sie die Beschriftungen der Felder so, dass sie sich von den Werten unterscheiden und die Lesbarkeit verbessern.
{% endtab %}

{% tab title="Paginierungsschaltflächen" %}
Gestalten Sie die Paginierungsschaltflächen für die Navigation in der Liste und stellen Sie sicher, dass sie benutzerfreundlich sind und zur Ästhetik Ihrer Site passen.
{% endtab %}

{% tab title="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.
{% endtab %}
{% endtabs %}


---

# 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.