Lier la table 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 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

1

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

2

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.

3

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.

Configuration de la carte Avonni Map

1

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é.

2

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

3

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}}

4

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.

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 à [email protected] pour obtenir de l’aide