> 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 werden automatisch aktualisiert, wenn Benutzer mit Ihrer Experience Site interagieren. Wenn ein Benutzer in einer Komponente etwas anklickt oder auswählt, werden andere verbundene Komponenten sofort aktualisiert, um zugehörige Informationen anzuzeigen – und so ein nahtloses, interaktives Erlebnis zu schaffen.

{% 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)[Zeitleiste](/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 %}

### **Wie das hilft**

Reaktive Komponenten ermöglichen es Ihnen, interaktive Seiten zu erstellen, auf denen Benutzer Daten dynamisch erkunden können. Wenn beispielsweise ein Datensatz in AX - Data Table angeklickt wird, kann ein AX - Map automatisch aktualisiert werden, um den Standort dieses Datensatzes anzuzeigen, oder ein AX - Timeline-Filter gesetzt werden, um zugehörige Aktivitäten anzuzeigen – alles ohne Seitenaktualisierungen oder Navigation.

Dies sorgt für 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 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. Wenn ein Konto ausgewählt wird, wird eine zweite Datentabelle aktualisiert und zeigt zugehörige Kontakte an, was eine nahtlose Navigation durch große Datenmengen ermöglicht.

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

***

## **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 ihre Daten mit anderen Komponenten verknüpft werden, sodass automatische Aktualisierungen auf Basis von Benutzeraktionen möglich sind. 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, die Konten auflistet, 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 in den Eigenschaften der Zielkomponente die folgende Syntax:text`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **Aufschlüsselung:**
  * `componentApiName`: Der von Ihnen zugewiesene Spitzname (z. B., `accountsDatatable`).
  * `selectedRecord`: Die Zeile oder das Element, das der Benutzer auswählt.
  * `componentFieldApiName`: Das anzuzeigende spezifische Feld (z. B., `Name`, `Industry`).
* *Warum das?* Diese Syntax verknüpft die ausgewählten Daten (z. B. die eines Kontos `Name`) mit einer anderen Komponente und löst eine automatische Aktualisierung aus
  {% endstep %}
  {% endstepper %}

***

## Fehlerbehebung bei häufigen Problemen

<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 die Eigenschaften der Zielkomponente eingegeben wurde.

</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 bei der Reaktivität</strong></summary>

Prü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>Wenn die Probleme weiterhin bestehen</strong></summary>

Wenden Sie sich an 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>Datentabelle und Karte für dynamische Standorte verknüpfen</strong></a></td><td>Lernen Sie, wie Sie eine Avonni-Datentabelle und eine Karte in der Experience Site 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>Entdecken 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.