Interactive Maps and Real-Time Account Information
Overview
This tutorial requires installing the Avonni Flow Screen Components managed package on your Salesforce org.
To complete this tutorial successfully, you must enable the Reactive Screen Components Beta feature in Salesforce.
To opt in to the Beta, you must go to the Process Automation Settings page within Setup. Scroll down to the bottom and enable the Reactive Screens Beta.
If you did not enable this setting before, you must create a new flow once activated.
You'll learn how to create a compelling visualization that interacts with user input through a hands-on and step-by-step approach. By clicking on a marker, you will see how to instantly bring up the specific account details - all happening in real-time, thanks to the power of reactive components.
By the end of this tutorial, you will be able to:
Understand the concepts behind Avonni's flow screen components and reactive components.
Use Avonni Map and Formatted Value component to create a custom component that maps account data based on location.
Implement a set component visibility interaction that allows you to display specific account information upon clicking a marker.
Steps
1️⃣ Create your new Screen Flow
2️⃣ Create your Get Records collection
It's important to establish a foundation by creating a "Get Records Collection." This initial step fetches the account records information, which will be visualized in the Avonni Map.
Essentially, the Get Records Collection serves as the data source for our component. It pulls account fields from Salesforce, which are then used to generate map markers based on their associated geographic information.
Based on your use case, add filters if needed to display only specific accounts.
3️⃣ Add Screen Element
The next step is adding a screen element to our flow. This is where the user interface (UI) of our custom component comes to life.
Add a section element.
Following the creation of the screen element, our next step involves adding a section element within it. This decision is driven by the need to create a more structured, organized layout for our custom component. Specifically, we want to display the map and related account information for easy comparison and interpretation.
By adding a section element, we can divide our screen into two distinct columns: a wider one (9 of 12 widths) for the map visualization on the left and a narrower one (3 of 12 widths) on the right to display specific account information when a map marker is clicked.
4️⃣ Drag the Avonni Map on the left-side section.
Avonni Map Configuration steps
Here's how to configure the Avonni Map Component
| Attribute | Value |
|---|---|
| Multiple Markers |
| Auto |
| 10 (or any other value to match your needs) |
Data Source Configuration
The Data Source Configuration links our map component to the get records collection created in Step 2, enabling it to represent the obtained records based on their location information visually.
To facilitate this, we choose "Variable" as the data source in the configuration. By doing this, we create a direct link between our map component and the get records collection, allowing the Avonni map to access and utilize the data retrieved from the collection. This ensures that the map is correctly populated with the relevant data.
Once you have chosen the get records collection as a variable data source, you can configure the data mapping. This step is important for personalizing the data display on your map component. Here's how you can do it:
Title: Select the 'Account name' value to be displayed as the title for each marker on the map. This will allow users to easily identify the accounts represented by each marker.
Description: Map the 'description' field to serve as the description in the map component. When a user interacts with a marker (e.g., clicks on it), this description will be displayed, providing further context and details about each account.
Location mapping
The 'Location Data Mappings' section plays an important role in accurately visualizing account locations on our Map component. In this stage, we connect location-specific information from our get records collection to the map component, ensuring that each account's geographical data is correctly represented.
Using the 'Data Mapping' functionality, we align specific location fields (such as 'Street', 'City', 'State', 'Country', etc.) from our record collection with the corresponding location elements in the map component. This ensures that each account marker is accurately placed based on its physical address details in the records collection.
4️⃣ Right-side section configuration
Header configuration
The Avonni Header configuration will dynamically display the currently selected account's name. Here's a brief overview of how this process works:
Component Selection: We drag the 'Avonni Header' component. This component displays the account's name currently selected on the map.
Title Value Configuration: The title value must be configured to show the correct account name. To do this, we first select the '
Mapped' option. This tells our component we want to map the title to a specific value coming from theSelected Marker SObject Valueattribute.Marker SObject Value Selection: The final step is to choose the '
Selected Marker SObject Value' and select the 'Account name' field. This ensures that the header displays the name of the currently selected account on the map.
Formatted Value Configuration
In this step, we use the Avonni Map component for visualizing account information. We enhance this visualization by incorporating the Avonni Formatted Value component. Specifically, we use the Formatted Value component to effectively display the value for the corresponding account number field, making the data presentation more intuitive and user-friendly.
Drag the formatted value component
Open the Component Builder
Map the Formatted Value to the Avonni Map component to display the account name value of the map selected marker value > Account Name
Repeat the same steps for other field's value you'd like to display.
6️⃣ Set Component Visibility configuration
Your Key to a Dynamic Component
Remember to configure component visibility settings for each component in your screen flow to ensure they are displayed based on specific criteria. For example, set the component visibility of the Avonni Header to only show when the map selected marker ID is not null. Effectively handling component visibility will lead to achieving the final result.
{!map.selectedMarkerSObjectValue.Id} IS NULL == FALSE
Repeat the same steps for other components visibility.
Last updated
