# Reaktive Komponenten

## Überblick

Reaktive Komponenten aktualisieren sich automatisch, wenn Benutzer mit Ihrer Experience-Site interagieren. Wenn ein Benutzer in einer Komponente etwas anklickt oder auswählt, aktualisieren sich andere verbundene Komponenten sofort, um verwandte Informationen anzuzeigen — und schaffen so ein nahtloses, interaktives Erlebnis.

{% hint style="success" %}

## Schlüsselkomponenten

Reaktive Komponenten sind:

* [AX - Datentabelle](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-datentabelle)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-datentabelle)[Karte](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-karte-1)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-datentabelle)[Liste](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-liste)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-datentabelle)[Zeitachse](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-zeitleiste)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-datentabelle)[Textblock](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-textblock)
  {% endhint %}

### **Wie das hilft**

Reaktive Komponenten ermöglichen es Ihnen, interaktive Seiten zu erstellen, auf denen Benutzer Daten dynamisch erkunden können. Zum Beispiel kann das Anklicken eines Datensatzes in AX - Datentabelle automatisch eine AX - Karte aktualisieren, um den Standort dieses Datensatzes anzuzeigen, oder eine AX - Zeitachse filtern, um verwandte Aktivitäten zu zeigen — alles ohne Seitenaktualisierungen oder Navigation.

Dadurch entstehen ansprechendere Portal-Erlebnisse, bei denen Informationen sofort basierend auf dem, was Benutzer ansehen oder auswählen, aktualisiert werden

***

## Praktische Anwendungsfälle

### Dynamische Kontodetails mit Karten

Konfigurieren Sie eine Avonni-Karte, um Kontostandorte anzuzeigen. Wenn ein Benutzer einen Standort auswählt, erscheinen verwandte Kontodetails (z. B. Name, Beschreibung, Branche) automatisch in einem Avonni-Textblock und bieten eine intuitive Möglichkeit, Daten zu erkunden.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FVjhaFMV1pHEy9rtf7kQw%2FAvonni%20Components%204.2%20Jan%2031.webp?alt=media&#x26;token=d1a35dea-24dc-4323-8297-f6d77aa535b0" alt=""><figcaption></figcaption></figure>

### Vernetzte Datentabellen

Richten Sie eine Avonni-Datentabelle ein, um Konten aufzulisten. Die Auswahl eines Kontos veranlasst eine zweite Datentabelle, sich zu aktualisieren und zugehörige Kontakte anzuzeigen, sodass eine nahtlose Navigation durch große Datensätze möglich ist.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FVvAnrlEXAdP1tcoOxM07%2F2024-02-04_16-43-22%20(1).gif?alt=media&#x26;token=c99e3f73-a58a-4378-bd93-00fdad6152a0" alt=""><figcaption></figcaption></figure>

***

## Warum reaktive Komponenten wichtig sind

Reaktive Komponenten ermöglichen es Ihrer Experience-Site, auf Elemente zu reagieren und zwischen ihnen zu kommunizieren, wodurch sie dynamischer und benutzerfreundlicher wird. Diese Interaktivität hilft Besuchern, Informationen effizient zu entdecken und darauf zuzugreifen, was zu einem ansprechenderen und produktiveren Erlebnis führt.&#x20;

***

## **Einrichten Ihrer reaktiven Avonni-Komponenten**

Integrieren Sie diese reaktiven Komponenten mit einem unkomplizierten Einrichtungsprozess in Ihre Experience-Site, um die Interaktivität zu verbessern:

### **Was macht eine Komponente "reaktiv"?**

Eine Komponente wird reaktiv, indem Sie ihre Daten mit anderen Komponenten verknüpfen und so automatische Aktualisierungen basierend auf Benutzeraktionen ermöglichen. Dies wird mit zwei einfachen Schritten erreicht

### Schritte zur Aktivierung der Reaktivität

{% stepper %}
{% step %}

#### Benennen Sie Ihre Datenkomponenten (componentApiName)

