> 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-data-table.md). # AX - Data Table ## Übersicht **AX - Datentabelle** ist eine Experience-Cloud-Komponente, die Ihre Salesforce-Datensätze in einer interaktiven Tabelle auf Experience-Sites-Seiten (ehemals Community Cloud) anzeigt. Verwenden Sie sie, um Portalbenutzern gefilterte Datensätze mit voller Kontrolle über Spalten, Sortierung, Suche und Seitennummerierung anzuzeigen. Ziehen Sie Datensätze aus einem beliebigen Standard- oder benutzerdefinierten Objekt und ermöglichen Sie externen Benutzern, Daten, die für ihr Konto oder Profil relevant sind, anzuzeigen, zu durchsuchen und damit zu interagieren. Perfekt für Kundenportale, die den Auftragsverlauf anzeigen, Partnerportale, die den Auftragsverlauf anzeigen, Partnerportale, die freigegebene Datensätze anzeigen, oder Self-Service-Sites, auf denen Benutzer ihre eigenen Daten finden und anzeigen müssen. {% hint style="success" %} Die Avonni-Datentabelle ist eine [Reaktive Datenkomponente](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) {% endhint %} {% hint style="info" %} **Sehen Sie sie in einem echten Projekt** [Partner-Auftragsschalter](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/partner-order-desk): Ein Partner-Auftragsschalter mit Inline-Bearbeitung und PDF-Upload. {% endhint %} ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Data-Table-Komponente zu lernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} ## Tutorials


Eine Schaltfläche „Exportieren nach“ für die Data Table erstellen	Create an Export To button on the Data Table
Die Data Table konfigurieren	Configuring the Avonni Data Table
Salesforce-CMS-Dateien in einer Data Table anzeigen	Salesforce-CMS-Dateien in einer Datentabelle anzeigen

## Konfiguration ### Datenquelle Im Abschnitt Datenquelle verbinden Sie die Avonni Data Table mit Ihren Salesforce-Daten. Sie haben zwei Möglichkeiten.

Typ der Datenquelle	Beschreibung	Anwendungsfall
Manuell	Daten manuell in die Datentabelle eingeben.	Ideal für nicht-dynamische Daten, Tests und Demos.
Abfrage	Eine Abfrage erstellen, um die Tabelle automatisch mit Salesforce-Daten zu füllen.	Geeignet für dynamische, Echtzeit- und große Datensätze.
CMS-Sammlung	Zeigen Sie Ihre CMS-Sammlungen nahtlos in Datentabellen an, um dynamische Inhaltsaktualisierungen zu ermöglichen.	Erstellen Sie automatisch aktualisierte Ressourcenlisten oder Nachrichten-Feeds.

{% hint style="info" %} Im Abfragemodus werden Daten in Stapeln von 25 Datensätzen angezeigt, um eine optimale Site-Performance zu gewährleisten. {% endhint %} ### Datenzuordnung Sie erwecken Ihre Datentabelle im Abschnitt Datenzuordnungen zum Leben, indem Sie ihre Spalten definieren und anpassen.

Freigabe des Datenmodells mit der Avonni-Datentabelle

**Einhaltung der Salesforce-Datenfreigaberegeln:** * **Beachtung der Organisationseinstellungen:** Avonni-Komponenten entsprechen vollständig den vorhandenen Datenfreigabekonfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation. * **Richtlinie der Nichtbeeinträchtigung:** Diese Komponenten ändern oder beeinflussen Ihre zuvor festgelegten Datenfreigaberegeln in keiner Weise. * **Kontrollierte Sichtbarkeit und Zugriff:** Die Möglichkeit, Datensätze über Avonni-Komponenten anzuzeigen und mit ihnen zu interagieren, wird durch die definierten Freigabeeinstellungen und Benutzerberechtigungen Ihrer Organisation gesteuert

#### Spalten hinzufügen * Klicken Sie auf die Schaltfläche „Spalten hinzufügen“, um Felder aus Ihrer Datenquelle auszuwählen, die als Spalten in der Datentabelle angezeigt werden sollen.

* In diesem Abschnitt wird festgelegt, welche Daten sichtbar sind und wie sie in Ihrer Tabelle angeordnet werden. * Klicken Sie auf eine Spalte, um auf alle Eigenschaften dieser bestimmten Spalte zuzugreifen.

