> 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 - List

## Ü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 erscheinen. 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 die Kundenauftrags-Historie, Falllisten, Dokumentbibliotheken, Produktkataloge oder überall dort, wo Portalbenutzer ihre Salesforce-Datensätze durchsuchen und darin suchen müssen.

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

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-129e7edb5009d5f0435a6c929250aedf0a0560a5%2FAvonni%20Components%204.2.webp?alt=media" 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 List mit Ihren Salesforce-Daten. Sie haben zwei Datenquellenoptionen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-4b5f03164847513a8260fc000c24e2af481134d2%2F2024-02-04_15-01-30.png?alt=media" alt=""><figcaption></figcaption></figure>

| Datenquellentyp | 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

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 als Beschriftung 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%2Fgit-blob-e7372ae6827e9b93aa58582cbbe516f2bb7bdf78%2F2024-02-04_14-49-35.png?alt=media" 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="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-fb365c5cb47037e83eb40f56a020fc71d8d35a0e%2F2024-02-04_14-52-53.png?alt=media" alt=""><figcaption></figcaption></figure>

### Eintrags-Trennlinie

Die Funktion „Eintrags-Trennlinie“ wurde entwickelt, um die visuelle Struktur Ihrer Liste zu 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>Keine</strong></td><td>Der Standard — keine Trennlinie zwischen den Einträgen.</td></tr><tr><td><strong>Oben</strong></td><td>Ermöglicht Ihnen, eine Trennlinie am oberen Rand jedes Eintrags in der Liste 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>Umgebend</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

Der **Variante** legt den Listenstil fest: `Vertikal` (der Standard — eine normale vertikale Liste), `Horizontal` (eine einzeilige Reihe von Einträgen) oder `Checkliste` (jeder Eintrag erhält ein Kontrollkästchen). **Bei Klick hervorheben** hebt den angeklickten Eintrag visuell hervor, **Anzahl der Einträge anzeigen** zeigt neben dem Kopfzeilentitel eine Zählung an, und **API-Name** gibt der Komponente eine eindeutige Kennung zur Bezugnahme.

### Kopfzeile

Konfigurieren Sie die Listenüberschrift mit einer **Titel der Kopfzeile** und **Beschriftung der Kopfzeile** — jeweils mit eigener **Textstil des Kopfzeilentitels** / **Textstil der Kopfzeilenbeschriftung** Einstellung (`Überschrift 1` bis `Überschrift 4`, `Absatz 1` / `Absatz 2`) — ein **Name des Kopfzeilensymbols** und **Größe des Kopfzeilensymbols**, **Kopfzeile ist verbunden** um die Überschrift bündig mit dem darunterliegenden Inhalt auszurichten, und **Aktionen in der Kopfzeile** um der Überschrift Aktionsschaltflächen hinzuzufügen.

### Avatar

**Avatar-Attribute** den auf jedem Eintrag angezeigten Avatar anpassen — seine **Variante** (`Quadratisch` / `Kreis`), **Größe**, **Position**, **Name des Fallback-Symbols**, **Präsenz** Anzeigeindikator und seine Position sowie die automatische Formatierung der Initialen.

### Checkliste

Wenn die **Variante** ist `Checkliste`, **Attribute der Checkliste** fügen Sie eine **Anzahl der Kontrollkästchen anzeigen** (eine Anzahl von markiert/gesamt) und **Durchgestrichen bei Markierung** (streicht erledigte Einträge durch).

### Layout

Die Funktion „Layoutoptionen“ in der Avonni List-Komponente bietet die Möglichkeit, die Darstellung von Daten innerhalb der Liste zu definieren. Dies wird durch die Auswahl der gewünschten Anzahl an Spalten erreicht, in denen die Daten organisiert werden sollen; verfügbar sind Optionen von einer bis zwölf Spalten.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-91f0e8d9034a1775939b90cb3fbc70222eaa56a7%2F2024-02-07_21-24-47.png?alt=media" alt=""><figcaption></figcaption></figure>

