> 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/erste-schritte/reactive-components.md).

# Reaktive Komponenten

## Übersicht

Reaktive Komponenten aktualisieren sich automatisch, wenn Benutzer mit Ihrer Experience Site interagieren. Wenn ein Benutzer in einer Komponente auf etwas klickt oder etwas auswählt, werden andere verbundene Komponenten sofort aktualisiert, um verwandte Informationen anzuzeigen – so entsteht ein nahtloses, interaktives Erlebnis.

{% hint style="success" %}

## Wichtige Komponenten

Reaktive Komponenten sind:

* [AX - Datentabelle](/experience-cloud/experience-cloud-de/experience-components/ax-data-table.md)
* [AX - ](/experience-cloud/experience-cloud-de/experience-components/ax-data-table.md)[Karte](/experience-cloud/experience-cloud-de/experience-components/ax-map.md)
* [AX - ](/experience-cloud/experience-cloud-de/experience-components/ax-data-table.md)[Liste](/experience-cloud/experience-cloud-de/experience-components/ax-list.md)
* [AX - ](/experience-cloud/experience-cloud-de/experience-components/ax-data-table.md)[Zeitachse](/experience-cloud/experience-cloud-de/experience-components/ax-timeline.md)
* [AX - ](/experience-cloud/experience-cloud-de/experience-components/ax-data-table.md)[Textblock](/experience-cloud/experience-cloud-de/experience-components/ax-text-block.md)
  {% endhint %}

### **So hilft das**

Mit reaktiven Komponenten können Sie interaktive Seiten erstellen, auf denen Benutzer Daten dynamisch erkunden können. Wenn beispielsweise ein Datensatz in AX - Datentabelle angeklickt wird, kann dies automatisch ein AX - Karte aktualisieren, um den Standort dieses Datensatzes anzuzeigen, oder eine AX - Zeitleiste filtern, um zugehörige Aktivitäten anzuzeigen – alles ohne Seitenaktualisierung oder Navigation.

So entstehen ansprechendere Portal-Erlebnisse, bei denen sich Informationen sofort basierend darauf aktualisieren, was Benutzer ansehen oder auswählen

***

## Praktische Anwendungsfälle

### Dynamische Kontodetails mit Karten

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

<figure><img src="/files/c7613dd8346702e5e27e1c1b644e7f541ff2a460" alt=""><figcaption></figcaption></figure>

### Verknüpfte Datentabellen

Richten Sie eine Avonni-Datentabelle ein, um Konten aufzulisten. Die Auswahl eines Kontos löst ein Update einer zweiten Datentabelle aus, die zugehörige Kontakte anzeigt, und ermöglicht so eine nahtlose Navigation durch große Datensätze.

<figure><img src="/files/d2702d15fe4f3aff75e28d0d5011602f595b8da1" alt=""><figcaption></figcaption></figure>

***

## Warum reaktive Komponenten wichtig sind

Reaktive Komponenten ermöglichen es Ihrer Experience Site, auf Elemente zu reagieren und mit 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.

***

## **So richten Sie Ihre reaktiven Avonni-Komponenten ein**

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

### **Was macht eine Komponente „reaktiv“?**

Eine Komponente wird reaktiv, indem ihre Daten mit anderen Komponenten verknüpft werden, sodass automatische Aktualisierungen auf Benutzeraktionen basieren. Dies wird mit zwei einfachen Schritten erreicht

### Schritte zum Aktivieren der Reaktivität

{% stepper %}
{% step %}

#### Benennen Sie Ihre Datenkomponenten (componentApiName)

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

{% step %}

#### Teilen Sie anderen Komponenten mit, wie sie reagieren sollen

* Geben Sie an, welche Komponenten aktualisiert werden 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`, `Branche`).
* *Warum das?* Diese Syntax verknüpft die ausgewählten Daten (z. B. das `Name`) mit einer anderen Komponente und löst so ein automatisches Update aus
  {% endstep %}
  {% endstepper %}

***

## Häufige Probleme beheben

<details>

<summary><strong>Komponenten werden nicht aktualisiert</strong></summary>

Stellen Sie sicher, dass jede Komponente eine eindeutige `componentApiName` 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 enthält und dass die `componentFieldApiName` mit einem verfügbaren Feld übereinstimmt (z. B., `Name`).

</details>

<details>

<summary><strong>Verzögerung der Reaktivität</strong></summary>

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

</details>

<details>

<summary><strong>Falls die Probleme weiterhin bestehen</strong></summary>

Kontaktieren Sie unser Support-Team unter <support@avonni.com> für 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="/pages/724607fd5c6cff76a623d426d8c6e1511c2c73d8"><strong>Verknüpfen von Datentabelle und Karte für dynamische Standorte</strong></a></td><td>Lernen Sie, eine Avonni-Datentabelle und -Karte in der Experience Site zu verbinden, um Standorte dynamisch basierend auf vom Benutzer ausgewählten Konten anzuzeigen.</td><td><a href="/files/70a4ce8fd7364ab5c19d761aae64ff40502d91b2">/files/70a4ce8fd7364ab5c19d761aae64ff40502d91b2</a></td></tr><tr><td><a href="/pages/4790f7f569b297634520bb7d90c8c2dcb7588dab"><strong>Verknüpfte Datentabellen</strong></a></td><td>Erfahren Sie, wie Sie eine Avonni-Datentabelle für Konten mit einer Kontakttabelle verknüpfen und die Kontakttabelle dynamisch aktualisieren, um nur Kontakte für das ausgewählte Konto anzuzeigen</td><td><a href="/files/df0fb458f7cd38bcc0a98ff8f75c78067c54faf3">/files/df0fb458f7cd38bcc0a98ff8f75c78067c54faf3</a></td></tr></tbody></table>


---

# 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/erste-schritte/reactive-components.md?ask=<question>
```

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.