#### Spalteneigenschaften konfigurieren * **Datentyp:** Passen Sie den Anzeigetyp des Felds an (z. B. Text, Zahl, Datum), um eine korrekte Datendarstellung sicherzustellen. * **Verlinken:** Aktivieren Sie die Verknüpfung von Zellendaten mit anderen Datensätzen oder URLs für eine schnelle Navigation. * **Zellattribute:** Passen Sie die Zellenausrichtung und Symbole an, um eine intuitivere und optisch ansprechendere Tabelle zu erstellen. * **Aktionen:** Fügen Sie eigene Einträge zum Dropdown-Menü der Spaltenüberschrift hinzu. Jede Aktion hat eine **Beschriftung**, eine **Name**, eine **Symbolname**, und optionale **Aktiviert** und **Deaktiviert** Zustände und besitzt ihre eigene **Bei Klick** Interaktion. * **Bearbeitbar:** Legen Sie fest, ob eine Spalte direkt in der Tabelle bearbeitbar sein soll. * **Filterbar und durchsuchbar:** Aktivieren Sie das Filtern und Suchen pro Spalte für eine effiziente Datenverwaltung. * **Ausgeblendet:** Wählen Sie aus, bestimmte Spalten auszublenden, was für sensible oder weniger relevante Daten nützlich ist. * **Sortierbar:** Erlauben Sie Benutzern, Daten nach der angegebenen Spalte zu sortieren. * **Standardaktionen ausblenden:** Wählen Sie aus, vordefinierte Aktionen auszublenden, um ein aufgeräumteres Erscheinungsbild zu erzielen. * **Text umbrechen:** Aktivieren Sie den Textumbruch für eine bessere Lesbarkeit in schmalen Spalten. * **Spaltenbreite festlegen:** Geben Sie die Breite jeder Spalte an, um ein ausgewogenes, geordnetes Layout zu erzielen. #### Filter Mit einer **Abfrage** Datenquelle, **Filter** listet die Felder auf, nach denen Benutzer die Tabelle filtern können. Wie **Suchfelder**wird es zusammen mit den Spalten zugeordnet, sodass ein Filter auf ein Feld zielen kann, das nicht als Spalte angezeigt wird. Jeder Eintrag hat: * **Filtern nach:** das Feld, auf das der Filter angewendet wird. Erforderlich. * **Standardwert (optional):** der Wert, mit dem der Filter beim Laden der Seite startet. Die Eingabe entspricht dem Feldtyp, sodass ein Auswahllistenfeld dessen Werte anbietet, ein Datumsfeld einen Datumsauswähler und ein Kontrollkästchenfeld **Wahr** oder **Falsch**. * **Benutzerdefiniertes Label:** zeigen Sie Ihren eigenen Text über dem Filter anstatt des Feldlabels an. Aktivieren Sie die Option und geben Sie den Text in **Beschriftung**. #### Suchfelder Mit einer **Abfrage** Datenquelle, **Suchfelder** listet die Objekfelder auf, die das Suchfeld durchsucht. Es wird zusammen mit den Spalten zugeordnet, sodass es auch Felder erreichen kann, die nicht als Spalte angezeigt werden. Die beiden Sucheinstellungen addieren sich statt sich zu ersetzen: Die Suche läuft über die Vereinigung dieser Felder und der Felder hinter jeder Spalte, die als **Durchsuchbar**. #### Zeilenaktionen hinzufügen Hier ist ein geführtes interaktives Tutorial zum Hinzufügen von Zeilenaktionen zur Data Table. {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} ### Grundeinstellungen **Tabellenkopf ausblenden** * Mit dieser Option können Sie den Tabellenkopf entfernen, um ein saubereres, minimalistisches Erscheinungsbild zu erzielen.

**Checkbox-Spalten ausblenden** * Aktivieren Sie diese Einstellung, um die Checkbox-Spalten auszublenden, die typischerweise zur Zeilenauswahl in Multi-Aktionsszenarien verwendet werden.