Darüber hinaus bietet die Avonni List-Komponente erweiterte Anpassungsmöglichkeiten durch die Fähigkeit, Spaltenkonfigurationen abhängig von der Bildschirmgröße des Containers festzulegen. Diese Funktion ermöglicht eine präzise Anpassung der Darstellung der Liste über verschiedene Geräte hinweg und sorgt für eine konsistente und benutzerfreundliche Anzeige auf kleinen, mittleren und großen Bildschirmen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-5197234c25a03a25d3fa660a9cd5d3943d983a31%2F2024-02-07_21-25-19.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

### Feldlayout

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 die Darstellung Ihrer Listeninhalte.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-2a1d8a6e39d786d58621bd74eb4f4e1ce11879ed%2F2024-02-07_21-27-15.png?alt=media" alt=""><figcaption></figcaption></figure>

**Passen Sie die Variante an**

Die Eigenschaft „variant“ in der Avonni-List-Komponente 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 eigenen Stil.

1. **Standard**: Dies ist die Standardeinstellung, bei der die Beschriftung über dem Feld angezeigt wird. Es ist ein klassisches und weit verbreitetes Layout, das eine klare Trennung zwischen Beschriftung und Feldinhalt bietet.
2. **Beschriftung ausgeblendet**: Wählen Sie diese Variante, wenn Sie ein minimalistisches Design möchten. Die Beschriftung wird nicht angezeigt, was einen klareren Look bietet. Dies ist ideal für Formulare, bei denen der Kontext oder der Platzhaltertext den Zweck des Feldes deutlich macht oder wenn der Platz begrenzt ist.
3. **Beschriftung inline**: Bei 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 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 ist, verschiebt sich die Beschriftung nach oben. Es ist 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%2Fgit-blob-c015afb19a1e9e8069d04700a8e8863d292c5292%2F2024-02-07_21-28-52.png?alt=media" alt=""><figcaption></figcaption></figure>

### Bild

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

### Filter

Der **Filtermenü-Attribute** Abschnitt ermöglicht es Ihnen, ein Filtermenü hinzuzufügen. Jedes als Filter bezeichnete Feld wird dort angezeigt, damit die Liste übersichtlich und fokussiert bleibt. **Typ** wählt aus, wo die Filter erscheinen — `Horizontal` (der Standard) oben, in einem `Popover`, oder in einem `Panel` neben der Liste (siehe **Attribute der Seitenleiste**) — und **Sortierreihenfolge des Auswahllistenfilters**, **Datensatz-Auswahllistenwerte verwenden** und **Kaskadierende Filterwerte verwenden** steuern, wie Auswahllistenoptionen aufgelistet werden.

Jeder Filter hat außerdem einen Operator, der aus einem Menü oben im Filter ausgewählt wird. Text-, Auswahllisten-, Mehrfachauswahllisten- und Lookup-Filter bieten `Entspricht` (die Standardeinstellung), `Entspricht nicht`, `Leer` und `Nicht leer`. Zahlen-, Datums- und Zeitfilter bieten `Zwischen` (die Standardeinstellung), `Nicht zwischen`, `Entspricht`, `Entspricht nicht`, `Kleiner als`, `Kleiner oder gleich`, `Größer als`, `Größer oder gleich`, `Leer` und `Nicht leer`. `Leer` und `Nicht leer` keinen Wert an, daher werden die Eingabefelder des Filters ausgeblendet, solange einer von beiden ausgewählt ist. Checkbox-Filter haben kein Operator-Menü.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-87a878b9fdb176b1e17531115e5a8d44e96717b0%2F2024-02-04_16-32-15.png?alt=media" alt=""><figcaption></figcaption></figure>

### Seitennummerierung

