Interactive Maps and Real-Time Account Information
This tutorial requires installing the Avonni Flow Screen Components managed package on your Salesforce org.
Overview
Get ready to build an awesome interactive map! In this tutorial, you'll discover how to make a visualization that responds to your clicks and how to display detailed information about locations at the click of a button.
By the end of this tutorial, you'll know how to:
Understand the building blocks: Learn about the special components that make this magic happen (don't worry, we'll explain it all!).
Create a custom map: Learn how to plot locations and information on a map that's uniquely yours.
Make it interactive: Make your map come alive! We'll show you how to reveal extra details when you click on a map marker.
Illustrations
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FZ4l7RsikE7wdH8yqEM6m%252F2023-06-20_22-01-06%2520%281%29.gif%3Falt%3Dmedia%26token%3Da83eeb01-4c80-45d9-8382-96aa3020216c&width=768&dpr=4&quality=100&sign=16ad87ec&sv=1)
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F6DcpaFt2FvJrdcRR0QZi%252F2023-06-16_16-51-14.png%3Falt%3Dmedia%26token%3D3491caa1-77fd-4056-92f9-657900c1d2b1&width=768&dpr=4&quality=100&sign=7931723a&sv=1)
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FUbkgttOsiofsFZcwdqxZ%252F2023-06-16_16-51-28.png%3Falt%3Dmedia%26token%3Dee0853b1-a14b-4f46-b631-a0f94691fddf&width=768&dpr=4&quality=100&sign=52530560&sv=1)
Guided Steps
1️⃣ Create your new Screen Flow
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FrW1gfMkZpSWjBffUWFMk%252F2023-06-19_21-25-19.png%3Falt%3Dmedia%26token%3D35fbc55c-f02c-4a0e-9eee-048f4cf679af&width=768&dpr=4&quality=100&sign=ce93708c&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FkrgVrRQ9LtWZlwae2OrM%252F2023-06-19_21-30-14.png%3Falt%3Dmedia%26token%3Dbae57eac-e2b4-42d4-a690-aa8721dfd0aa&width=768&dpr=4&quality=100&sign=a22fe26f&sv=1)
3️⃣ Add Screen Element
The next step is adding a screen element to our flow. This is where our custom component's user interface (UI) comes to life.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FIpnIPd2H09oipDsStLZ8%252F2023-06-19_21-42-41.png%3Falt%3Dmedia%26token%3D0b4bc72a-2100-4361-98c6-eba129a2efb0&width=768&dpr=4&quality=100&sign=5784d029&sv=1)
Add a section element.
We're adding a section element inside the screen element to create two columns. The wider left column will display the map, and the narrower right column will display account information.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FCmMG2gjM1Rs3UlpQ9xcR%252F2023-06-19_21-19-31.png%3Falt%3Dmedia%26token%3D49bb6e62-674e-4437-a4e8-adf3c03e5415&width=768&dpr=4&quality=100&sign=e14eaf96&sv=1)
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) |
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FyglpOD1pZyx3TgldAjAi%252F2023-06-19_21-21-30.png%3Falt%3Dmedia%26token%3D6d04504e-da79-4def-bd2c-9dab1e4e9407&width=768&dpr=4&quality=100&sign=7056147&sv=1)
Data Source Configuration
We need to tell the map where to find the account information you collected earlier.
Here's how:
Change the map's 'Data Source Configuration' to 'Variable'. This will allow the map to look for changing data rather than using fixed information.
Select your 'get records collection'. This is where you stored the account details. Now the map knows where to look!
Map your data for display:
'Account name' as the Title makes it easy to see which account each marker represents.
'description' in the Description gives users more information when they click a marker
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252Fcym1wSQCE63auG6GhQ63%252F2023-06-20_15-21-23.png%3Falt%3Dmedia%26token%3D72970c4d-f3bb-4c1c-b88f-51dfbe7c5f66&width=768&dpr=4&quality=100&sign=cb58f124&sv=1)
Location mapping
Think of 'Location Data Mappings' like giving the map directions. You're taking the address information you collected (street, city, etc.) and matching it to the parts of the map it needs to understand. This way, the map knows exactly where to put each account marker.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FAlJUoYvLewVmd2EpFy6G%252F2023-06-20_15-23-29.png%3Falt%3Dmedia%26token%3Dd74d4fea-4290-4f4d-92fb-9bc469c4159d&width=768&dpr=4&quality=100&sign=22ac6b24&sv=1)
4️⃣ Right-side section configuration
We're going to make the right-side section show details about the account you click on the map. Here's how:
Add the 'Avonni Header' component. This will make the account's name appear at the top.
Add the 'Avonni Formatted Value' component component. This lets you show additional account information right below the name.
Avonni Header configuration
We're adding an 'Avonni Header' to show the name of the account you select on the map.
Here's how to set that up:
Add the 'Avonni Header' component. This is where the account name will be displayed.
Set the title to 'Mapped'. This means the title isn't fixed – it will change based on data.
Link it to 'Selected Marker SObject Value' and 'Account name'. This tells the header: "Get the account name from whichever marker is currently clicked on the map
Avonni Formatted Value Configuration
We want to use the Avonni Formatted Value component to show extra information about the account when someone clicks its marker.
Here's how to set that up:
Drag the Avonni 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
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FhsqMlWhuiaKDwozX86u5%252F2023-06-21_21-21-40%2520%281%29.gif%3Falt%3Dmedia%26token%3D37d69b7f-aa36-4a8f-8258-229d7243e8a7&width=768&dpr=4&quality=100&sign=7350aed0&sv=1)
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
Think of component visibility like stage lights. You want the right things to show up at the right time. For example, we'll make the Avonni Header only appear when an account is selected on the map. Do this for each component to make your flow look polished.
We're doing this by configuring a set component visibility rule on the component.
{!map.selectedMarkerSObjectValue.Id} IS NULL == FALSE
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252Fj8VOwG9cpUH8zx3jgaZq%252F2023-06-21_21-26-32%2520%281%29.gif%3Falt%3Dmedia%26token%3Da38d9afc-6433-4226-b325-768253f2d73b&width=768&dpr=4&quality=100&sign=f32204c7&sv=1)
Repeat the same steps for other components' visibility.
Video Tutorial
Last updated