> 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 - Datentabelle ## Übersicht **AX - Datentabelle** ist eine Experience-Cloud-Komponente, die Ihre Salesforce-Datensätze in einer interaktiven Tabelle auf Seiten von Experience Sites (früher Community Cloud) anzeigt. Verwenden Sie sie, um Portalnutzern gefilterte Datensätze mit voller Kontrolle über Spalten, Sortierung, Suche und Paginierung anzuzeigen. Ziehen Sie Datensätze aus jedem Standard- oder benutzerdefinierten Objekt und lassen Sie externe Benutzer Daten einsehen, durchsuchen und mit ihnen interagieren, die für ihr Konto oder Profil relevant sind. Perfekt für Kundenportale, die den Bestellverlauf anzeigen, Partnerportale, die den Bestellverlauf anzeigen, Partnerportale, die gemeinsam genutzte Datensätze anzeigen, oder Self-Service-Sites, auf denen Benutzer ihre eigenen Daten finden und anzeigen müssen. {% hint style="success" %} Das Avonni Data Table ist eine [Reaktive Datenkomponente](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) {% endhint %} *** ## Erste Schritte Nutzen Sie dieses einfache Tutorial, um die Grundlagen der Data-Table-Komponente zu lernen und mit Ihren Anwendungsfällen zu beginnen. {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} *** ## Anleitungen
Erstellen Sie auf der Data Table eine Schaltfläche „Exportieren nach“/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb
Die Data Table konfigurieren/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz
Salesforce-CMS-Dateien in einer Data Table anzeigen/pages/6ce70b8121e840b6af46cad88a8d4e1cfcb977cf
*** ## Verbinden Sie Ihre Data Table mit Salesforce-Daten ### Datenquelle Im Bereich Datenquelle verbinden Sie die Avonni Data Table mit Ihren Salesforce-Daten. Sie haben zwei Optionen.
DatenquellentypBeschreibungAnwendungsfall
Manuelle DatenquelleDaten manuell in die Datentabelle eingeben.Ideal für nicht dynamische Daten, Tests und Demos.
AbfrageErstellen Sie eine Abfrage, um die Tabelle automatisch mit Salesforce-Daten zu füllen.Geeignet für dynamische, Echtzeit- und große Datensätze.
CMS CollectionZeigen Sie Ihre CMS-Collections nahtlos in Data Tables an, um dynamische Inhaltsaktualisierungen zu ermöglichen.Erstellen Sie automatisch aktualisierte Ressourcenlisten oder News-Feeds.
{% hint style="info" %} Im Abfragemodus werden Daten in Blöcken von 25 Datensätzen angezeigt, um eine optimale Site-Performance zu gewährleisten. {% endhint %} ### Konfiguration der Datenzuordnung Im Bereich Datenzuordnungen erwecken Sie Ihre Datentabelle zum Leben, indem Sie ihre Spalten definieren und anpassen.
Datenmodellfreigabe mit der Avonni Data Table **Einhaltung der Salesforce-Datenfreigaberegeln:** * **Org-Einstellungen beachten:** Avonni-Komponenten entsprechen vollständig den bestehenden Datenfreigabekonfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation. * **Keine Beeinträchtigung:** Diese Komponenten verä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 von Ihrer Organisation definierten Freigabeeinstellungen und Benutzerberechtigungen 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 Bereich wird festgelegt, welche Daten sichtbar sind und wie sie in Ihrer Tabelle organisiert werden. * Klicken Sie auf eine Spalte, um alle Eigenschaften für diese bestimmte Spalte aufzurufen.
#### Spalteneigenschaften konfigurieren * **Datentyp:** Passen Sie den Anzeigetyp des Felds an (z. B. Text, Zahl, Datum), um eine korrekte Darstellung der Daten sicherzustellen. * **Verlinken:** Aktivieren Sie das Verlinken von Zelleninhalten mit anderen Datensätzen oder URLs für eine schnelle Navigation. * **Zellattribute:** Passen Sie die Zell-Ausrichtung und Symbole an, um eine intuitivere und optisch ansprechendere Tabelle zu erstellen. * **Bearbeitbar:** Legen Sie fest, ob eine Spalte direkt in der Tabelle bearbeitbar sein soll. * **Filterbar und durchsuchbar:** Aktivieren Sie das Filtern und Durchsuchen pro Spalte für eine effiziente Datenverwaltung. * **Ausgeblendet:** Wählen Sie aus, bestimmte Spalten auszublenden – nützlich für sensible oder weniger relevante Daten. * **Sortierbar:** Erlauben Sie Benutzern, Daten nach der angegebenen Spalte zu sortieren. * **Standardaktionen ausblenden:** Wählen Sie diese Option, um voreingestellte Aktionen für ein saubereres Erscheinungsbild auszublenden. * **Text umbrechen:** Aktivieren Sie den Textumbruch für bessere Lesbarkeit in schmalen Spalten. * **Spaltenbreite festlegen:** Geben Sie die Breite jeder Spalte an, um ein ausgewogenes und übersichtliches Layout zu erzielen. #### Zeilenaktionen hinzufügen Hier ist ein geführtes interaktives Tutorial zum Hinzufügen von Zeilenaktionen zur Data Table. {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} *** ## Weitere Konfigurationseinstellungen ### Grundeinstellungen **Tabellenkopf ausblenden** * Mit dieser Option können Sie den Tabellenkopf entfernen, um ein saubereres und minimalistischeres Erscheinungsbild zu erzielen.
**Checkbox-Spalten ausblenden** * Aktivieren Sie diese Einstellung, um die Checkbox-Spalten auszublenden, die typischerweise für die Zeilenauswahl in Mehrfachaktionsszenarien verwendet werden.
**Spalte mit Zeilennummer anzeigen** * Aktivieren Sie dies, um eine Spalte anzuzeigen, die jede Zeile nummeriert; dies ist nützlich für eine einfache Datenreferenz. ### Kopfzeilenkonfiguration **Titel und Untertitel** * Passen Sie die Kopfzeile mit einem Titel und einem Untertitel an, um Kontext oder Zusammenfassungsinformationen zu den Tabellendaten bereitzustellen. **Symbolname und Größe** * Erweitern Sie die Kopfzeile mit einem Symbol, indem Sie Typ und Größe für eine visuelle Hervorhebung auswählen. **Ist verbunden** * Diese Einstellung bestimmt, ob die Kopfzeile visuell mit dem Tabellenkörper verbunden ist, was sich auf das Gesamtdesign auswirkt. **Header-Aktionen** * Konfigurieren Sie Aktionen (hinzufügen, löschen oder benutzerdefinierte Funktionen), die direkt in der Tabellenkopfzeile verfügbar sind.
### 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 für die Schaltfläche konfigurieren Konfigurieren Sie die Interaktion für den Fall, dass Benutzer die Kopfzeilen-Aktionsschaltfläche im Abschnitt „Bei Klick“ drücken. Um zu verstehen, wie die Interaktion „Navigieren“ funktioniert, [klicken Sie hier](/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 %} ### Paginierungsattribute * Konfigurieren Sie Paginierungseinstellungen, z. B. die Anzahl der Elemente pro Seite und den Paginierungsstil, 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 von Paginierung sinnvoll sein. {% endhint %}
### Suchmaschinenkonfiguration * **Platzhalter:** Legen Sie einen Platzhaltertext für das Suchfeld fest, um Benutzer dabei zu unterstützen, wonach sie suchen können. * **Position:** Wählen Sie die Position des Suchfelds innerhalb des Tabellenlayouts für eine optimale Zugänglichkeit. * **Standard-Suchwert:** Legen Sie einen Suchwert im Voraus fest, um die Tabellendaten beim Laden zu filtern. {% hint style="info" %} Um das Suchfeld anzuzeigen, muss mindestens eine Spalte als „Durchsuchbar“ markiert sein. {% endhint %}

