Reactive Query Tutorials

Reactive queries are a powerful feature of the Avonni Components' Query Data Source that enables you to create highly interactive user experiences within Salesforce Flows. They allow your Avonni components (like Data Tables, Lists, and others) to dynamically update their displayed data in response to user actions elsewhere in the Flow.

POWER TIP: Alternatives to Screen Flows for Data Display

If you're currently using Screen Flows to display information on a page (without any complex logic), consider switching to Avonni Dynamic Components package. You'll get faster loading times and a more straightforward setup for your data queries on Lightning Pages.

What Problem Do Reactive Queries Solve?

Imagine a scenario where you have a data table displaying a list of accounts and want another data table to show the contacts related to the currently selected account. Without reactive queries, you would need to use multiple Flow elements and potentially refresh the screen to update the Contacts Data Table. This can be cumbersome and create a poor user experience.

Reactive queries solve this by automatically updating the dependent component (the Contacts Data Table in this example) whenever the user interacts with the controlling component (the Accounts Data Table).

---

What are Reactive Screens?

Reactive screens are user interfaces that instantly respond to user interactions like selections, input changes, or other events. Reactive queries are a key part of building reactive screens, allowing data displayed in Avonni components to change dynamically based on these interactions.

---

How Reactive Queries Work: A Step-by-Step Example

Let's walk through a concrete example of how to use reactive queries to display related Contacts based on a selected Account:

Goal: Create two Data Tables: one showing Accounts and another showing Contacts related to the selected Account.

Output: When a user clicks on an Account in the first Data Table, the second Data Table instantly updates to display only the Contacts associated with that Account:

Step 1: Create a Formula Text Variable (The Dynamic Filter)

You'll create a formula text variable similar to a WHERE clause in SOQL. This variable defines the criteria for filtering your data.

For a practical example of how this formula is structured, go to the "How to make Data Tables Reactive" tutorial.

Let's say you have a Data Table displaying Accounts, and you want another Data Table to show related Contacts based on the selected Account. You would create a formula text variable like this one above.

Step 2: Connect the Formula to Your Avonni Component (The Dependent Component)

Now that you've created your filtering formula, you'll connect it to your Avonni component (like a Data Table or List). This is how you make your component reactive – it uses the formula to determine what data to display dynamically.

Step 3: See the Dynamic Update (The Magic)

Now, run your Flow.

1. The first Data Table will display all Accounts.

2. When you click on an Account in the first Data Table:

   • The {!AccountDataTable.firstSelectedRow.Id} part of the formula updates to the selected Account's ID.

   • The entire formula is recalculated.

   • The Contact Data Table automatically re-queries the database using the updated filter.

   • The Contact Data Table instantly refreshes to display only the Contacts related to the selected Account.

This creates a smooth, real-time interaction.

---

Tutorials

Check out our tutorials on how to set up Reactive Queries and build powerful interactive experiences.

Data Table Basics

How to make Data Tables Reactive

Filtering and Dynamic Updates

How to Create a Combobox-Filtered Data Table

Build a dynamic Data Table Using Dependent Picklists

Using Multi-Select Comboboxes with Reactive Formulas

Advanced Use Cases

How to build a reactive 'Quarterly Opportunity Tracker' component

Create a Dynamically Linked Account-Contact View

Building a Dynamic Metrics Dashboard with the Data Table

Building a Dynamic Map