> 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-it/tutorial/reactive-components/linking-data-table-and-map-for-dynamic-locations.md).
# Collegare Tabella dati e Mappa per posizioni dinamiche
## Panoramica
Questa guida spiega come connettere un componente Avonni Data Table e un componente Avonni Map nel tuo sito Experience Cloud per creare una visualizzazione dinamica e interattiva. Collegando i due componenti, la selezione di un account nella Data Table aggiorna la Map per mostrare le posizioni correlate, migliorando il coinvolgimento degli utenti.
### Vantaggi
Collegando questi componenti, il tuo sito può reagire alle selezioni dell'utente in tempo reale, offrendo un modo mirato e intuitivo per esplorare le posizioni degli account senza aggiornamenti manuali.
## Configurazione dell'integrazione
### **Configurazione della Data Table**
{% stepper %}
{% step %}
#### Aggiungi il componente Data Table
* Inserisci un componente Avonni Data Table nella tua pagina Experience Cloud per visualizzare le informazioni dell'account.
* *Perché questo?* La Data Table funge da punto di partenza, mostrando i dettagli dell'account per la selezione da parte dell'utente
{% endstep %}
{% step %}
#### Assegna un nome alla Data Table
* Nel pannello Proprietà della Data Table, imposta il **Nome API** su `accountsDatatable`.
* *Perché questo?* Il nome API funge da identificatore univoco, consentendo agli altri componenti (come la Map) di riconoscerlo e reagire ad esso.
{% endstep %}
{% step %}
#### Limita a una sola selezione
* Nelle proprietà della Data Table, trova l' **Selezione massima righe** impostazione e impostala su `1.`
* *Perché questo?* Limitare a una sola riga garantisce che la Map mostri le posizioni di un singolo account, mantenendo l'esperienza chiara e focalizzata.
{% endstep %}
{% endstepper %}
### Configurazione della Avonni Map
{% stepper %}
{% step %}
#### Aggiungi il componente Map
* Inserisci un componente Avonni Map nella stessa pagina (ad esempio, chiamalo `relatedLocationsMap`).
* *Perché questo?* La Map mostrerà i dati delle posizioni in base all'account selezionato.
{% endstep %}
{% step %}
#### Imposta l'origine dati
* Nel pannello Proprietà della Map, vai alla **Origine dati** sezione.
* Seleziona **Origine dati della query** e scegli l' **Account** oggetto (o l'oggetto con i dati di posizione).
* *Perché questo?* La query recupera dinamicamente i dati di posizione da Salesforce
{% endstep %}
{% step %}
#### Filtra i risultati
* Aggiungi una condizione di filtro nelle impostazioni della query:
* Perché? Questo filtro garantisce che la Map mostri solo le posizioni collegate all'account selezionato nella Data Table, utilizzando l'ID del record selezionato
| Campo | Operatore | Valore |
| ------------- | --------- | ----------------------------------------- |
| ID account | Uguale a | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} | | |
{% step %}
#### Mappa i campi
* Configura la Map per visualizzare i marcatori di posizione mappando i campi (ad esempio, imposta `Latitudine` e `Longitudine` i campi dell'oggetto Account o di un oggetto correlato).
* *Perché questo?* Una corretta mappatura dei campi indica alla Map dove posizionare i marcatori in base ai dati interrogati.
{% endstep %}
{% endstepper %}
## Risultato
Quando un utente seleziona un account nella Data Table, la Map si aggiorna automaticamente per mostrare solo le posizioni associate a quell'account. Questo crea un'esperienza fluida e interattiva, consentendo ai visitatori di esplorare i dati in modo efficiente.
## Risoluzione dei problemi comuni
* **La Map non si aggiorna:** Assicurati che il nome API accountsDatatable corrisponda esattamente e che Max Row Selection sia impostato su 1. Controlla la sintassi del filtro ({{accountsDatatable.selectedRecord.Id}}).
* **Nessuna posizione visualizzata:** Verifica che l'oggetto Account o l'oggetto correlato abbia campi di latitudine e longitudine, e conferma che la query restituisca dati.
* **Problemi di prestazioni:** Semplifica la query o riduci il numero di record se la Map si carica lentamente.
* **Se i problemi persistono:** Contatta il nostro team di supporto all'indirizzo per assistenza
---
# 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-it/tutorial/reactive-components/linking-data-table-and-map-for-dynamic-locations.md?ask=&goal=
```
`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.