# 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="https://4258905998-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>

## 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="https://4258905998-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 %}

#### 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="https://4258905998-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 %}

### 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="https://4258905998-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>

| 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