> 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-fr/tutoriels/reactive-components/linking-data-table-and-map-for-dynamic-locations.md).
# Lier le tableau de données et la carte pour des emplacements dynamiques
## Aperçu
Ce guide explique comment connecter un composant Avonni Data Table et un composant Avonni Map dans votre site Experience Cloud afin de créer un affichage dynamique et interactif. En reliant les deux composants, la sélection d’un compte dans le Data Table met à jour la carte pour afficher les emplacements associés, améliorant ainsi l’engagement des utilisateurs.
### Avantages
Le lien entre ces composants permet à votre site de réagir en temps réel aux sélections des utilisateurs, offrant ainsi un moyen ciblé et intuitif d’explorer les emplacements des comptes sans actualisation manuelle.
## Configuration de l’intégration
### **Configuration du 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 cela ?* Le Data Table sert de point de départ, en affichant les détails des comptes pour la sélection par l’utilisateur
{% endstep %}
{% step %}
#### Nommer le Data Table
* Dans le panneau Propriétés du Data Table, définissez le **Nom de l’API** sur `accountsDatatable`.
* *Pourquoi cela ?* Le nom d’API agit comme un identifiant unique, permettant aux autres composants (comme la carte) de le reconnaître et d’y réagir.
{% endstep %}
{% step %}
#### Limiter à une seule sélection
* Dans les propriétés du Data Table, trouvez le **Sélection maximale de lignes** et définissez-le sur `1.`
* *Pourquoi cela ?* Limiter à une seule ligne garantit que la carte affiche les emplacements d’un seul compte, ce qui rend l’expérience claire et ciblée.
{% endstep %}
{% endstepper %}
### Configuration de la carte Avonni
{% stepper %}
{% step %}
#### Ajouter le composant Map
* Placez un composant Avonni Map sur la même page (par exemple, nommez-le `relatedLocationsMap`).
* *Pourquoi cela ?* 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 **Interroger la source de données** et choisissez le **Compte** objet (ou l’objet contenant les données de localisation).
* *Pourquoi cela ?* 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 cela ? Ce filtre garantit que la carte affiche uniquement les emplacements liés au compte sélectionné dans le Data Table, en utilisant l’ID de l’enregistrement sélectionné
| Champ | Opérateur | Valeur |
| ------------- | --------- | ----------------------------------------- |
| ID du compte | Égal à | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} | | |
{% step %}
#### Mapper les champs
* Configurez la carte pour afficher des repères de localisation en mappant les champs (par exemple, définissez `Latitude` et `Longitude` les champs de l’objet Compte ou d’un objet associé).
* *Pourquoi cela ?* Un mappage correct des champs indique à la carte où placer les repères en fonction des données interrogées.
{% endstep %}
{% endstepper %}
## Résultat
Lorsqu’un utilisateur sélectionne un compte dans le Data Table, la carte se met automatiquement à jour pour n’afficher que les emplacements associés à ce compte. Cela crée une expérience fluide et interactive, permettant aux visiteurs d’explorer efficacement les données.
## 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 définie sur 1. Vérifiez la syntaxe du filtre ({{accountsDatatable.selectedRecord.Id}}).
* **Aucun emplacement affiché :** Vérifiez que l’objet Compte ou l’objet associé comporte des champs de latitude et de longitude, et confirmez que la requête renvoie des données.
* **Problèmes de performances :** 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 à pour obtenir de l’aide
---
# 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-fr/tutoriels/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.