Build

Bring Your Salesforce Data to Life with Interactive Maps in Flow Builder

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.

Building an Interactive Map

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.

Why Screen Flows?

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:

  • Flexible: Easily adaptable to changing requirements or new features.
  • Maintainable: Simple to update without extensive coding knowledge.
  • Accessible: Empowering admins and business users to make changes.

By building this interactive map within a Screen Flow, we achieve a balance of powerful functionality and ease of maintenance.

Flow Structure: Simple and Focused

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.

Under the Hood: Dynamic Formulas in Action

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:

  1. Calculates the distance: It measures the distance (in kilometers) between each location record's Location__c field (Geolocation field type) – which must contain geolocation data – and the current center point of the map, as pinpointed by {!map.centerLatitude} and {!map.centerLongitude}.
  2. Compares to visible area: It then checks if this calculated distance is less than the width of the currently visible map area, represented by {!map.visibleWidthKm}.
  3. Filters based on the result: If the distance is less than the visible width, the location is included in the map display; otherwise, it's filtered out.

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:

  • To make this work, choose "Leaflet" as your map type in the Avonni Map component settings.
  • Also, double-check that each record you want to show on the map has latitude and longitude values stored in its geolocation field.

For the Metrics: Fine-Tuning the Filter

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:

  1. Within the visible map area (based on the distance calculation).
  2. Classified as a "Bakery" (based on the 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.

Elevate Your Salesforce Experience

This is just one example of how you can elevate your Salesforce user experience by creating dynamic, interactive maps within Flow Builder.

Key Takeaways:

  • Think beyond the basics: Salesforce offers many possibilities beyond standard reports and dashboards.
  • Embrace the power of flows: Flow Builder is more than just a process automation tool; it's a platform for creating rich, interactive user experiences.
  • Leverage innovative components: Avonni's components, like the Map and Metrics, provide essential building blocks for crafting engaging visualizations.
  • Don't be afraid to experiment: Dynamic formulas and creative thinking can unlock new levels of interactivity and insight.

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.

>> Explore the
Boost Salesforce Flow UX: Dynamic Maps & Metrics with Avonni
Documentation

Build Salesforce Solutions Faster

Save time, reduce costs, and see your Salesforce projects come to life faster.