Der **Paginierungsattribute** Bereich können Sie lange Listen im Avonni List Component in kleinere Teile aufteilen. Aktivieren Sie **Paginierung anzeigen** , um die Steuerelemente anzuzeigen, setzen Sie **Anzahl der Einträge pro Seite** (1 bis 200), wählen Sie ihre **Ausrichtung** (`Links`, `Mitte` oder `Rechts`und beschriften oder ändern Sie die **Erste**, **Vorherige**, **Nächste** und **Letzte** Schaltflächen. Das erleichtert die Verwaltung umfangreicher Listen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-16c0039db05e1631881c743560d2674fc042d7e5%2F2024-02-04_16-33-26.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Einträge werden geladen.** Mit **Seitennummerierung** aus lädt die Liste **Anzahl der Einträge pro Seite** Einträge auf einmal hinter einer **Mehr anzeigen** Schaltfläche — oder, wenn Sie eine feste **Höhe** (Größenstil) festlegen, wechselt sie zu **endlosem Scrollen** (das nächste Paket wird geladen, sobald Sie den unteren Rand erreichen). Mit **Seitennummerierung** ein, zeigt es eine Seite mit **Anzahl der Einträge pro Seite** Einträgen mit Paginierungssteuerelementen an.
{% endhint %}

### Suche

Nutzen Sie die **Suchfelder** Zuordnung, um zu definieren, welche Felder innerhalb der Listenkomponente durchsuchbar sein sollen, damit Benutzer die benötigten Informationen schnell finden können. Mit einer **Abfrage** Quelle werden zusätzlich zu den hier aufgeführten Feldern auch die Felder hinter der Beschriftung und Beschreibung jedes Eintrags durchsucht.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-33aae961f323f2a9def80985090e123bdc413935%2F2024-02-04_16-37-32.png?alt=media" alt=""><figcaption></figcaption></figure>

**Suche aktivieren**: Um die Suchfunktion zu aktivieren, öffnen Sie **Such-Engine-Attribute** und schalten Sie den **Suche anzeigen** Schalter 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="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-0d14763d43a0356f3fa2af20510633221d0fe5a7%2F2024-02-04_16-38-23.png?alt=media" alt=""><figcaption></figcaption></figure>

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

**Positionierung der Suchleiste**: Verwenden Sie die **Position** Einstellung, um den Standort der Suchleiste festzulegen. Zu den Optionen gehören `Links`, `Rechts`, `Mitte`, `Füllung` und `Panel` — `Panel` verschiebt das Suchfeld in das Seitenpanel neben der Liste, konfiguriert unter **Attribute der Seitenleiste**.

### Sortieren

**Sortierattribute** ermöglichen es Benutzern, die Liste neu zu ordnen. Aktivieren Sie **Sortierbar** um Drag-and-Drop-Neuanordnung zu aktivieren, wählen Sie ein **Name des sortierbaren Symbols** und einem **Position des sortierbaren Symbols** (`Links` oder `Rechts`) für den Ziehgriff und aktivieren Sie **Sortiert-nach-Wert anzeigen** , um die aktuelle Sortierung anzuzeigen. **Bei Neuordnung** definiert die Interaktion, die nach dem Verschieben eines Eintrags ausgeführt wird — verwenden Sie sie mit **Datensatzreihenfolge aktualisieren** , um die neue Reihenfolge in Salesforce zu speichern.

### Seitenleiste

**Attribute der Seitenleiste** konfigurieren Sie das Panel, das die Liste neben ihren Einträgen anzeigen kann. Das Panel erscheint erst, wenn die Suche oder das Filtermenü darin positioniert ist — setzen Sie **Position** bis `Panel` in **Such-Engine-Attribute** oder **Typ** bis `Panel` in **Filtermenü-Attribute**.

* **Position**: auf welcher Seite das Panel sitzt, `Links` (der Standard) oder `Rechts`.
* **Standardmäßig geschlossen**: startet das Panel eingeklappt. Standardmäßig aus.
* **Umschaltfläche ausblenden**: entfernt die Header-Schaltfläche, mit der Benutzer das Panel öffnen und schließen. Standardmäßig aus.
* **Beschriftung der Reset-Schaltfläche**: die Beschriftung der Schaltfläche, die alle Filterauswahlen löscht. `Alle Auswahlen löschen` standardmäßig.

### Keine-Ergebnisse-Meldung

**Keine-Ergebnisse-Meldung** ersetzt den standardmäßigen Leerzustand durch eigenen Text, wenn kein Eintrag mit der Suche oder den Filtern übereinstimmt — oder wenn die Datenquelle überhaupt nichts zurückgibt. **Attribute der Keine-Ergebnisse-Meldung** steuert, was der Leerzustand anzeigt: **Bild bei Keine-Ergebnisse ausblenden** entfernt die Illustration, und **Keine-Ergebnisse-Meldung ausblenden** entfernt den Text. Beide sind standardmäßig deaktiviert.

## Interaktionen

Der „**Bei-Klick-Abschnitt**“ ermöglicht es Ihnen zu definieren, was passiert, wenn Benutzer mit der Listenkomponente interagieren, indem sie auf einen Eintrag klicken.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-636ae845c1135e2af7fd51abb2f2ccd09729e126%2F2024-02-04_20-37-16.png?alt=media" 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)
* [Alert-Modal öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-alert-modal.md)
* [Bestätigung ö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)
* [Flow-Panel öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-flow-panel.md)
* [Flow ausführen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/execute-flow.md)
* [Herunterladen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/download.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 List-Komponente zu verbessern.

## Stil

Die Avonni List-Komponente 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 Dicke, den Stil und die Farbe des Rahmens 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 Ihr Layout an.
{% endtab %}

{% tab title="Abstände" %}
Steuern Sie den Abstand zwischen Listeneinträgen, Überschriften und dem Listenrumpf, um die Lesbarkeit und die visuelle Wirkung zu verbessern.
{% endtab %}

{% tab title="Kopfzeile" %}
Gestalten Sie den Überschriftenbereich, einschließlich Titel, Untertitel und Avatare, damit er visuell hervorsticht und informativ ist.
{% endtab %}

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

{% tab title="Beschriftung der Kopfzeile" %}
Gestalten Sie die Beschriftung unter dem Überschriftentitel für eine knappe Beschreibung oder einen Kontext zur Liste.
{% endtab %}

{% tab title="Header-Avatar" %}
Fügen Sie im Kopfbereich einen Avatar oder ein Bild ein und gestalten Sie es, um visuelle Darstellung oder Branding zu unterstützen.
{% endtab %}

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

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

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

{% tab title="Eintragsbeschreibung" %}
Gestalten Sie den Text der Eintragsbeschreibung, um detaillierte Informationen auf 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 zu unterscheiden oder hervorzuheben.
{% endtab %}

{% tab title="Felder des Eintrags" %}
Gestalten Sie die Felder innerhalb jedes Eintrags, etwa durch Änderung von Schriftart oder Farbe, für Klarheit und visuelle Hierarchie.
{% endtab %}

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

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

{% tab title="Paginierungsschaltflächen" %}
Gestalten Sie die Paginierungsschaltflächen zur Navigation durch die Liste und stellen Sie sicher, dass sie benutzerfreundlich sind und zum Erscheinungsbild Ihrer Site passen.
{% endtab %}

{% tab title="Fußzeile" %}
Passen Sie den Fußbereich für zusätzliche Informationen oder Aktionen zur Liste an und stellen Sie sicher, dass er das Gesamtdesign ergänzt.
{% endtab %}

{% tab title="Filterleiste" %}
Gestaltet die Seitenleiste, die die Filter und die Suche enthält.

* **Filterleiste:** Hintergrundfarbe / Rahmenfarbe / Rahmenstärke / Rahmenstil / Rahmenradius.
* **Beschriftungen der Filterleiste:** Hintergrund / Aktiver Hintergrund / Hintergrund bei Hover; Farbe des Einklappsymbols; Farbe / Aktive Farbe / Farbe bei Hover; Schriftgröße / Schriftstärke.
* **Optionen der Filterleiste:** Farbe; Rahmenfarbe des Kontrollkästchens; Textfarbe der Schaltfläche „Mehr laden“ / aktive Textfarbe / Textfarbe bei Hover.
* **Schaltfläche zum Zurücksetzen der Filterleiste:** Hintergrundfarbe / Textfarbe / Rahmenfarbe / Rahmenbreite / Eckenradius.
  {% 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.