# Lier le tableau de données et la carte pour des emplacements dynamiques

## Aperçu

Ce guide explique comment connecter une Avonni Data Table et un composant Avonni Map sur votre site Experience Cloud pour créer un affichage dynamique et interactif. En reliant les deux composants, la sélection d'un compte dans la Data Table met à jour la carte pour afficher les emplacements associés, renforçant l'engagement des utilisateurs.

### Avantages

La liaison de ces composants permet à votre site de réagir aux sélections des utilisateurs en temps réel, offrant un moyen ciblé et intuitif d'explorer les emplacements des comptes sans actualisations manuelles.

<figure><img src="https://3803934262-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>

## Configuration de l'intégration

### **Configuration de la Data Table**

{% stepper %}
{% step %}

#### Ajouter le composant Data Table

* Placez un composant Avonni Data Table sur votre page Experience Cloud pour afficher les informations des comptes.
* *Pourquoi ceci ?* La Data Table sert de point de départ, montrant les détails des comptes pour la sélection par l'utilisateur
  {% endstep %}

{% step %}

#### Nommer la Data Table

* Dans le panneau Propriétés de la Data Table, définissez le **Nom de l'API** sur `accountsDatatable`.
* *Pourquoi ceci ?* Le nom de l'API agit comme un identifiant unique, permettant à d'autres composants (comme la carte) de le reconnaître et d'y réagir.

<figure><img src="https://3803934262-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 %}

#### Limiter à une sélection

* Dans les propriétés de la Data Table, trouvez le **Sélection maximale de lignes** et réglez-le sur `1.`
* *Pourquoi ceci ?* Limiter à une ligne garantit que la carte affiche les emplacements pour un seul compte, conservant une expérience claire et ciblée.

<figure><img src="https://3803934262-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 %}

### Configuration de l'Avonni Map

{% stepper %}
{% step %}

#### Ajouter le composant Map

* Placez un composant Avonni Map sur la même page (par exemple, nommez-le `relatedLocationsMap`).
* *Pourquoi ceci ?* La carte affichera les données de localisation en fonction du compte sélectionné.
  {% endstep %}

{% step %}

#### Définir la source de données

* Dans le panneau Propriétés de la carte, allez à la **Source de données** section.
* Sélectionnez **Source de données par requête** et choisissez le **Compte** objet (ou l'objet contenant les données de localisation).
* *Pourquoi ceci ?* La requête récupère dynamiquement les données de localisation depuis Salesforce
  {% endstep %}

{% step %}

#### Filtrer les résultats

* Ajoutez une condition de filtre dans les paramètres de la requête :
* Pourquoi ceci ? Ce filtre garantit que la carte n'affiche que les emplacements liés au compte sélectionné dans la Data Table, en utilisant l'ID de l'enregistrement sélectionné

<figure><img src="https://3803934262-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>

| Champ         | Opérateur | Valeur                                    |
| ------------- | --------- | ----------------------------------------- |
| ID du compte  | Égale     | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} |           |                                           |

{% step %}

#### Mapper les champs

* Configurez la carte pour afficher des marqueurs de localisation en mappant les champs (par exemple, définissez `Latitude` et `Longitude` champs de l'objet Compte ou d'un objet lié).
* *Pourquoi ceci ?* Un mappage correct des champs indique à la carte où placer les marqueurs en fonction des données interrogées.
  {% endstep %}
  {% endstepper %}

## Résultat

Lorsque un utilisateur sélectionne un compte dans la Data Table, la carte se met automatiquement à jour pour n'afficher que les emplacements associés à ce compte. Cela crée une expérience interactive et fluide, permettant aux visiteurs d'explorer les données efficacement.

## Dépannage des problèmes courants

* **La carte ne se met pas à jour :** Assurez-vous que le nom d'API accountsDatatable correspond exactement et que la Sélection maximale de lignes est réglée sur 1. Vérifiez la syntaxe du filtre ({{accountsDatatable.selectedRecord.Id}}).
* **Aucun emplacement affiché :** Vérifiez que l'objet Compte ou l'objet lié possède des champs de latitude et de longitude, et confirmez que la requête renvoie des données.
* **Problèmes de performance :** Simplifiez la requête ou réduisez le nombre d'enregistrements si la carte se charge lentement.
* **Si les problèmes persistent :** Contactez notre équipe d'assistance à <support@avonni.com> pour obtenir de l'aide