> 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/anleitungen/reactive-components/guide-to-implementing.md).

# Leitfaden zur Implementierung

## **Leitfaden zur Implementierung von Reaktivität in Avonni-Komponenten**

Verwandeln Sie Ihre Avonni-Komponenten mit unserem Leitfaden zur Einrichtung reaktiver Datenkomponenten in ein dynamisches und interaktives Erlebnis. Dieses Tutorial führt Sie durch den Prozess und stellt sicher, dass Ihre Komponenten Daten anzeigen und in Echtzeit auf Benutzerinteraktionen reagieren.

{% hint style="info" %}
Reaktive Data-Experience-Komponenten sind: die [Datentabelle](/experience-cloud/experience-cloud-de/experience-components/ax-data-table.md), [Liste](/experience-cloud/experience-cloud-de/experience-components/ax-list.md), [Karte](/experience-cloud/experience-cloud-de/experience-components/ax-map.md), [Zeitachse](/experience-cloud/experience-cloud-de/experience-components/ax-timeline.md) und der Avonni-Textblock.
{% endhint %}

### Schritt 1: Zuordnung von API-Namen zu Ihren Datenkomponenten

Beginnen Sie damit, jeder Ihrer Datenkomponenten eine eindeutige Kennung zu geben, die als API-Name bezeichnet wird. Dieser Name dient als Referenzpunkt und ermöglicht es verschiedenen Teilen Ihrer Seite, miteinander zu kommunizieren.

* **Zum Beispiel**:
  * Wenn Sie mit einer Datentabellen-Komponente arbeiten, können Sie sie benennen `accountsDatatable`.

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

### Schritt 2: Konfigurieren reaktiver Ausdrücke in Zielkomponenten

Als Nächstes entscheiden Sie, wo die interaktiven Daten angezeigt werden sollen. Das kann in einem Textblock, einer anderen Datentabelle oder jeder beliebigen Komponente sein, die Daten anzeigt. Hier verwenden Sie reaktive Ausdrücke, um der Komponente mitzuteilen, welche Daten angezeigt werden sollen und wann im Filtermenü.

* **Das Format des reaktiven Ausdrucks**: Verwenden Sie das Format `{{componentApiName.selectedRecord.componentFieldApiName}}` um Ihre Komponenten miteinander zu verknüpfen.
  * `componentApiName`Dies ist der Ort, an dem Sie den API-Namen Ihrer Datenkomponente eintragen (wie den `accountsDatatable` den Sie oben benannt haben).
  * `componentFieldApiName`Dies bezieht sich auf das spezifische Feld aus dem Datensatz, das Sie anzeigen möchten (z. B. `Name` oder `Branche`).
* **Zum Beispiel**:
  * Um das Feld 'Name' eines Datensatzes anzuzeigen, den Sie aus Ihrer `accountsDatatable`, verwenden Sie `{{accountsDatatable.selectedRecord.Name}}`.
  * Um das Feld 'Branche' aus derselben Auswahl anzuzeigen, verwenden Sie `{{accountsDatatable.selectedRecord.Industry}}`.

### Praktische Anwendungsfälle:

1. **Interaktive Karten zur Visualisierung von Accounts**:
   * Angenommen, Sie haben eine interaktive Karte mit dem Tag `accountMap`. Wenn ein Benutzer einen Standort auswählt, können Sie den Kontonamen in einem Textblock anzeigen, indem Sie einen Ausdruck wie `{{accountMap.selectedRecord.Name}}`. Dadurch wird sichergestellt, dass der Name des ausgewählten Accounts dynamisch entsprechend der Benutzerinteraktion angezeigt wird.
2. **Synchronisierte Datentabellen für Accounts und Kontakte**:
   * Stellen Sie sich vor, Sie haben eine Tabelle, die Accounts anzeigt (`accountsDatatable`) und eine weitere, die zugehörige Kontakte anzeigt (`contactsDatatable`).
   * Sie können die `contactsDatatable` so konfigurieren, dass sie auf Auswahlen in der `accountsDatatable`reagiert. Um beispielsweise den Kontaktnamen anzuzeigen, der mit dem ausgewählten Account verknüpft ist, verwenden Sie `{{accountsTable.selectedRecord.Id}}`.

<figure><img src="/files/472b1f51b1532dd42e22a9908911e3e153c82aac" alt=""><figcaption></figcaption></figure>

Diese Schritte verwandeln Ihre statischen Komponenten in ein reichhaltiges, reaktionsschnelles Erlebnis und machen Ihre Webanwendungen intuitiver und benutzerfreundlicher. Die Stärke reaktiver Daten liegt in ihrer Fähigkeit, jede Interaktion auf Ihrer Website verbunden und zielgerichtet erscheinen zu lassen.

Viel Spaß beim Entwickeln!


---

# 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/anleitungen/reactive-components/guide-to-implementing.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.