# Collegamento tra tabella dati e mappa per posizioni dinamiche

## Panoramica

Questa guida spiega come collegare un 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 Mappa per mostrare le posizioni correlate, migliorando il coinvolgimento dell'utente.

### Vantaggi

Collegare questi componenti consente al tuo sito di rispondere alle selezioni dell'utente in tempo reale, offrendo un modo mirato e intuitivo per esplorare le posizioni degli account senza aggiornamenti manuali.

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

## Configurazione dell'integrazione

### **Configurazione della Data Table**

{% stepper %}
{% step %}

#### Aggiungi il componente Data Table

* Posiziona un componente Avonni Data Table nella tua pagina Experience Cloud per visualizzare le informazioni sugli account.
* *Perché questo?* La Data Table funge da punto di partenza, mostrando i dettagli degli account per la selezione 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, permettendo ad altri componenti (come la Mappa) di riconoscerlo e reagire ad esso.

<figure><img src="/files/1b735601c747fb000364c754b57f5bbd400e7a78" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Limitare a una selezione

* Nelle proprietà della Data Table, trova il **Selezione massima righe** impostazione e impostala su `1.`
* *Perché questo?* Limitare a una riga garantisce che la Mappa mostri le posizioni di un singolo account, mantenendo l'esperienza chiara e focalizzata.

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

### Configurazione della Avonni Map

{% stepper %}
{% step %}

#### Aggiungi il componente Mappa

* Posiziona un componente Avonni Map nella stessa pagina (ad esempio, chiamalo `relatedLocationsMap`).
* *Perché questo?* La Mappa mostrerà i dati di posizione in base all'account selezionato.
  {% endstep %}

{% step %}

#### Imposta la fonte dei dati

* Nel Pannello Proprietà della Mappa, vai alla **Fonte dati** sezione.
* Seleziona **Input dati da query** e scegli il **oggetto Account** (o l'oggetto con i dati di localizzazione).
* *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? Questo filtro garantisce che la Mappa mostri solo le posizioni collegate all'account selezionato nella Data Table, utilizzando l'ID del record selezionato

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

| Campo         | Operatore | Valore                                    |
| ------------- | --------- | ----------------------------------------- |
| ID account    | Uguale a  | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} |           |                                           |

{% step %}

#### Mappa i campi

* Configura la Mappa per visualizzare i marcatori di posizione mappando i campi (ad esempio, imposta `Latitudine` e `Longitudine` campi dall'oggetto Account o da un oggetto correlato).
* *Perché questo?* La corretta mappatura dei campi indica alla Mappa dove posizionare i marcatori in base ai dati interrogati.
  {% endstep %}
  {% endstepper %}

## Risultato

Quando un utente seleziona un account nella Data Table, la Mappa 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 mappa non si aggiorna:** Assicurati che il nome API accountsDatatable corrisponda esattamente e che Selezione massima righe sia impostato su 1. Controlla la sintassi del filtro ({{accountsDatatable.selectedRecord.Id}}).
* **Nessuna posizione mostrata:** 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 Mappa si carica lentamente.
* **Se i problemi persistono:** Contatta il nostro team di supporto a <support@avonni.com> per assistenza


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti-reattivi/collegamento-tra-tabella-dati-e-mappa-per-posizioni-dinamiche.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.