Reactive Map and Data Table
Last updated
Was this helpful?
Last updated
Was this helpful?
This example demonstrates an everyday use case for reactive components: connecting an Avonni and an Avonni to create an interactive visualization. You'll see how selecting a record in the Data Table can automatically update the Map to display the corresponding location.
We'll create a simple component with two main elements:
Data Table: Displays a list of Accounts.
Map: Displays the location of the currently selected Account from the Data Table.
The key to this interaction is a reactive filter on the Map component's data source:
Data Table: The Data Table is configured with a data source (e.g., a Query) that retrieves Account records, including address/location information (e.g., Billing Street, Billing City, Billing State/Province, Billing Zip/Postal Code, Billing Country).
User Selection: The user selects an Account in the Data Table.
firstSelectedRow Update: The Data Table's firstSelectedRow property automatically reflects the newly selected Account.
Reactive Filter: The Map component's data source is configured with a filter that references the firstSelectedRow.Id property of the Data Table. This is the reactive link.
Automatic Map Update: Because of the reactive filter, when firstSelectedRow changes, the Map's data source re-queries Salesforce, retrieves the location data for the newly selected Account, and updates the Map display automatically.
This creates a seamless user experience where selecting an Account instantly updates the Map to show its location.
To create a reactive connection between a Data Table and a Map, follow these steps:
Two-Column Layout: Add a two-column layout component to your Dynamic Component. This will allow you to place the Data Table and Map side-by-side.
Add Data Table: Drag an Avonni Data Table component into the left column of your layout.
Configure Data Source:
Click on the Data Table component to open its properties panel.
Select Avonni Query Data Source as the data source type.
Click Create a Query, or select an existing query.
Object: Select Account.
Filters (Optional): Add any static filters you need (e.g., to show only Accounts of a certain type). Do not add the reactive filter here.
Add columns to your Data Table via the "Columns" section in the Properties Panel. For each column, click "Add Column", select a "Source Field," and configure any other desired settings (Label, Editable, etc.).
Limit Row Selection:
In the Data Table properties, find the setting for Max Row Selection (or similar).
Set it to 1. This ensures that only one Account can be selected at a time, which is necessary for our reactive Map.
Add Map: Drag an Avonni Map component into the right column of your layout.
Configure Data Source:
Click the map to open the properties.
Select Avonni Query Data Source.
Object: Select Account.
Create the Reactive Filter:
Open the filter editor for the Map's query data source.
Add a Filter Condition:
Field: Select the Id field (or the field that uniquely identifies Accounts).
Operator: Choose equals.
Value: Use direct attribute referencing to link to the selected row in the Data Table:
(Replace AccountsTable with the actual name of your Data Table component).
Select Map Location Fields
In the Map Properties, select the field that matches the location fields.
Configure Map Location Fields: In the Map component's properties, find the section for configuring location data (it might be labeled "Location," "Map Settings," or similar). You need to tell the Map component which fields in your data source contain the address or coordinates. For example, you might map:
BillingStreet to the "Street" field in the Map settings.
BillingCity to the "City" field.
BillingState to the "State/Province" field.
BillingPostalCode to the "Zip/Postal Code" field.
BillingCountry to the "Country" field.
Select the correct fields from your data source corresponding to each part of the address. If you are using latitude/longitude, map those fields accordingly.
Preview: Preview your Dynamic Component.
Select an Account: Click on a row in the Data Table.
Observe the Map: The Map should automatically update to display the location of the selected Account