* Weisen Sie jeder Komponente im Eigenschaftenfenster einen eindeutigen Spitznamen zu. Benennen Sie beispielsweise eine Datentabelle, die Konten auflistet, als accountsDatatable.
* *Warum das?* Der Spitzname identifiziert die Komponente für die Reaktivität und ermöglicht anderen Komponenten, auf ihre Daten zu verweisen
  {% endstep %}

{% step %}

#### Sagen Sie anderen Komponenten, wie sie reagieren sollen

* Geben Sie an, welche Komponenten sich aktualisieren sollen, wenn ein Benutzer mit einer anderen interagiert. Verwenden Sie die folgende Syntax in den Eigenschaften der Zielkomponente:text`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **Aufschlüsselung:**
  * `componentApiName`: Der von Ihnen vergebene Spitzname (z. B. `accountsDatatable`).
  * `selectedRecord`: Die Zeile oder das Element, das der Benutzer auswählt.
  * `componentFieldApiName`: Das spezifische Feld, das angezeigt werden soll (z. B. `Name`, `Industry`).
* *Warum das?* Diese Syntax verknüpft die ausgewählten Daten (z. B. die `Name`) mit einer anderen Komponente und löst eine automatische Aktualisierung aus
  {% endstep %}
  {% endstepper %}

***

## Fehlerbehebung bei häufigen Problemen

<details>

<summary><strong>Komponenten aktualisieren sich nicht</strong></summary>

Stellen Sie sicher, dass jede Komponente einen eindeutigen `componentApiName` hat und dass die Syntax (`{{componentApiName.selectedRecord.componentFieldApiName}}`) korrekt in den Eigenschaften der Zielkomponente eingegeben ist.

</details>

<details>

<summary><strong>Keine Daten angezeigt</strong></summary>

Überprüfen Sie, ob die Quellkomponente (z. B. `accountsDatatable`) Daten hat und dass der `componentFieldApiName` mit einem verfügbaren Feld übereinstimmt (z. B. `Name`).

</details>

<details>

<summary><strong>Reaktivitätsverzögerung</strong></summary>

Prüfen Sie auf komplexe Datensätze; vereinfachen Sie Abfragen oder reduzieren Sie die Anzahl reaktiver Verknüpfungen, um die Leistung zu verbessern.

</details>

<details>

<summary><strong>Wenn Probleme weiterhin bestehen</strong></summary>

Kontaktieren Sie unser Support-Team unter <support@avonni.com> zur Unterstützung.

</details>

***

## **Geführte Beispiele**

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="../tutorials/reaktive-komponenten/datentabelle-und-karte-fur-dynamische-standorte-verknupfen"><strong>Verknüpfen von Datentabelle und Karte für dynamische Standorte</strong></a></td><td>Erfahren Sie, wie Sie eine Avonni-Datentabelle und eine Karte in Experience Site verbinden, um Standorte dynamisch basierend auf vom Benutzer ausgewählten Konten anzuzeigen.</td><td><a href="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FITT78gjzqT0HViqyTa1s%2FCSV%20Parser%20from%20Figma.png?alt=media&#x26;token=c39267bf-66c3-4ae6-9384-ef5412b6e9a7">CSV Parser from Figma.png</a></td></tr><tr><td><a href="../tutorials/reaktive-komponenten/verknupfte-datentabellen"><strong>Verknüpfte Datentabellen</strong></a></td><td>Erfahren Sie, wie Sie eine Avonni-Datentabelle für Konten mit einer Kontakte-Tabelle verknüpfen, sodass die Kontakte-Tabelle dynamisch aktualisiert wird, um nur Kontakte für das ausgewählte Konto anzuzeigen</td><td><a href="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZK2FJjsLqEUYMVFZyUjV%2FAvonni%20Component%20Builder%20Illustrations%20(4).png?alt=media&#x26;token=c3d6ff5a-5b6e-4294-ac66-37424de04ffc">Avonni Component Builder Illustrations (4).png</a></td></tr></tbody></table>