Building a reactive map component - Tutorial Alert
Hello everyone!
Today, we would like to share a tutorial that enables you to use Avonni Flow Screen Components Library on your Salesforce org to visualize account information on a map with related information displayed.
What's fascinating about this tutorial is that it leverages Avonni's flow screen components' capabilities to create compelling, interactive visualizations that adapt based on user input. Imagine clicking on a map marker and instantly viewing specific account details – all of this happens in real-time thanks to the power of reactive components.
Let's dive right in.
First, you must install the Avonni Flow Screen Components managed package on your Salesforce org. Once that's done, you'll be set to create a custom component that maps account data based on their location while implementing a set component visibility interaction that allows you to display specific account information upon clicking a marker.
Here are the steps you'll need to follow:
1?? Create a new Screen Flow.
2?? Establish a foundation by creating a Get Records Collection. This step fetches the account records information, which will be visualized in the Avonni Map.
3?? Add a Screen Element to your flow. This is where our custom component's user interface (UI) comes to life. It involves adding a section element to divide the screen into two distinct columns: one for the map visualization and another to display specific account information when a map marker is clicked.
4?? Drag the Avonni Map on the left-side section. You then configure the Avonni Map Component through a data source configuration that links our map component to the get records collection created in Step 2. Location mapping is the next critical stage, connecting location-specific information from our get records collection to the map component.
5?? The right-side section configuration comes next. Here, you use the Avonni Header component to dynamically display the currently selected account's name, and the Avonni Formatted Value component to display the value for the corresponding account number field.
The Avonni Header configuration will dynamically display the currently selected account's name. Here's a brief overview of how this process works:
Avonni 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.
6?? Finally, set the component visibility configuration for each component in your screen flow to ensure they are displayed based on specific criteria.
This hands-on and step-by-step tutorial will let you understand the concepts behind Avonni's flow screen components and reactive components.
Whether you are a Salesforce admin, developer, or a Salesforce enthusiast who enjoys getting hands-on with the system, this tutorial will add a powerful tool to your Salesforce arsenal.
Feel free to let us know if you have any questions or comments. We look forward to hearing about your experiences with this tutorial and the exciting ways you will use Avonni Flow Screen Components.