# Datentabelle und Karte für dynamische Standorte verknüpfen

## Überblick

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 Anzeige zu erstellen. Durch Verknüpfung der beiden Komponenten aktualisiert die Auswahl eines Accounts in der Data Table die Karte, um zugehörige Standorte anzuzeigen und die Benutzerinteraktion zu verbessern.

### Vorteile

Die Verknüpfung dieser Komponenten ermöglicht es Ihrer Site, in Echtzeit auf Benutzerauswahlen zu reagieren und bietet eine fokussierte und intuitive Möglichkeit, Account-Standorte ohne manuelle Aktualisierungen zu erkunden.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FoWSe2ZTSlhp5XtnoOwsw%2F2024-05-28_20-19-59%20(1).gif?alt=media&#x26;token=82d53307-a26c-4761-b958-6dd981dc28b0" alt=""><figcaption></figcaption></figure>

## Einrichtung der Integration

### **Konfiguration der Data Table**

{% stepper %}
{% step %}

#### Fügen Sie die Data Table-Komponente hinzu

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

{% step %}

#### Benennen Sie die Data Table

* Legen Sie im Eigenschaftenbereich der Data Table den **API-Namen** auf `accountsDatatable`.
* *Warum das?* Der API-Name fungiert als eindeutiger Bezeichner, der anderen Komponenten (wie der Karte) erlaubt, ihn zu erkennen und darauf zu reagieren.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5aMWFzJhbAu3rGL7UNKp%2F2024-05-28_20-13-44.png?alt=media&#x26;token=36ef5275-afe2-4788-a1ea-5e40166fe9c6" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Auf eine Auswahl beschränken

* Suchen Sie in den Eigenschaften der Data Table die Einstellung **Max Row Selection** und setzen Sie sie auf `1.`
* *Warum das?* Die Beschränkung auf eine Zeile stellt sicher, dass die Karte Standorte für einen einzelnen Account anzeigt und die Nutzererfahrung klar und fokussiert bleibt.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FiVmuxP4MrEHxzbhZAfYZ%2F2024-05-28_20-13-442.png?alt=media&#x26;token=86b2f772-adc0-4574-91c3-3103e4a7db1c" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Konfiguration der Avonni Map

{% stepper %}
{% step %}

#### Fügen Sie die Map-Komponente hinzu

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

{% step %}

#### Datenquelle festlegen

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

{% step %}

#### Ergebnisse filtern

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

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F7Gn1wW4kpmaBd7EMNFKm%2F2024-05-28_20-15-50.png?alt=media&#x26;token=13e2ec7c-f7b5-421b-b865-e8f00358ae0c" alt="" width="563"><figcaption></figcaption></figure>

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

{% step %}

#### Felder zuordnen

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

## Ergebnis

Wenn ein Benutzer in der Data Table einen Account auswählt, aktualisiert sich die Karte automatisch, um nur die mit diesem Account verknüpften Standorte anzuzeigen. Dies schafft eine nahtlose, interaktive Erfahrung, die Besuchern ermöglicht, Daten effizient zu erkunden.

## Fehlerbehebung bei häufigen Problemen

* **Karte aktualisiert sich nicht:** Stellen Sie sicher, dass der API-Name accountsDatatable genau übereinstimmt und dass Max Row Selection auf 1 gesetzt ist. Überprüfen Sie die Filter-Syntax ({{accountsDatatable.selectedRecord.Id}}).
* **Keine Standorte angezeigt:** Überprüfen Sie, ob das Account-Objekt oder das verwandte Objekt Breitengrad- und Längengrad-Felder 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 Karte langsam lädt.
* **Wenn Probleme weiterhin bestehen:** Kontaktieren Sie unser Support-Team unter <support@avonni.com> zur Unterstützung