YouTube ChannelInstall the Components for Experience Sites

Linking Data Table and Map for Dynamic Locations

Overview

This guide explains how to connect an Avonni Data Table and an Avonni Map component in your Experience Cloud site to create a dynamic, interactive display. By linking the two components, selecting an account in the Data Table updates the Map to show related locations, enhancing user engagement.

Benefits

Linking these components allows your site to respond to user selections in real time, providing a focused and intuitive way to explore account locations without manual refreshes.

Setting Up the Integration

Configuring the Data Table

1

Add the Data Table Component

  • Place an Avonni Data Table component on your Experience Cloud page to display account information.

  • Why this? The Data Table serves as the starting point, showing account details for user selection

2

Name the Data Table

  • In the Data Table’s Properties Panel, set the API Name to accountsDatatable.

  • Why this? The API name acts as a unique identifier, allowing other components (like the Map) to recognize and react to it.

3

Limit to One Selection

  • In the Data Table’s properties, find the Max Row Selection setting and set it to 1.

  • Why this? Limiting to one row ensures the Map displays locations for a single account, keeping the experience clear and focused.

Configuring the Avonni Map

1

Add the Map Component

  • Place an Avonni Map component on the same page (e.g., name it relatedLocationsMap).

  • Why this? The Map will display location data based on the selected account.

2

Set the Data Source

  • In the Map’s Properties Panel, go to the Data Source section.

  • Select Query Data Source and choose the Account object (or the object with location data).

  • Why this? The query fetches location data dynamically from Salesforce

3

Filter the Results

  • Add a filter condition in the query settings:

  • Why this? This filter ensures the Map shows only locations linked to the account selected in the Data Table, using the selected record’s ID

Field
Operator
Value

Account ID

Equals

{{accountsDatatable.selectedRecord.Id}}

4

Map the Fields

  • Configure the Map to display location markers by mapping fields (e.g., set Latitude and Longitude fields from the Account object or a related object).

  • Why this? Proper field mapping tells the Map where to place markers based on the queried data.

Outcome

When a user selects an account in the Data Table, the Map automatically updates to show only the locations associated with that account. This creates a seamless, interactive experience, allowing visitors to explore data efficiently.

Troubleshooting Common Issues

  • Map Not Updating: Ensure the accountsDatatable API name matches exactly and that Max Row Selection is set to 1. Check the filter syntax ({{accountsDatatable.selectedRecord.Id}}).

  • No Locations Displayed: Verify the Account object or related object has latitude and longitude fields, and confirm the query returns data.

  • Performance Issues: Simplify the query or reduce the number of records if the Map loads slowly.

  • If Issues Persist: Contact our support team at [email protected] for assistance

Last updated

Was this helpful?