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.