Interactive Map
Overview
Let's say you have a data table listing different accounts (accountsDatatable
). Each account might have a location associated with it. You want to make it easy for users to see the location related to a specific account they select from the table.
Here's how you achieve this:
Setting Up the Data Table
1. The Data Table Component
You have a data table component where you display your account information. Let's call it
accountsDatatable
.Each row in your table shows details about a single account.
2. Naming Your Data Table
In the data table's settings, make sure you've given it the API name
accountsDatatable
.Think of this as giving your data table a nickname so other components can easily recognize it.
3. Limit to One Selection
To ensure users can only select one account at a time, go to the data table's properties.
Find the "Max Row Selection" setting and change it to "1".
Why Limit to One Selection?
In our example, we want the map to show locations for only one account at a time. By limiting selections to a single row, we ensure a clear and focused experience for the user.
Setting Up the Avonni Map
1. The Map Component
You have a map component ready to go (let's call it
relatedLocationsMap
).This is where we'll display the account locations.
2. Tell the Map Where to Get Data
Open your map's settings and go to the "Data Source" section.
Choose the "Query Data Source" option. This tells the map to get its information from a specific Salesforce object.
Select the "Account" object (or whatever holds your location data).
3. Filter the Results
We need a filter to show only the locations for the account selected in the data table.
In the query settings, add a filter condition:
Field:
Account ID
Operator:
Equals
Value:
{{accountsDatatable.selectedRecord.Id}}
This expression tells the map only to show locations where the Account ID matches the ID of the selected row in your data table.
4. Double-Check the Map's Settings
Make sure you've mapped the fields correctly.
For example, you need to tell the map which field contains the latitude and longitude coordinates so it knows where to put the location markers.
The Outcome
Now your map is dynamic! When you select an account in your data table, the map automatically shows only the locations associated with that account. This creates a seamless and informative experience for your users.
Last updated