# AX - Datentabelle

## Übersicht

**AX - Datentabelle** ist eine Experience-Cloud-Komponente, die Ihre Salesforce-Datensätze in einer interaktiven Tabelle auf Seiten von Experience Sites anzeigt (früher Community Cloud).

Verwenden Sie sie, um Portalnutzern gefilterte Datensätze mit voller Kontrolle über Spalten, Sortierung, Suche und Paginierung anzuzeigen. Rufen Sie Datensätze aus jedem Standard- oder benutzerdefinierten Objekt ab und lassen Sie externe Nutzer Daten ansehen, durchsuchen und mit ihnen interagieren, die für ihr Konto oder Profil relevant sind.

Perfekt für Kundenportale, die die Bestellhistorie anzeigen, Partnerportale, die die Bestellhistorie 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](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/reaktive-komponenten)
{% endhint %}

***

## Erste Schritte

Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Datentabellenkomponente zu erlernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen.

{% @arcade/embed flowId="oAo6XOMWRBc7Vn4Y9XNd" url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" %}

***

## Tutorials

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Eine Schaltfläche „Exportieren nach“ in der Datentabelle erstellen</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table">Create an Export To button on the Data Table</a></td></tr><tr><td><strong>Die Datentabelle konfigurieren</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/configuring-the-avonni-data-table">Configuring the Avonni Data Table</a></td></tr><tr><td><strong>Salesforce-CMS-Dateien in einer Datentabelle anzeigen</strong></td><td><a href="../tutorials/komponenten/datentabelle/salesforce-cms-dateien-in-einer-datentabelle-anzeigen">salesforce-cms-dateien-in-einer-datentabelle-anzeigen</a></td></tr></tbody></table>

***

## Verbinden Sie Ihre Datentabelle mit Salesforce-Daten

### Datenquelle

Im Abschnitt Datenquelle verbinden Sie die Avonni-Datentabelle mit Ihren Salesforce-Daten. Sie haben zwei Optionen.

<table><thead><tr><th>Typ der Datenquelle</th><th width="250.33333333333331">Beschreibung</th><th>Anwendungsfall</th></tr></thead><tbody><tr><td><strong>Manuelle Datenquelle</strong></td><td>Daten manuell in die Datentabelle eingeben.</td><td>Ideal für nicht-dynamische Daten, Tests und Demos.</td></tr><tr><td><strong>Abfrage</strong></td><td>Erstellen Sie eine Abfrage, um die Tabelle automatisch mit Salesforce-Daten zu füllen.</td><td>Geeignet für dynamische, Echtzeit- und große Datensätze.</td></tr><tr><td><strong>CMS-Sammlung</strong></td><td>Zeigen Sie Ihre CMS-Sammlungen nahtlos in Datentabellen an, um dynamische Inhaltsaktualisierungen zu ermöglichen.</td><td>Erstellen Sie automatisch aktualisierte Ressourcenlisten oder News-Feeds.</td></tr></tbody></table>

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3PwcU320If3fDaiBQLyt%2F2024-05-06_10-20-35.png?alt=media&#x26;token=fcf364f1-14a1-4421-ab0b-9b360c71ec68" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Im Abfragemodus werden Daten in 25er-Blöcken angezeigt, um eine optimale Website-Performance zu gewährleisten.
{% endhint %}

### Konfiguration der Datenzuordnungen

Im Bereich Datenzuordnungen erwecken Sie Ihre Datentabelle zum Leben, indem Sie ihre Spalten definieren und anpassen.

<details>

<summary>Freigabe des Datenmodells mit der Avonni-Datentabelle</summary>

**Einhaltung der Salesforce-Datenfreigaberegeln:**

* **Berücksichtigung der Organisationseinstellungen:** Avonni-Komponenten entsprechen vollständig den vorhandenen Datenfreigabekonfigurationen und Zugriffs­einstellungen Ihrer Salesforce-Organisation.
* **Nicht-Eingriffsrichtlinie:** 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

</details>

#### 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.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FE2cKSG6IyYXg6PT5EEU1%2F2023-12-10_20-56-54.png?alt=media&#x26;token=46cc7e51-eb28-4925-9842-50b3d91255bf" alt=""><figcaption></figcaption></figure>

* Dieser Abschnitt bestimmt, welche Daten sichtbar sind und wie sie in Ihrer Tabelle organisiert werden.
* Klicken Sie auf eine Spalte, um auf alle Eigenschaften dieser spezifischen Spalte zuzugreifen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNlSXCo4bj0fPee0FFPtt%2F2023-12-10_20-58-01.png?alt=media&#x26;token=b0626d49-1d47-42be-a092-08baf64024ef" alt=""><figcaption></figcaption></figure>

#### 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 die Verknüpfung von Zelleninhalten mit anderen Datensätzen oder URLs für eine schnelle Navigation.
* **Zellattribute:** Passen Sie die Ausrichtung und die Symbole der Zellen an, um eine intuitivere und optisch ansprechendere Tabelle zu erstellen.
* **Bearbeitbar:** Legen Sie fest, ob eine Spalte direkt in der Tabelle bearbeitet werden kann.
* **Filterbar und durchsuchbar:** Aktivieren Sie spaltenweises Filtern und Suchen 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:** Ermöglichen Sie Benutzern, Daten nach der angegebenen Spalte zu sortieren.
* **Standardaktionen ausblenden:** Option zum Ausblenden vordefinierter Aktionen für ein saubereres Erscheinungsbild.
* **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, übersichtliches Layout zu erreichen.

#### Zeilenaktionen hinzufügen

Hier ist ein geführtes interaktives Tutorial zum Hinzufügen von Zeilenaktionen zur Datentabelle.

{% @arcade/embed flowId="db617gnzKCL8QA22aziq" url="<https://app.arcade.software/share/db617gnzKCL8QA22aziq>" %}

***

## Weitere Konfigurationseinstellungen

### Grundeinstellungen

**Tabellenkopf ausblenden**

* Mit dieser Option können Sie den Tabellenkopf entfernen, um ein saubereres, minimalistisches Erscheinungsbild zu erhalten.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqSHMEKEbljIMwDFR7JQw%2F2023-12-10_21-00-20.png?alt=media&#x26;token=2a5788ad-e9d1-421c-a1a8-159567f6a6d4" alt=""><figcaption></figcaption></figure>

**Checkbox-Spalten ausblenden**

* Aktivieren Sie diese Einstellung, um die Checkbox-Spalten auszublenden, die normalerweise für die Zeilenauswahl in Multiaktionsszenarien verwendet werden.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FBSnbhKLYW291nhWopETy%2F2023-12-10_21-01-29.png?alt=media&#x26;token=e156517b-4d21-4a1c-bbe3-3acc91e8f267" alt=""><figcaption></figcaption></figure>

**Spalte mit Zeilennummer anzeigen**

* Aktivieren Sie dies, um eine Spalte anzuzeigen, die jede Zeile nummeriert, was für eine einfache Datenreferenz nützlich ist.

### 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 und wählen Sie dessen Typ und Größe für mehr visuelle Hervorhebung aus.

**Ist verbunden**

* Diese Einstellung bestimmt, ob der Kopfbereich visuell mit dem Tabellenkörper verbunden wird, was das Gesamtdesign beeinflusst.

**Kopfzeilenaktionen**

* Konfigurieren Sie Aktionen (hinzufügen, löschen oder benutzerdefinierte Funktionen), die direkt über die Tabellenkopfzeile zugänglich sind.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdlHeul0BOJuSLxlwxlrr%2F2023-12-05_08-55-05.png?alt=media&#x26;token=7569d3b6-f011-41fe-85cd-44eba513cced" alt=""><figcaption></figcaption></figure>

### Aktionsschaltflächen in der Kopfzeile

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

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FpflegSFq3ppt9e1bFJpT%2F2023-12-05_09-00-09.png?alt=media&#x26;token=33633798-ff4e-4812-8075-71ba4deafbed" alt=""><figcaption></figcaption></figure>

#### Die Interaktion auf der Schaltfläche konfigurieren

Konfigurieren Sie die Interaktion für den Fall, dass Benutzer die Kopfzeilen-Aktionsschaltfläche im Abschnitt „On Click“ drücken. Um zu verstehen, wie die Interaktion „Navigate“ funktioniert, [klicken Sie hier](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/eigenschaftenbereich/interaktionen/navigieren) für weitere Informationen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FP3G4hQaPYgAYh4qxlE6V%2F2023-12-10_21-05-18.png?alt=media&#x26;token=2617f41f-3045-4cf0-83e2-5ae3455deef4" alt=""><figcaption></figcaption></figure>

#### Tutorial

{% content-ref url="<https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table>" %}
[Create an Export To button on the Data Table](https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table)
{% endcontent-ref %}

### Paginierungsattribute

* Konfigurieren Sie die 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 Website-Performance optimal zu halten. Daher kann die Einrichtung einer Paginierung sinnvoll sein.
{% endhint %}

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTYV8JFlB7hI8aXbiio5z%2F2023-12-05_09-16-35.png?alt=media&#x26;token=fcd3ecdc-5c47-4ae2-8140-947a219bd9b9" alt=""><figcaption></figcaption></figure>

### Suchmaschinenkonfiguration

* **Platzhalter:** Legen Sie einen Platzhaltertext für das Suchfeld fest, um Benutzer darauf hinzuweisen, wonach sie suchen können.
* **Position:** Wählen Sie die Position des Suchfelds innerhalb des Tabellenlayouts für optimale Zugänglichkeit.
* **Standard-Suchwert:** Definieren Sie vorab einen Suchwert, um die Tabellendaten beim Laden zu filtern.

{% hint style="info" %}
Um das Suchfeld anzuzeigen, muss mindestens eine Spalte als „Durchsuchbar“ markiert sein.
{% endhint %}

<div><figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNxORNYAA6GqNWdTGaNvL%2F2023-12-05_08-56-31.png?alt=media&#x26;token=4dcc78d0-e09b-4058-a130-da98a081cbe1" alt=""><figcaption></figcaption></figure> <figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FjwElPRwuNrGJbdSHAdZO%2F2023-12-05_08-57-12.png?alt=media&#x26;token=9145311c-b2b7-49f6-b82c-d1c721f9f77c" alt=""><figcaption><p>Mindestens eine Spalte muss auf „Durchsuchbar“ gesetzt sein, damit das Suchfeld angezeigt wird.</p></figcaption></figure></div>

## Einstellungen

{% tabs %}
{% tab title="🎛️ Allgemein" %}

| Name                                             | Beschreibung                                                                                         |
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| **Tabellenkopf ausblenden**                      | Umschalten, um die Kopfzeile der Tabelle auszublenden                                                |
| **Checkbox-Spalte ausblenden**                   | Entfernt die Spalte, die für Auswahl-Checkboxen in Zeilen verwendet wird                             |
| **Spalte mit Zeilennummer anzeigen**             | Eine Spalte mit der Zeilennummer anzeigen                                                            |
| **Offset der Zeilennummer**                      | Legt die Startnummer für die Zeilennummerierung fest                                                 |
| **Maximale Zeilenauswahl**                       | Begrenzt die maximale Anzahl von Zeilen, die ausgewählt werden können                                |
| **Untere Leiste ausblenden**                     | Blendet die untere Leiste aus, die normalerweise für Aktionen und Informationsanzeige verwendet wird |
| **Anzahl ausgewählter Elemente anzeigen**        | Zeigt die Anzahl der derzeit ausgewählten Elemente an                                                |
| **Schreibgeschützt**                             | Macht die Tabelle nicht interaktiv und verbietet alle Bearbeitungen oder Auswahlen                   |
| **Bearbeitung für alle Spalten zulassen**        | Aktiviert die Bearbeitung für alle Spalten                                                           |
| **Filter für alle Spalten zulassen**             | Aktiviert Filteroptionen für alle Spalten                                                            |
| **Textumbruch für alle Spalten zulassen**        | Erlaubt Textumbruch in allen Spalten                                                                 |
| **Standardaktionen ausblenden**                  | Vordefinierte Aktionen wie Bearbeiten oder Löschen ausblenden                                        |
| **Modus für Spaltenbreiten**                     | Wählen Sie zwischen „fest“ oder „automatisch“ für die Einstellung der Spaltenbreite                  |
| **Max./Min. Spaltenbreite**                      | Legt maximale und minimale Grenzwerte für Spaltenbreiten fest                                        |
| **Maximale Zeilen für Textumbruch**              | Definiert die maximale Anzahl von Zeilen für den Textumbruch in Zellen                               |
| **Spaltenänderung deaktiviert**                  | Deaktiviert die Möglichkeit, Spalten in der Größe zu ändern                                          |
| **Änderungsschritt**                             | Legt den Schrittwert für die Größenänderung von Spalten fest                                         |
| **Sortiert/Standard-Sortrichtung**               | Wählen Sie „asc“ oder „desc“ für die anfängliche Sortierreihenfolge                                  |
| **Nach Wert sortiert anzeigen**                  | Zeigt an, welche Spalte derzeit zum Sortieren verwendet wird                                         |
| **Kopfzeilen-Titel/Untertitel**                  | Legt einen Titel und Untertitel für die Tabellenkopfzeile fest                                       |
| **Name/Größe des Kopfzeilen-Symbols**            | Fügt der Kopfzeile ein Symbol mit anpassbarer Größe hinzu                                            |
| **Kopfzeile ist verbunden**                      | Option zum visuellen Verbinden der Kopfzeile mit dem Tabellenkörper                                  |
| **Kopfzeilenaktionen ausblenden/deaktivieren**   | Steuert die Sichtbarkeit und Interaktivität von Kopfzeilenaktionen                                   |
| **Sichtbare Aktionsschaltflächen der Kopfzeile** | Gibt an, welche Aktionsschaltflächen in der Kopfzeile sichtbar sind                                  |
| **Kopfzeilenaktionen**                           | Benutzerdefinierte Aktionen zur Tabellenkopfzeile hinzufügen                                         |
| {% endtab %}                                     |                                                                                                      |

{% tab title="⏩️ Paginierung und Suche" %}

### Paginierungsattribute

| Name                              | Beschreibung                                                         |
| --------------------------------- | -------------------------------------------------------------------- |
| **Paginierung anzeigen**          | Umschalten der Anzeige von Paginierungssteuerelementen               |
| **Anzahl der Elemente pro Seite** | Legen Sie fest, wie viele Elemente pro Seite angezeigt werden sollen |

### Optionen für den Pillen-Container

* Zeigt einen Container für ausgewählte Elemente an, der häufig mit der Zeilenauswahl verwendet wird.

### Suchmaschinenoptionen

| Name                  | Beschreibung                                      |
| --------------------- | ------------------------------------------------- |
| **Platzhalter**       | Platzhaltertext für das Suchfeld festlegen        |
| **Position**          | Position der Suchleiste definieren                |
| **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“ für das Befüllen der Tabellendaten.                                                 |
| **Spalten**        | Spalten in der Datentabelle definieren und hinzufügen, wobei die Eigenschaften und das Verhalten jeder Spalte angepasst werden. |
| {% endtab %}       |                                                                                                                                 |

{% tab title="🎨 Gestaltung" %}

### Kopfzeile

| Name                                   | Beschreibung                                                                                            |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| **Hintergrundfarbe**                   | Legt die Farbe des Kopfzeilenhintergrunds fest.                                                         |
| **Rahmenfarbe**                        | Definiert die Farbe des Kopfzeilenrahmens.                                                              |
| **Rahmengröße**                        | Passt die Dicke des Rahmens an.                                                                         |
| **Rahmenstil**                         | Wählt den Stil (durchgezogen, gepunktet, gestrichelt usw.) des Rahmens.                                 |
| **Rahmenradius**                       | Rundet die Ecken der Kopfzeile ab.                                                                      |
| **Untere Rahmenfarbe (ist verbunden)** | Gibt die Farbe des unteren Rahmens an, wenn die Kopfzeile visuell mit dem Tabellenkörper verbunden ist. |
| **Untere Rahmengröße (ist verbunden)** | Bestimmt die Dicke des verbundenen unteren Rahmens.                                                     |
| **Untere Rahmenart (ist verbunden)**   | Legt den Stil für den verbundenen unteren Rahmen fest.                                                  |
| **Abstand und Außenabstand**           | Steuert den Abstand innen (Padding) und außen (Margin) der Kopfzeile.                                   |

### Titel der Kopfzeile

| Name              | Beschreibung                                                        |
| ----------------- | ------------------------------------------------------------------- |
| **Farbe**         | Legt die Farbe des Titeltexts fest.                                 |
| **Schriftgröße**  | Passt die Größe des Titeltexts an.                                  |
| **Schriftstärke** | Ändert die Fettung des Titeltexts.                                  |
| **Schriftstil**   | Wendet einen bestimmten Stil (kursiv, normal) auf den Titeltext an. |

### Untertitel der Kopfzeile

| Name              | Beschreibung                             |
| ----------------- | ---------------------------------------- |
| **Farbe**         | Definiert die Farbe des Untertiteltexts. |
| **Schriftgröße**  | Passt die Größe des Untertiteltexts an.  |
| **Schriftstärke** | Steuert die Stärke des Untertiteltexts.  |
| **Schriftstil**   | Legt den Stil des Untertiteltexts fest.  |

### Kopfzeilen-Symbol

| Name                            | Beschreibung                                                        |
| ------------------------------- | ------------------------------------------------------------------- |
| **Hintergrundfarbe**            | Legt die Hintergrundfarbe des Symbols fest.                         |
| **Vordergrundfarbe**            | Ändert die Farbe des Symbols selbst.                                |
| **Vordergrundfarben-Hilfswert** | Passt die Hilfsfarbe für Kontrast oder Hervorhebung an.             |
| **Rahmenradius**                | Rundet die Ecken des Symbols für ein weicheres Erscheinungsbild ab. |

### Pillen-Container

| Name                                  | Beschreibung                                                                          |
| ------------------------------------- | ------------------------------------------------------------------------------------- |
| **Pillen-Hintergrundfarbe/bei Hover** | Legt die Hintergrundfarbe der Pillenelemente fest, mit einer anderen Farbe bei Hover. |
| **Pillen-Textfarbe/bei Hover**        | Ändert die Textfarbe innerhalb der Pille, mit einer anderen Farbe bei Hover.          |
| **Zeilenhöhe der Pille**              | Passt die Zeilenhöhe innerhalb der Pille für die Textausrichtung an.                  |

### Avatar

| Name                             | Beschreibung                                                                                                                                           |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Objekt-Fit des Avatar-Bildes** | Bestimmt, wie das Avatar-Bild in seinen Container eingepasst werden soll. Zu den Optionen gehören „fill“, „contain“, „cover“, „none“ und „scale-down“. |

### Paginierungs-Schaltflächen

| Name                  | Beschreibung                                                                                                        |
| --------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Stileinstellungen** | Passt das Erscheinungsbild der Paginierungsschaltflächen an, einschließlich Farb-, Größen- und Rahmeneigenschaften. |

### Fußzeile

| Name                 | Beschreibung                                   |
| -------------------- | ---------------------------------------------- |
| **Hintergrundfarbe** | Legt die Farbe des Fußzeilenhintergrunds fest. |
| **Rahmenfarbe**      | Definiert die Farbe des Fußzeilenrahmens.      |
| **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 Kontenliste und zugehörige Kontakte

{% @arcade/embed flowId="sxcJn4NliMFN6qTRk5Mi" url="<https://app.arcade.software/share/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 Kontenliste:** Lassen Sie Partner Konten schnell nach Name oder Branche finden, indem sie die integrierten Such- und Filtersteuerungen verwenden.
* **Inline-verknüpfte Datensätze:** Machen Sie Kontonamen anklickbar, damit Partner direkt zu den Detailseiten der Datensätze 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 performant, indem Sie die sichtbaren Datensätze pro Seite begrenzen.

***

#### **Bevor Sie beginnen**

* **Zweispaltiges Seitenlayout:** Stellen Sie sicher, dass Ihre Kontenlisten-Seite im Experience Builder bereits über ein zweispaltiges Layout verfügt, das beide Komponenten aufnehmen kann.

***

#### **So richten Sie es ein**

{% stepper %}
{% step %}

#### **Fügen Sie die erste AX - Datentabelle zu Ihrer Seite hinzu**

* Ziehen Sie eine AX - Datentabelle-Komponente in die linke Spalte Ihrer Kontenlisten-Seite im Experience Builder.
  {% endstep %}

{% step %}

#### **Wählen Sie eine Datenquelle**

* Auswählen **Konten abfragen** als Datenquelle für diese Komponente.
  {% endstep %}

{% step %}

#### **Richten Sie Ihre Datenzuordnungen ein**

* 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 die **API-Name** auf `AccountsTable`.
* Setzen Sie **Maximale Zeilenauswahl** auf `1` sodass jeweils nur ein Konto ausgewählt werden kann.
* Aktivieren Sie die Paginierung und setzen Sie die **Maximale Anzahl von Datensätzen** auf `10`.
  {% endstep %}

{% step %}

#### **Passen Sie die Kopfzeile an**

* Setzen Sie die **Titel der Kopfzeile** auf `Konten`.
* Setzen Sie die **Kopfzeilen-Symbol** auf `standard:account_info`.
  {% endstep %}

{% step %}

#### **Fügen Sie die zweite AX - Datentabelle zu Ihrer Seite hinzu**

* Ziehen Sie eine zweite AX - Datentabelle-Komponente in die rechte Spalte derselben Seite.
  {% endstep %}

{% step %}

#### **Wählen Sie eine Datenquelle für die Kontakttabelle**

* Auswählen **Kontakte abfragen** als Datenquelle.
* Fügen Sie einen Filter hinzu, sodass **AccountId** gleich `{{AccountsTable.selectedRecord.Id}}`ist und die Ergebnisse dieser Tabelle mit dem jeweils ausgewählten Konto verknüpft werden.
  {% endstep %}

{% step %}

#### **Richten Sie Ihre Datenzuordnungen ein**

* Fügen Sie die folgenden Spalten hinzu: Name und Titel.
  {% endstep %}

{% step %}

#### **Konfigurieren Sie die Komponente**

* Setzen Sie die **API-Name** auf `relatedContactsTable`.
  {% endstep %}

{% step %}

#### **Passen Sie die Kopfzeile an**

* Setzen Sie die **Titel der Kopfzeile** auf `Zugehörige Kontakte`.
* Setzen Sie die **Kopfzeilen-Symbol** auf `standard:contact`.
  {% endstep %}

{% step %}

#### **Sehen Sie sich eine Vorschau Ihrer Seite an**

* Klicken Sie im Experience Builder auf Vorschau, wählen Sie eine Kontenzeile aus und bestätigen Sie, dass sich die Tabelle „Zugehörige Kontakte“ dynamisch aktualisiert, um den ausgewählten Datensatz widerzuspiegeln.
  {% endstep %}
  {% endstepper %}

***

#### **Links**

{% content-ref url="../tutorials/reaktive-komponenten/verknupfte-datentabellen" %}
[verknupfte-datentabellen](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/tutorials/reaktive-komponenten/verknupfte-datentabellen)
{% endcontent-ref %}

***

### Beispiel 2: Zugehörige Opportunities auf einer Kontoseite

{% @arcade/embed flowId="tZa89LmaWt8n5CoQhwB8" url="<https://app.arcade.software/share/tZa89LmaWt8n5CoQhwB8>" %}

Geben Sie Vertriebsmitarbeitern 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**

* **Umfassendere Customer-360-Ansicht:** Stellen Sie wichtige Opportunity-Daten direkt auf der Kontoseite dar, damit Vertriebsmitarbeiter das vollständige Bild an einem Ort erhalten.
* **Vollständig ausgestattete Datensatzseiten:** Erstellen Sie dichte, informationsreiche Seiten, die das Wechseln zwischen Registerkarten oder Objekten überflüssig machen, um eine Pipeline zu bearbeiten.

***

#### **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 - Datentabelle zu Ihrer Kontoseite hinzu**

* Ziehen Sie eine AX - Datentabelle-Komponente auf Ihre Kontodatensatzseite im Experience Builder.
  {% endstep %}

{% step %}

#### **Wählen Sie eine Datenquelle**

* Auswählen **Opportunities abfragen** als Datenquelle für diese Komponente.
  {% endstep %}

{% step %}

#### **Richten Sie Ihre Datenzuordnungen ein**

* 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 die **API-Name** auf `ZugehörigeOpportunities`.
* Fügen Sie einen Filter hinzu, sodass **AccountId** gleich `{!Item.id}`und die Ergebnisse auf das aktuell angezeigte Konto beschränkt werden.
  {% endstep %}

{% step %}

#### **Passen Sie die Kopfzeile an**

* Setzen Sie die **Titel der Kopfzeile** auf `Opportunities`.
* Setzen Sie die **Kopfzeilenstil** auf `Überschrift 2`.
* Setzen Sie die **Kopfzeilen-Symbol** auf `standard:opportunity`.
  {% endstep %}

{% step %}

#### **Sehen Sie sich eine Vorschau Ihrer Seite an**

* Klicken Sie im Experience Builder auf Vorschau und navigieren Sie zu einem Kontodatensatz, um zu bestätigen, dass nur die mit diesem Konto verknüpften Opportunities in der Tabelle angezeigt werden.
  {% endstep %}
  {% endstepper %}