> 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/linking-data-table-and-map-for-dynamic-locations.md).

# Verknüpfen von Datentabelle und Karte für dynamische Standorte

## Übersicht

Dieser Leitfaden erklärt, wie Sie eine Avonni Data Table und eine Avonni Map-Komponente in Ihrer Experience-Cloud-Site verbinden, um eine dynamische, interaktive Darstellung zu erstellen. Durch die Verknüpfung der beiden Komponenten aktualisiert die Auswahl eines Kontos in der Data Table die Map, um zugehörige Standorte anzuzeigen und so die Benutzerinteraktion zu verbessern.

### Vorteile

Durch die Verknüpfung dieser Komponenten kann Ihre Site in Echtzeit auf Benutzerauswahlen reagieren und bietet so eine fokussierte und intuitive Möglichkeit, Kontostandorte ohne manuelle Aktualisierungen zu erkunden.

<figure><img src="/files/21804fbcd9f6bbb64730f47f5c5a5133cfe688f8" alt=""><figcaption></figcaption></figure>

## Die Integration einrichten

### **Die Data Table konfigurieren**

{% stepper %}
{% step %}

#### Die Data-Table-Komponente hinzufügen

* Platzieren Sie eine Avonni Data Table-Komponente auf Ihrer Experience-Cloud-Seite, um Kontoinformationen anzuzeigen.
* *Warum das?* Die Data Table dient als Ausgangspunkt und zeigt Kontodetails zur Auswahl durch den Benutzer an
  {% endstep %}

{% step %}

#### Benennen Sie die Data Table

* Legen Sie im Eigenschaftenbereich der Data Table das **API-Namen** auf `accountsDatatable`.
* *Warum das?* Der API-Name dient als eindeutige Kennung, damit andere Komponenten (wie die Map) ihn erkennen und darauf reagieren können.

<figure><img src="/files/03553f4b6e40de0f5b0defe2c76296bf9d657902" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Auf eine Auswahl begrenzen

* Suchen Sie in den Eigenschaften der Data Table die **Maximale Zeilenauswahl** Einstellung und setzen Sie sie auf `1.`
* *Warum das?* Die Begrenzung auf eine Zeile stellt sicher, dass die Map Standorte für ein einzelnes Konto anzeigt, wodurch die Erfahrung klar und fokussiert bleibt.

<figure><img src="/files/9686d12ceb68b7939661d49c5ee29b8a9cd08c28" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Die Avonni Map konfigurieren

{% stepper %}
{% step %}

#### Die Map-Komponente hinzufügen

* Platzieren Sie eine Avonni Map-Komponente auf derselben Seite (z. B. benennen Sie sie `relatedLocationsMap`).
* *Warum das?* Die Map zeigt Standortdaten basierend auf dem ausgewählten Konto an.
  {% endstep %}

{% step %}

#### Die Datenquelle festlegen

* Gehen Sie im Eigenschaftenbereich der Map zum **Datenquelle** Bereich.
* Wählen Sie **Datenquelle abfragen** und wählen Sie das **Account** Objekt (oder das Objekt mit Standortdaten) aus.
* *Warum das?* Die Abfrage ruft Standortdaten dynamisch aus Salesforce ab
  {% endstep %}

{% step %}

#### Die Ergebnisse filtern

* Fügen Sie in den Abfrageeinstellungen eine Filterbedingung hinzu:
* Warum das? Dieser Filter stellt sicher, dass die Map nur Standorte anzeigt, die mit dem in der Data Table ausgewählten Konto verknüpft sind, indem die ID des ausgewählten Datensatzes verwendet wird

<figure><img src="/files/885929eba9d46fc8f523d9afcbc6b08711e9c1e3" alt="" width="563"><figcaption></figcaption></figure>

| Feld          | Operator | Wert                                      |
| ------------- | -------- | ----------------------------------------- |
| Konto-ID      | Gleich   | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} |          |                                           |

{% step %}

#### Die Felder zuordnen

* Konfigurieren Sie die Map so, dass Standortmarker angezeigt werden, indem Sie Felder zuordnen (z. B. setzen Sie `Breitengrad` und `Längengrad` Felder aus dem Account-Objekt oder einem zugehörigen Objekt).
* *Warum das?* Eine korrekte Feldzuordnung zeigt der Map, wo Marker basierend auf den abgefragten Daten platziert werden sollen.
  {% endstep %}
  {% endstepper %}

## Ergebnis

Wenn ein Benutzer ein Konto in der Data Table auswählt, aktualisiert sich die Map automatisch und zeigt nur die mit diesem Konto verknüpften Standorte an. Dadurch entsteht ein nahtloses, interaktives Erlebnis, mit dem Besucher Daten effizient erkunden können.

## Häufige Probleme beheben

* **Map wird nicht aktualisiert:** Stellen Sie sicher, dass der API-Name accountsDatatable exakt übereinstimmt und dass die maximale Zeilenauswahl auf 1 gesetzt ist. Überprüfen Sie die Filtersyntax ({{accountsDatatable.selectedRecord.Id}}).
* **Keine Standorte angezeigt:** Stellen Sie sicher, dass das Account-Objekt oder das zugehörige Objekt Breiten- und Längengradfelder hat, und bestätigen Sie, dass die Abfrage Daten zurückgibt.
* **Leistungsprobleme:** Vereinfachen Sie die Abfrage oder reduzieren Sie die Anzahl der Datensätze, wenn die Map langsam lädt.
* **Wenn die Probleme weiterhin bestehen:** Kontaktieren Sie unser Support-Team unter <support@avonni.com> zur Unterstützung


---

# 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/linking-data-table-and-map-for-dynamic-locations.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.