**Spalte mit Zeilennummern anzeigen** * Aktivieren Sie diese Option, um eine Spalte anzuzeigen, die jede Zeile nummeriert, was für eine einfache Datenreferenz nützlich ist. ### Kopfzeilenkonfiguration **Titel und Beschriftung** * Passen Sie die Kopfzeile mit einem Titel und einer Beschriftung an, um Kontext oder Zusammenfassungsinformationen zu den Tabellendaten bereitzustellen. **Symbolname und Größe** * Erweitern Sie die Kopfzeile mit einem Symbol und wählen Sie dessen Typ und Größe für eine visuelle Hervorhebung aus. **Ist verbunden** * Diese Einstellung bestimmt, ob die Kopfzeile optisch mit dem Tabellenkörper verbunden ist, was das Gesamtdesign beeinflusst. **Header-Aktionen** * Konfigurieren Sie Aktionen (Hinzufügen, Löschen oder benutzerdefinierte Funktionen), auf die direkt aus der Tabellenkopfzeile zugegriffen werden kann.

### Aktionsschaltflächen in der Kopfzeile * Implementieren Sie Aktionsschaltflächen in der Tabellenkopfzeile zum Hinzufügen neuer Datensätze, Exportieren von Daten oder für andere benutzerdefinierte Aktionen, um die Benutzerinteraktion und Effizienz zu verbessern.

#### Die Interaktion auf der Schaltfläche konfigurieren Konfigurieren Sie die Interaktion für den Fall, dass Benutzer die Kopfzeilen-Aktionsschaltfläche im Abschnitt „Beim Klicken“ drücken. Um zu verstehen, wie die Interaktion „Navigieren“ funktioniert, [hier klicken](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md) für weitere Informationen.

#### Tutorial {% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %} [Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md) {% endcontent-ref %} ### Attribute der Seitennummerierung * Konfigurieren Sie die Seitennummerierungseinstellungen, z. B. die Anzahl der Elemente pro Seite und den Stil der Seitennummerierung, um zu steuern, wie Daten in größeren Tabellen angezeigt und navigiert werden. {% hint style="info" %} Im Abfragemodus werden Daten in Sätzen von 25 Datensätzen angezeigt, um die Site-Performance optimal zu halten. Daher kann die Einrichtung der Seitennummerierung sinnvoll sein. {% endhint %}

### Konfiguration der Suchmaschine * **Platzhalter:** Legen Sie einen Platzhaltertext für das Suchfeld fest, um Benutzern zu zeigen, wonach sie suchen können. * **Position:** Wählen Sie die Position des Suchfelds innerhalb des Tabellenlayouts für optimale Zugänglichkeit. * **Standard-Suchwert:** Legen Sie einen Suchwert im Voraus fest, um die Tabellendaten beim Laden zu filtern. {% hint style="info" %} Das Suchfeld wird angezeigt, sobald mindestens eine Spalte als **Durchsuchbar** — **Suche in allen Spalten zulassen** zählt — oder zumindest eine **Suchfeld** ist ebenfalls eine angezeigte Spalte, die keine Zeitspalte ist. {% endhint %}

Eine Spalte, die auf „Durchsuchbar“ gesetzt ist — die übliche Art, das Suchfeld anzuzeigen.

