Have you ever wished your Salesforce data could be more engaging and insightful?
Have you ever wished your Salesforce data could be more engaging and insightful? Standard reports and lists often lack the "wow" factor needed to truly captivate users and drive action. While custom Lightning Web Components (LWCs) or CRM Analytics can bridge this gap, their complexity can be a hurdle.
Today, we're excited to share a practical solution that combines the flexibility of Flow Builder with the innovative components of Avonni to create dynamic, interactive visualizations that rival the best consumer apps.
Imagine a dynamic map experience living directly within your Salesforce screen flows. This map responds instantly to user interactions, filtering data and updating metrics as users explore. Locations seamlessly appear and disappear, keeping the map in sync with user actions and delivering a fast, engaging user experience that efficiently loads data based on the user's focus area.
Metrics: Eye-Catching and Dynamic
Avonni's Metrics components showcase key location data—total counts and breakdowns by type—at the top of the map. These aren't just static numbers; they react in real-time to map interactions, creating an interactive experience comparable to leading consumer apps.
The Map: A Reactive Visualization
The map itself is the core of the solution: reactive and performant. It dynamically updates markers and metrics with every pan or zoom, creating a seamless user experience.
You might be thinking, "Why use a Screen Flow for this? Aren't they mainly for guiding users through processes?"
While Screen Flows are often used for multi-step interactions and data collection, they also offer surprising flexibility and ease of use, making them a compelling alternative to custom LWCs in certain scenarios.
We chose Screen Flows for this solution because we wanted something:
By building this interactive map within a Screen Flow, we achieve a balance of powerful functionality and ease of maintenance.
The flow structure is intentionally simple, mirroring the primary goal of showcasing the interactive map. It consists of a single screen as a canvas for the map and accompanying metrics. This streamlined design avoids unnecessary complexity, ensuring the focus remains on the visual experience and data exploration.
The secret to the interactive map's responsiveness lies in dynamic formulas. These formulas act as a real-time filter, constantly evaluating key map attributes like the center point and visible area. This ensures that the Avonni Map component's query only fetches and displays locations relevant to the user's current view. This dynamic filtering makes the map come alive, responding instantly to pans and zooms, delivering a smooth and efficient experience even with large datasets.
Breaking Down the Formula
Let's take a closer look at the formula that makes this all possible:
DISTANCE(Location__c, GEOLOCATION("&{!map.centerLatitude}&","&{!map.centerLongitude}&"), 'km') <"&TEXT({!map.visibleWidthKm})
In essence, this formula:
{!map.centerLatitude}
and {!map.centerLongitude}
.{!map.visibleWidthKm}
.This simple yet powerful formula ensures that the map only shows locations within the user's current view, creating a dynamic and performant experience.
Note:
Our metrics component also harnesses the power of dynamic formulas, but with a refined focus. We extend the same core logic from the map, adding an extra filtering layer to zero in on specific categories. These dynamic formulas act as filters within the metrics component's query, ensuring the displayed counts accurately reflect the data visible on the map at any given moment.
Let's look at the formula used for the metrics:
DISTANCE(Location__c, GEOLOCATION("&{!map.centerLatitude}&","&{!map.centerLongitude}&"), 'km') <"&TEXT({!map.visibleWidthKm}) & " AND Type__c = 'Bakery'"
This formula is the same as the one used for the map, with one key addition: AND Type__c = 'Bakery'
. This extra condition ensures that the metric only counts locations that are both:
Type__c
field).Using this formula as a filter in the metrics component's query gives us a real-time count of bakeries within the user's current view. This allows us to display dynamic, context-aware metrics that enhance the user's understanding of the data.
This is just one example of how you can elevate your Salesforce user experience by creating dynamic, interactive maps within Flow Builder.
Key Takeaways:
This is just one example of what you can achieve. The possibilities are endless! Start exploring, experimenting, and pushing the boundaries of what's possible in Salesforce.
Your users will thank you for it.
Save time, reduce costs, and see your Salesforce projects come to life faster.