Reactive Query Tutorials
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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).
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.
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:
You'll create a formula text variable similar to a WHERE clause in SOQL. This variable defines the criteria for filtering your data.
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.
Now, run your Flow.
The first Data Table will display all Accounts.
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.
Check out our tutorials on how to set up Reactive Queries and build powerful interactive experiences.
For a practical example of how this formula is structured, go to the "" tutorial.
Building a Dynamic Metrics Dashboard with the Data Table