### Einstellungsreferenz #### Allgemein **API-Name** ist eine eindeutige Kennung, die zur Referenzierung der Komponente verwendet wird (3 bis 30 Zeichen; Buchstaben, Ziffern, Unterstriche und Bindestriche). **Tabellenkopf ausblenden** blendet den Tabellenkopf aus, **Tabellenrahmen ausblenden** blendet zusätzlich die Tabellenrahmen aus (nur wenn **Tabellenkopf ausblenden** ebenfalls aktiviert ist), und **Checkbox-Spalte ausblenden** entfernt die Spalte, die für Auswahlkästchen zur Zeilenauswahl verwendet wird. **Spalte mit Zeilennummern anzeigen** zeigt eine Spalte mit Zeilennummern an, und **Versatz der Zeilennummer** legt die Startnummer für diese Nummerierung fest. **Maximale Zeilenbearbeitung und -auswahl** begrenzt, wie viele Zeilen gleichzeitig bearbeitet oder ausgewählt werden können; eine Zeile, die sowohl bearbeitet als auch ausgewählt ist, zählt als eine. **Maximale Zeilenauswahl** begrenzt die maximale Anzahl von Zeilen, die ausgewählt werden können, **Schlüsselwert für deaktivierte ausgewählte Zeilen** listet die durch Kommas getrennten Schlüssel-Feldwerte der Zeilen auf, die für die Auswahl deaktiviert werden sollen, **Anzahl der ausgewählten Elemente anzeigen** zeigt die Anzahl der derzeit ausgewählten Elemente an, und **untere Leiste unterdrücken** blendet die untere Leiste aus, die typischerweise für Aktionen und Informationsanzeigen verwendet wird. **Schreibgeschützt** macht die Tabelle nicht interaktiv und erlaubt keine Bearbeitungen oder Auswahlen. **Bearbeitung in allen Spalten zulassen**, **Filterung in allen Spalten zulassen**, **Suche in allen Spalten zulassen**, **Sortierung in allen Spalten zulassen**, und **Zeilenumbruch in allen Spalten zulassen** aktivieren Sie Bearbeitung, Filterung, Suche, Sortierung und Textumbruch für jede Spalte, und **Standardaktionen ausblenden** blendet vordefinierte Aktionen wie Bearbeiten oder Löschen aus. **Tabellenkopf umbrechen** bricht lange Kopfzeilenbeschriftungen um, anstatt sie abzuschneiden. **Modus für Spaltenbreiten** wählt **Feste** oder **Auto** Spaltenbreiten, **Maximale Spaltenbreite** und **Minimale Spaltenbreite** legt die Breitengrenzen fest, **Maximale Zeilenanzahl für umgebrochenen Text** begrenzt die Anzahl der Zeilen für umgebrochenen Zelltext, **Spaltenänderung deaktiviert** schaltet die Größenänderung von Spalten aus, und **Änderungsschritt** legt die Breitenänderung in Pixeln fest, um die sich eine Spalte beim Anpassen verändert. **Sortierrichtung** legt die Sortierrichtung der Tabelle beim Laden fest und **Standard-Sortierrichtung** die Richtung, die angewendet wird, wenn eine Spalte zum ersten Mal sortiert wird — **Aufsteigend** oder **Absteigend** für beides. **Anzeige „Sortiert nach“** zeigt an, welche Spalte derzeit für die Sortierung verwendet wird. **Header-Titel** und **Header-Untertitel** legt den Titel und die Beschriftung der Kopfzeile fest, jeweils mit eigener **Textstil des Überschriftstitels** / **Textstil des Untertitels**. **Name des Kopfzeilensymbols** fügt ein Kopfzeilen-Symbol hinzu und **Größe des Kopfzeilensymbols** legt dessen Größe fest (**Mittel** standardmäßig), und **Kopfzeile ist verbunden** verbindet die Kopfzeile optisch mit dem Tabellenkörper. **Kopfzeilenaktionen ausblenden**, **Kopfzeilenaktionen deaktivieren**, **Sichtbare Schaltflächen für Kopfzeilenaktionen**, und **Header-Aktionen** steuern die Sichtbarkeit, Verfügbarkeit, Anzahl und Definition der Schaltflächen für Kopfzeilenaktionen. #### Seitennummerierung und Suche **Attribute der Seitennummerierung** enthält die Seitennavigationssteuerungen: **Seitennummerierung anzeigen** rendert sie, **Anzahl der Elemente pro Seite** legt fest, wie viele Datensätze jede Seite enthält (oder, wenn die Seitennummerierung deaktiviert ist und die Tabellenhöhe fest ist, wie viele Datensätze gleichzeitig geladen werden), **Ausrichtung** platziert die Steuerelemente **Links**, **Mitte** oder **Rechts**, und die **Erste**, **Vorherige**, **Nächste** und **Letzte** Schaltflächen haben jeweils eigene **Schaltflächenbeschriftung** und **Symbolname der Schaltfläche**. **Pill-Container-Attribute** zeigt die ausgewählten Zeilen als Pills an: **Ausgewähltes Element im Pill-Container anzeigen** schaltet den Container ein, **Beschriftungsfeld** wählt das Feld aus, dessen Wert jede Pill beschriftet, **Sortierbar** ermöglicht es Benutzern, sie neu anzuordnen, und **Einzeilig** hält sie in einer Zeile. **Attribute der Suchmaschine** konfigurieren Sie das Suchfeld: **Platzhalter** legt seinen Platzhaltertext fest, **Position** platziert es **Links**, **Rechts**, **Mitte**, **Auffüllen** oder **Panel** (im Seitenpanel), und **Standard-Suchwert** füllt es vorab aus. #### Filterung **Filtermenü-Attribute** konfigurieren Sie die Filter pro Spalte. **Typ** platziert sie **Horizontal** (standardmäßig) oben, in einer **Popover**, oder in einem **Panel** neben der Tabelle. **Sortierreihenfolge für Auswahllistenfilter** legt die Reihenfolge fest, in der Auswahllistenwerte angezeigt werden (**Aufsteigend**, standardmäßig, **Absteigend**, oder **Standardreihenfolge des Felds**), **Datensatz-Auswahllistenwerte verwenden** leitet die Optionen eines Auswahllistenfilters aus den in den Datensätzen vorhandenen Werten ab, anstatt aus dem vollständigen Wertesatz des Feldes, und **Kaskadierende Filterwerte verwenden** schränkt die Optionen der anderen Filter auf die aktuelle Auswahl ein (hat Vorrang vor **Datensatz-Auswahllistenwerte verwenden**). Jeder Filter besitzt außerdem einen Operator, der aus einem Menü oben im Filter ausgewählt wird. Text-, Auswahllisten-, Mehrfachauswahllisten- und Nachschlagefilter bieten **Gleich** (der Standard), **Ungleich**, **Leer** und **Nicht leer**. Zahlen-, Datums- und Zeitfilter bieten **Zwischen** (der Standard), **Nicht zwischen**, **Gleich**, **Ungleich**, **Kleiner als**, **Kleiner oder gleich**, **Größer als**, **Größer oder gleich**, **Leer** und **Nicht leer**. **Leer** und **Nicht leer** keinen Wert an, sodass die Eingaben des Filters ausgeblendet werden, solange einer von beiden ausgewählt ist. Kontrollkästchen-Filter haben kein Operator-Menü. #### Seitenpanel **Attribute des Seitenpanels** konfigurieren Sie das Panel neben der Tabelle. Es erscheint nur, sobald die Suche oder das Filtermenü darin positioniert ist — **Position** gesetzt auf **Panel** in **Attribute der Suchmaschine**, oder **Typ** gesetzt auf **Panel** in **Filtermenü-Attribute**. * **Position:** auf welcher Seite sich das Panel befindet, **Links** (der Standard) oder **Rechts**. * **Standardmäßig geschlossen:** startet das Panel eingeklappt. Standardmäßig aus. * **Umschaltschaltfläche ausblenden:** entfernt die Kopfzeilenschaltfläche, mit der Benutzer das Panel öffnen und schließen. Standardmäßig aus. * **Beschriftung der Zurücksetzen-Schaltfläche:** die Beschriftung der Schaltfläche, die jede Filterauswahl löscht. `Alle Auswahlen löschen` standardmäßig. #### Keine-Ergebnisse-Nachricht **Keine-Ergebnisse-Nachricht** ersetzt den Standard-Leerzustand durch Ihren eigenen Text, wenn keine Zeile der Suche oder den Filtern entspricht — oder wenn die Datenquelle überhaupt nichts zurückgibt. **Attribute der Keine-Ergebnisse-Nachricht** steuert, was dieser Leerzustand anzeigt: **Keine-Ergebnisse-Bild ausblenden** entfernt die Illustration und **Keine-Ergebnisse-Nachricht ausblenden** entfernt den Text. Beide sind standardmäßig deaktiviert. ## Formatierung {% tabs %} {% tab title="Kopfzeile" %} | Name | Beschreibung | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | **Hintergrundfarbe** | Legt die Farbe des Hintergrunds der Kopfzeile fest. | | **Rahmenfarbe** | Definiert die Farbe des Rahmens der Kopfzeile. | | **Rahmengröße** | Passt die Dicke des Rahmens an. | | **Rahmenstil** | Wählt den Stil (durchgezogen, gepunktet, gestrichelt usw.) des Rahmens aus. | | **Rahmenradius** | Rundet die Ecken der Kopfzeile ab. | | **Farbe der unteren Rahmenlinie (Ist verbunden)** | Gibt die Farbe des unteren Rahmens an, wenn die Kopfzeile optisch mit dem Tabellenkörper verbunden ist. | | **Größe der unteren Rahmenlinie (Ist verbunden)** | Bestimmt die Dicke des verbundenen unteren Rahmens. | | **Stil der unteren Rahmenlinie (Ist verbunden)** | Legt den Stil für den verbundenen unteren Rahmen fest. | | **Innen- und Außenabstand** | Steuert den Abstand innerhalb (Innenabstand) und außerhalb (Außenabstand) der Kopfzeile. | | {% endtab %} | | {% tab title="Header-Titel" %} | Name | Beschreibung | | ------------------ | ------------------------------------------------------------------- | | **Farbe** | Legt die Farbe des Titeltexts fest. | | **Schriftgröße** | Passt die Größe des Titeltexts an. | | **Schriftschnitt** | Ändert die Fettstärke des Titeltexts. | | **Schriftstil** | Wendet einen bestimmten Stil (kursiv, normal) auf den Titeltext an. | | {% endtab %} | | {% tab title="Header-Untertitel" %} | Name | Beschreibung | | ------------------ | ------------------------------------------- | | **Farbe** | Definiert die Farbe des Beschriftungstexts. | | **Schriftgröße** | Passt die Größe des Untertiteltexts an. | | **Schriftschnitt** | Steuert die Stärke des Beschriftungstexts. | | **Schriftstil** | Legt den Stil des Beschriftungstexts fest. | | {% endtab %} | | {% tab title="Kopfzeilensymbol" %} | Name | Beschreibung | | ----------------------------- | ---------------------------------------------------------------- | | **Hintergrundfarbe** | Legt die Hintergrundfarbe des Symbols fest. | | **Vordergrundfarbe** | Ändert die Farbe des Symbols selbst. | | **Vordergrundfarb-Hilfswert** | Passt die Hilfsfarbe für Kontrast oder Hervorhebung an. | | **Rahmenradius** | Rundet die Ecken des Symbols für ein weicheres Erscheinungsbild. | | {% endtab %} | | {% tab title="Pill-Container" %} | Name | Beschreibung | | ----------------------------------- | ------------------------------------------------------------------------------------ | | **Pill-Hintergrundfarbe/bei Hover** | Legt die Hintergrundfarbe der Pill-Elemente fest, mit einer anderen Farbe bei Hover. | | **Pill-Textfarbe/bei Hover** | Ändert die Textfarbe innerhalb der Pill, mit einer anderen Farbe bei Hover. | | **Zeilenhöhe der Pill** | Passt die Zeilenhöhe innerhalb der Pill für die Textausrichtung an. | | {% endtab %} | | {% tab title="Avatar" %} | Name | Beschreibung | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | **Objektanpassung des Avatar-Bilds** | Bestimmt, wie das Avatar-Bild in seinen Container passen soll. Zu den Optionen gehören „fill“, „contain“, „cover“, „none“ und „scale-down“. | | {% endtab %} | | {% tab title="Seitennummerierungs-Schaltflächen" %} | Name | Beschreibung | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ | | **Stil-Einstellungen** | Passt das Erscheinungsbild der Seitennavigationsschaltflächen an, einschließlich Farb-, Größen- und Rahmeneigenschaften. | | {% endtab %} | | {% tab title="Fußzeile" %} | Name | Beschreibung | | -------------------- | -------------------------------------------------- | | **Hintergrundfarbe** | Legt die Farbe des Hintergrunds der Fußzeile fest. | | **Rahmenfarbe** | Definiert die Farbe des Rahmens der Fußzeile. | | **Rahmengröße** | Passt die Dicke des Rahmens an. | | **Rahmenstil** | Wählt den Stil des Rahmens aus. | | **Rahmenradius** | Rundet die Ecken der Fußzeile ab. | | {% endtab %} | | {% tab title="Filter-Panel" %} Gestaltet das Seitenpanel, das die Filter und die Suche enthält. * **Filter-Panel:** Hintergrundfarbe / Rahmenfarbe / Rahmenstärke / Rahmenstil / Rahmenradius. * **Beschriftungen des Filter-Panels:** Hintergrund / Hintergrund aktiv / Hintergrund bei Hover; Farbe des Einklappsymbols; Farbe / Farbe aktiv / Farbe bei Hover; Schriftgröße / Schriftstärke. * **Optionen des Filter-Panels:** Farbe; Rahmenfarbe des Kontrollkästchens; Textfarbe / Textfarbe aktiv / Textfarbe bei Hover der Schaltfläche „Mehr laden“. * **Zurücksetzen-Schaltfläche des Filter-Panels:** Hintergrundfarbe / Textfarbe / Rahmenfarbe / Rahmenstärke / Rahmenradius. {% endtab %} {% endtabs %} ## Anwendungsfälle ### Beispiel 1: Erweiterte Kontenliste und zugehörige Kontakte {% @arcade/embed url="" flowId="sxcJn4NliMFN6qTRk5Mi" %} Geben Sie Ihren Partnern eine leistungsstarke, intuitive Möglichkeit, Kontodaten zu erkunden, mit Inline-Suche, Filterung und einem Live-Kontaktbereich, der sich beim Navigieren aktualisiert. *** #### **Was Sie erreichen werden** * **Suchbare, filterbare Kontenliste:** Ermöglichen Sie Partnern, Konten schnell nach Name oder Branche mithilfe integrierter Such- und Filtersteuerungen zu finden. * **Inline-verknüpfte Datensätze:** Machen Sie Kontonamen anklickbar, damit Partner direkt zu den Detailseiten des Datensatzes springen können. * **Live-Panel mit zugehörigen Kontakten:** Zeigen Sie eine zweite Tabelle an, die automatisch aktualisiert wird, um Kontakte anzuzeigen, die mit dem jeweils ausgewählten Konto verknüpft sind. * **Ergebnisse mit Seitennummerierung:** Halten Sie die Benutzeroberfläche sauber und performant, indem Sie die sichtbaren Datensätze pro Seite begrenzen. *** #### **Bevor Sie beginnen** * **Seitenlayout mit zwei Spalten:** Stellen Sie sicher, dass Ihre Kontenlisten-Seite im Experience Builder bereits über ein Zwei-Spalten-Layout verfügt, das beide Komponenten aufnehmen kann. *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die erste AX - Datatable zu Ihrer Seite hinzu** * Ziehen Sie eine AX - Datatable-Komponente in die linke Spalte Ihrer Kontenlisten-Seite im Experience Builder. {% endstep %} {% step %} #### **Wählen Sie eine Datenquelle** * Wählen Sie **Konten abfragen** als Datenquelle für diese Komponente aus. {% endstep %} {% step %} #### **Legen Sie Ihre Datenzuordnungen fest** * Fügen Sie die folgenden Spalten hinzu: Name, Branche, Owner.FullName und Telefon. * Aktivieren Sie **Verlinken** in der Name-Spalte, damit Kontonamen zu anklickbaren Links werden. * Legen Sie **Branche** als Filterfeld fest. * Legen Sie **Name** als Suchfeld fest. {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Setzen Sie die **API-Name** bis `AccountsTable`. * Legen Sie **Maximale Zeilenauswahl** bis `1` sodass jeweils nur ein Konto ausgewählt werden kann. * Aktivieren Sie die Seitennummerierung und setzen Sie die **Maximale Anzahl von Datensätzen** bis `10`. {% endstep %} {% step %} #### **Kopfzeile anpassen** * Setzen Sie die **Header-Titel** bis `Konten`. * Setzen Sie die **Kopfzeilensymbol** bis `standard:account_info`. {% endstep %} {% step %} #### **Fügen Sie die zweite AX - Datatable zu Ihrer Seite hinzu** * Ziehen Sie eine zweite AX - Datatable-Komponente in die rechte Spalte derselben Seite. {% endstep %} {% step %} #### **Wählen Sie eine Datenquelle für die Kontakttabelle** * Wählen Sie **Kontakte abfragen** als Datenquelle aus. * Fügen Sie einen Filter hinzu, sodass **AccountId** entspricht `{{AccountsTable.selectedRecord.Id}}`, wodurch die Ergebnisse dieser Tabelle mit dem jeweils ausgewählten Konto verknüpft werden. {% endstep %} {% step %} #### **Legen Sie Ihre Datenzuordnungen fest** * Fügen Sie die folgenden Spalten hinzu: Name und Titel. {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Setzen Sie die **API-Name** bis `relatedContactsTable`. {% endstep %} {% step %} #### **Kopfzeile anpassen** * Setzen Sie die **Header-Titel** bis `Zugehörige Kontakte`. * Setzen Sie die **Kopfzeilensymbol** bis `standard:contact`. {% endstep %} {% step %} #### **Sehen Sie sich Ihre Seite in der Vorschau an** * Klicken Sie im Experience Builder auf Vorschau, wählen Sie eine Kontozeile aus und bestätigen Sie, dass die Tabelle Zugehörige Kontakte dynamisch aktualisiert wird, um den ausgewählten Datensatz widerzuspiegeln. {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="/pages/4790f7f569b297634520bb7d90c8c2dcb7588dab" %} [Verknüpfte Datentabellen](/experience-cloud/experience-cloud-de/tutorials/reactive-components/linked-data-tables.md) {% endcontent-ref %} *** ### Beispiel 2: Zugehörige Opportunities auf einer Kontoseite {% @arcade/embed url="" flowId="tZa89LmaWt8n5CoQhwB8" %} Geben Sie Vertriebsbenutzern direkt dort, wo sie es brauchen, einen Überblick über jede mit einem Konto verknüpfte Opportunity, ohne jemals die Datensatzseite zu verlassen. *** #### **Was Sie erreichen werden** * **Umfassendere 360-Grad-Kundensicht:** Zeigen Sie wichtige Opportunity-Daten direkt auf der Kontoseite an, damit Vertriebsbenutzer das Gesamtbild an einem Ort erhalten. * **Vollständig ausgestattete Datensatzseiten:** Erstellen Sie dichte, informationsreiche Seiten, die es überflüssig machen, zwischen Registerkarten oder Objekten zu wechseln, um eine Pipeline zu bearbeiten. *** #### **Bevor Sie beginnen** * **Kontodatensatzseite mit vorhandenen Komponenten:** Stellen Sie sicher, dass Ihre Kontodatensatzseite im Experience Builder bereits Detailangaben zum Datensatz, ein Banner und ein Spaltenlayout enthält, die bereit sind, die neue Komponente aufzunehmen. *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie AX - Datatable zu Ihrer Kontoseite hinzu** * Ziehen Sie eine AX - Datatable-Komponente auf Ihre Kontodatensatzseite im Experience Builder. {% endstep %} {% step %} #### **Wählen Sie eine Datenquelle** * Wählen Sie **Opportunities abfragen** als Datenquelle für diese Komponente aus. {% endstep %} {% step %} #### **Legen Sie Ihre Datenzuordnungen fest** * Fügen Sie die folgenden Spalten hinzu: Name, Phase und Betrag. * Aktivieren Sie **Verlinken** in der Spalte Name, damit Opportunity-Namen zu anklickbaren Links werden. {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Setzen Sie die **API-Name** bis `RelatedOpportunities`. * Fügen Sie einen Filter hinzu, sodass **AccountId** entspricht `{!Item.id}`, wodurch die Ergebnisse auf das aktuell angezeigte Konto beschränkt werden. {% endstep %} {% step %} #### **Kopfzeile anpassen** * Setzen Sie die **Header-Titel** bis `Verkaufschancen`. * Setzen Sie die **Kopfzeilenstil** bis `Überschrift 2`. * Setzen Sie die **Kopfzeilensymbol** bis `standard:opportunity`. {% endstep %} {% step %} #### **Sehen Sie sich Ihre Seite in der Vorschau an** * Klicken Sie im Experience Builder auf Vorschau und navigieren Sie zu einem Kontodatensatz, um zu bestätigen, dass nur die mit diesem Konto verbundenen Opportunities in der Tabelle angezeigt werden. {% endstep %} {% endstepper %} --- # 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-data-table.md?ask=&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.