> 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 un tableau de données et une 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 la Data Table met à jour la Map pour afficher les emplacements associés, ce qui renforce 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 une manière ciblée et intuitive d’explorer les emplacements des comptes sans actualisations manuelles.
## Configurer 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 cela ?* La 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 la Data Table
* Dans le panneau Propriétés de la Data Table, définissez le **nom API** sur `accountsDatatable`.
* *Pourquoi cela ?* Le nom d’API sert d’identifiant unique, permettant aux autres composants (comme la Map) de le reconnaître et d’y réagir.
{% endstep %}
{% step %}
#### Limiter à une seule sélection
* Dans les propriétés de la Data Table, recherchez le **Sélection maximale de lignes** paramètre et définissez-le sur `1.`
* *Pourquoi cela ?* Le fait de limiter à une seule ligne garantit que la Map affiche les emplacements d’un seul compte, ce qui rend l’expérience claire et ciblée.
{% endstep %}
{% endstepper %}
### Configuration de la carte Avonni Map
{% stepper %}
{% step %}
#### Ajouter le composant Map
* Placez un composant Avonni Map sur la même page (par exemple, nommez-le `relatedLocationsMap`).
* *Pourquoi cela ?* La Map 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 Map, allez à la **Source de données** section.
* Sélectionnez **Interroger la source de données** et choisissez l’ **Account** 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 Map affiche uniquement les emplacements liés au compte sélectionné dans la Data Table, en utilisant l’ID de l’enregistrement sélectionné
| Champ | Opérateur | Valeur |
| ------------- | --------- | ----------------------------------------- |
| ID du compte | Égale à | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} | | |
{% step %}
#### Mapper les champs
* Configurez la Map pour afficher des marqueurs de localisation en associant des champs (par exemple, définissez `Latitude` et `Longitude` des champs de l’objet Account ou d’un objet مرتبط).
* *Pourquoi cela ?* Une bonne association des champs indique à la Map où placer les marqueurs en fonction des données requises.
{% endstep %}
{% endstepper %}
## Résultat
Lorsqu’un utilisateur sélectionne un compte dans la Data Table, la Map se met automatiquement à jour pour afficher uniquement les emplacements associés à ce compte. Cela crée une expérience fluide et interactive, permettant aux visiteurs d’explorer les données efficacement.
## Dépannage des problèmes courants
* **La Map ne se met pas à jour :** Assurez-vous que le nom d’API accountsDatatable correspond exactement et que Max Row Selection est défini sur 1. Vérifiez la syntaxe du filtre ({{accountsDatatable.selectedRecord.Id}}).
* **Aucun emplacement affiché :** Vérifiez que l’objet Account ou l’objet مرتبط possède 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 Map 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.