Mindestens eine Spalte muss auf „Durchsuchbar“ gesetzt sein, um das Suchfeld anzuzeigen.

## Einstellungen {% tabs %} {% tab title="🎛️ Allgemein" %} | Name | Beschreibung | | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | **Tabellenkopf ausblenden** | Umschalten, um den Tabellenkopf auszublenden | | **Checkbox-Spalte ausblenden** | Die für Zeilenauswahl-Checkboxen verwendete Spalte entfernen | | **Spalte mit Zeilennummer anzeigen** | Eine Spalte anzeigen, die die Zeilennummer anzeigt | | **Offset der Zeilennummer** | Die Startnummer für die Zeilennummerierung festlegen | | **Maximale Zeilenauswahl** | Die maximale Anzahl auswählbarer Zeilen begrenzen | | **Untere Leiste ausblenden** | Die untere Leiste ausblenden, die typischerweise für Aktionen und Informationsanzeige verwendet wird | | **Anzahl ausgewählter Elemente anzeigen** | Die Anzahl der derzeit ausgewählten Elemente anzeigen | | **Schreibgeschützt** | Die Tabelle nicht interaktiv machen und Bearbeitungen oder Auswahlen nicht zulassen | | **Bearbeitung für alle Spalten zulassen** | Bearbeitung für alle Spalten aktivieren | | **Filter für alle Spalten zulassen** | Filteroptionen für alle Spalten aktivieren | | **Umbruch für alle Spalten zulassen** | Textumbruch in allen Spalten zulassen | | **Standardaktionen ausblenden** | Vordefinierte Aktionen wie Bearbeiten oder Löschen ausblenden | | **Modus für Spaltenbreiten** | Wählen Sie für die Spaltenbreite zwischen „fest“ oder „automatisch“ | | **Max./Min. Spaltenbreite** | Legen Sie maximale und minimale Grenzen für die Spaltenbreiten fest | | **Max. Zeilen für Textumbruch** | Definieren Sie die maximale Anzahl von Zeilen für den Textumbruch in Zellen | | **Größenänderung der Spalte deaktiviert** | Die Möglichkeit, die Spaltenbreite zu ändern, deaktivieren | | **Schritt für Größenänderung** | Den Inkrement-Schritt für die Größenänderung von Spalten festlegen | | **Sortiert-/Standard-Sortrichtung** | Wählen Sie „asc“ oder „desc“ für die anfängliche Sortierrichtung | | **Wert „Sortiert nach“ anzeigen** | Anzeigen, welche Spalte derzeit zum Sortieren verwendet wird | | **Kopftitel/Untertitel** | Legen Sie einen Titel und einen Untertitel für die Tabellenkopfzeile fest | | **Name/Größe des Kopfzeilensymbols** | Fügen Sie der Kopfzeile ein Symbol mit anpassbarer Größe hinzu | | **Kopfzeile ist verbunden** | Wählen Sie, die Kopfzeile visuell mit dem Tabellenkörper zu verbinden | | **Kopfzeilenaktionen ausblenden/deaktivieren** | Sichtbarkeit und Interaktivität von Kopfzeilenaktionen steuern | | **Sichtbare Schaltflächen für Kopfzeilenaktionen** | Geben Sie an, welche Aktionsschaltflächen in der Kopfzeile sichtbar sind | | **Header-Aktionen** | Benutzerdefinierte Aktionen zur Tabellenkopfzeile hinzufügen | | {% endtab %} | | {% tab title="⏩️ Paginierung und Suche" %} ### Paginierungsattribute | Name | Beschreibung | | --------------------------------- | -------------------------------------------------------------------- | | **Seitennummerierung anzeigen** | Die Anzeige der Paginierungssteuerelemente umschalten | | **Anzahl der Elemente pro Seite** | Legen Sie fest, wie viele Elemente pro Seite angezeigt werden sollen | ### Optionen für den Pill-Container * Einen Container für ausgewählte Elemente anzeigen, oft in Verbindung mit der Zeilenauswahl verwendet. ### Suchmaschinenoptionen | Name | Beschreibung | | --------------------- | ------------------------------------------------- | | **Platzhalter** | Platzhaltertext für die Sucheingabe festlegen | | **Position** | Die Position der Suchleiste festlegen | | **Standard-Suchwert** | Die Suchleiste mit einem Standardwert vorbefüllen | | {% endtab %} | | {% tab title="🗄️ Filterung und Datenquelle" %} | Name | Beschreibung | | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | | **Filteroptionen** | Konfigurieren Sie die Filterung so, dass sie für jede Spalte als Popover angezeigt wird. | | **Datenquelle** | Wählen Sie zwischen „manuell“ und „Abfrage“ zum Befüllen der Tabellendaten. | | **Spalten** | Definieren und fügen Sie Spalten zur Datentabelle hinzu und passen Sie die Eigenschaften und das Verhalten jeder Spalte an. | | {% endtab %} | | {% tab title="🎨 Gestaltung" %} ### Header | Name | Beschreibung | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | **Hintergrundfarbe** | Legt die Farbe des Hintergrunds der Kopfzeile fest. | | **Rahmenfarbe** | Legt die Farbe des Rahmens der Kopfzeile fest. | | **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. | | **Untere Rahmenfarbe (verbunden)** | Gibt die Farbe des unteren Rahmens an, wenn die Kopfzeile visuell mit dem Tabellenkörper verbunden ist. | | **Untere Rahmenstärke (bei verbundenen Elementen)** | Bestimmt die Dicke des verbundenen unteren Rahmens. | | **Untere Rahmenart (bei verbundenen Elementen)** | Legt den Stil für den verbundenen unteren Rahmen fest. | | **Innen- und Außenabstand** | Steuert den Abstand innerhalb (Padding) und außerhalb (Margin) der Kopfzeile. | ### Header-Titel | Name | Beschreibung | | ----------------- | ------------------------------------------------------------------- | | **Farbe** | Legt die Farbe des Titeltextes fest. | | **Schriftgröße** | Passt die Größe des Titeltextes an. | | **Schriftstärke** | Ändert die Fettheit des Titeltextes. | | **Schriftstil** | Wendet einen bestimmten Stil (kursiv, normal) auf den Titeltext an. | ### Header-Beschriftung | Name | Beschreibung | | ----------------- | ------------------------------------------ | | **Farbe** | Legt die Farbe des Untertiteltexts fest. | | **Schriftgröße** | Passt die Größe des Beschriftungstexts an. | | **Schriftstärke** | Steuert die Stärke des Untertiteltexts. | | **Schriftstil** | Legt den Stil des Untertiteltexts fest. | ### Kopfzeilensymbol | Name | Beschreibung | | ----------------------------------------- | ------------------------------------------------------------------------------- | | **Hintergrundfarbe** | Legt die Hintergrundfarbe des Symbols fest. | | **Vordergrundfarbe** | Ändert die Farbe des Symbols selbst. | | **Hilfsklassen für die Vordergrundfarbe** | Passt die Hilfsfarbe für Kontrast oder Hervorhebung an. | | **Rahmenradius** | Rundet die Ecken des Symbols ab, um ein weicheres Erscheinungsbild zu erzielen. | ### Pill-Container | Name | Beschreibung | | ------------------------------- | ------------------------------------------------------------------------------------ | | **Pill-Hintergrundfarbe/Hover** | Legt die Hintergrundfarbe der Pill-Elemente fest, mit einer anderen Farbe bei Hover. | | **Pill-Textfarbe/Hover** | Ändert die Textfarbe innerhalb der Pill, mit einer anderen Farbe bei Hover. | | **Pill-Zeilenhöhe** | Passt die Zeilenhöhe innerhalb der Pill für die Textausrichtung an. | ### Avatar | Name | Beschreibung | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | **Anpassung des Avatar-Bildobjekts** | Bestimmt, wie das Avatar-Bild in seinen Container passen soll. Zu den Optionen gehören „fill“, „contain“, „cover“, „none“ und „scale-down“. | ### Seitennummerierungs-Schaltflächen | Name | Beschreibung | | ------------------------- | ------------------------------------------------------------------------------------------------------------------- | | **Styling-Einstellungen** | Passt das Erscheinungsbild der Paginierungsschaltflächen an, einschließlich Farb-, Größen- und Rahmeneigenschaften. | ### Fußzeile | Name | Beschreibung | | -------------------- | -------------------------------------------------- | | **Hintergrundfarbe** | Legt die Farbe des Hintergrunds der Fußzeile fest. | | **Rahmenfarbe** | Legt die Farbe des Rahmens der Fußzeile fest. | | **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 %} | | | {% endtabs %} | | ## Anwendungsbeispiele ### Beispiel 1: Erweiterte Kontoliste 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** * **Durchsuchbare, filterbare Kontoliste:** Lassen Sie Partner Konten mithilfe der integrierten Such- und Filtersteuerung schnell nach Name oder Branche finden. * **Inline-verknüpfte Datensätze:** Machen Sie Kontonamen anklickbar, damit Partner direkt zu den Datensatz-Detailseiten springen können. * **Live-Bereich für zugehörige Kontakte:** Zeigen Sie eine zweite Tabelle an, die sich automatisch aktualisiert, um Kontakte anzuzeigen, die mit dem jeweils ausgewählten Konto verknüpft sind. * **Paginierte Ergebnisse:** Halten Sie die Oberfläche sauber und leistungsfähig, indem Sie die sichtbaren Datensätze pro Seite begrenzen. *** #### **Bevor Sie beginnen** * **Zweispaltiges Seitenlayout:** Stellen Sie sicher, dass Ihre Kontolisten-Seite im Experience Builder bereits ein zweispaltiges Layout hat, 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 Kontolisten-Seite im Experience Builder. {% endstep %} {% step %} #### **Wählen Sie eine Datenquelle** * Wählen Sie **Konten abfragen** als Datenquelle für diese Komponente. {% endstep %} {% step %} #### **Legen Sie Ihre Datenzuordnungen fest** * Fügen Sie die folgenden Spalten hinzu: Name, Branche, Owner.FullName und Telefon. * Aktivieren **Verlinken** in der Spalte Name, damit Kontonamen zu anklickbaren Links werden. * Setzen Sie **Branche** als Filterfeld. * Setzen Sie **Name** als Suchfeld. {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Setzen Sie den **API-Namen** auf `AccountsTable`. * Setzen Sie **Maximale Zeilenauswahl** auf `1` damit immer nur ein Konto gleichzeitig ausgewählt werden kann. * Aktivieren Sie die Paginierung und setzen Sie die **Maximale Anzahl von Datensätzen** auf `10`. {% endstep %} {% step %} #### **Kopfbereich anpassen** * Setzen Sie den **Header-Titel** auf `Konten`. * Setzen Sie den **Kopfzeilensymbol** auf `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** gleich `{{AccountsTable.selectedRecord.Id}}`, wodurch die Ergebnisse dieser Tabelle mit dem jeweils aktuell 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 den **API-Namen** auf `relatedContactsTable`. {% endstep %} {% step %} #### **Kopfbereich anpassen** * Setzen Sie den **Header-Titel** auf `Zugehörige Kontakte`. * Setzen Sie den **Kopfzeilensymbol** auf `standard:contact`. {% endstep %} {% step %} #### **Sehen Sie sich Ihre Seite in der Vorschau an** * Klicken Sie im Experience Builder auf Vorschau, wählen Sie eine Kontenzeile aus und bestätigen Sie, dass die Tabelle „Zugehörige Kontakte“ dynamisch aktualisiert wird, um den ausgewählten Datensatz anzuzeigen. {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="/pages/4790f7f569b297634520bb7d90c8c2dcb7588dab" %} [Verknüpfte Datentabellen](/experience-cloud/experience-cloud-de/anleitungen/reactive-components/linked-data-tables.md) {% endcontent-ref %} *** ### Beispiel 2: Zugehörige Opportunities auf einer Kontoseite {% @arcade/embed url="" flowId="tZa89LmaWt8n5CoQhwB8" %} Geben Sie Vertriebsnutzern einen Überblick über jede Opportunity, die mit einem Konto verknüpft ist, direkt dort, wo sie sie benötigen – ohne die Datensatzseite zu verlassen. *** #### **Was Sie erreichen werden** * **Umfassenderer Customer-360-Blick:** Stellen Sie wichtige Opportunity-Daten direkt auf der Kontoseite dar, damit Vertriebsnutzer das vollständige Bild an einem Ort erhalten. * **Vollständig ausgefüllte Datensatzseiten:** Erstellen Sie dichte, informationsreiche Seiten, die den Wechsel zwischen Tabs oder Objekten zur Arbeit an einer Pipeline überflüssig machen. *** #### **Bevor Sie beginnen** * **Kontodatensatzseite mit vorhandenen Komponenten:** Stellen Sie sicher, dass Ihre Kontodatensatzseite im Experience Builder bereits Datensatzdetails, ein Banner und ein Spaltenlayout enthält, das die neue Komponente aufnehmen kann. *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die 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. {% endstep %} {% step %} #### **Legen Sie Ihre Datenzuordnungen fest** * Fügen Sie die folgenden Spalten hinzu: Name, Phase und Betrag. * Aktivieren **Verlinken** in der Spalte Name, damit Opportunity-Namen zu anklickbaren Links werden. {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Setzen Sie den **API-Namen** auf `RelatedOpportunities`. * Fügen Sie einen Filter hinzu, sodass **AccountId** gleich `{!Item.id}`, wodurch die Ergebnisse auf das aktuell angezeigte Konto beschränkt werden. {% endstep %} {% step %} #### **Kopfbereich anpassen** * Setzen Sie den **Header-Titel** auf `Opportunities`. * Setzen Sie den **Kopfzeilenstil** auf `Überschrift 2`. * Setzen Sie den **Kopfzeilensymbol** auf `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 zu diesem Konto gehörenden 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 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-data-table.md?ask= ``` 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.