How to make Data Tables Reactive
Last updated
Was this helpful?
Last updated
Was this helpful?
This example has a main Data Table connected to two other tables. When you select an account from the main table, the different data tables automatically update to show information relevant to that account. A formula used as a variable to filter the data in these tables makes this dynamic update possible.
Firstly, add the main Data Table to your workspace. To ensure users can select only one account at a time, configure the 'Max Row Selection' setting to 1. This setting enables single-row selection using a radio button.
This filter will act as the "brains" of your report. It creates a dynamic WHERE clause for the SOQL queries that power your components. This filter lets you control which records your Data Table displays based on the row you select.
Think of it like this: you have a database table full of information. A WHERE clause lets you specify conditions to narrow down the data you retrieve. In this case, our dynamic filter will act as a WHERE clause that changes based on the row you select in your Data Table.
You can achieve this dynamic filtering in two ways:
This involves writing a formula that directly constructs the WHERE clause, referencing the selected row's ID. It's a direct approach, but the formula can become complex for more intricate filtering logic.
This method stores the WHERE clause logic using a separate "Text Template" resource. This keeps your formulas cleaner, easier to read, and simpler to update. It's beneficial for complex reports or when you expect to modify the filter conditions later.
Complexity
Can become complex for advanced filtering
Keeps formulas cleaner, especially for complex logic
Maintainability
Requires updating the formula directly
Easier to update; change the template once
Readability
Can be harder to read for long formulas
Improves readability by separating logic
Organization
May become less organized for complex reports
Enhances organization by separating concerns
Let's explore both approaches:
Go to your page's variables and create a new variable of type "Formula Text".
Give it a descriptive name like selectedAccountId.
Enter the following formula, making sure to replace <<YOUR DATA TABLE API NAME>> with the actual API name of your Data Table component:
Formula Explanation
"Account.Id = '": This starts the filter condition, targeting the Account.Id field (or your chosen field's API name).
'..."' : The single quotes ensure the ID is treated as text.
&: This combines different parts of the formula.
{!<<YOUR DATA TABLE API NAME>>.firstSelectedRow.Id}: This dynamically fetches the ID of the first selected row in your Data Table.
For easier management, you can use a "Text Template" variable:
Create a Text Template Resource:
In your Flow Builder, click New Resource in the Toolbox.
Select Text Template as the Resource Type.
Give your Text Template a descriptive name (e.g., accountFilterTemplate).
Important: Set "View As" to "Plain Text" in the Text Template settings.
In the template, enter your filter logic, replacing the placeholder with your Data Table's API name:
Reference the Template:
In your selectedAccountId formula variable, replace the long formula with the name of your Text Template variable (e.g., {!accountFilterTemplate}).
Important Note about Text Template Syntax
When using operators like IN or OR in your WHERE clause within a Text Template, always write these operators in FULL CAPS. For example:
or
Why use a Text Template?
Readability: Separates filter logic for cleaner code.
Maintainability: Simplifies updates; changes the template once instead of multiple formulas.
Organization: Keeps variables organized, especially in complex reports.
How the Filter Works
This dynamic filter ensures that other components on your page automatically update to show information related to the Account ID you select in the Data Table. It's like building a mini "search" function into your report.
To set up the other Data Tables that will update based on the selection in the main table:
Select 'Query Data Source' for these tables.
Choose the Object you wish to query (for example, customer-related data).
In the Filter section, select 'Mapped' and apply the formula from Step 2. This setup links the tables to the account specified in the main table.
Implement any additional necessary settings for your Data Table.
Following these steps, your main Data Table will interact dynamically with the other tables, updating them to display information relevant to the selected account.
The Avonni Illustration component provides visual feedback when the main Data Table has no selected records.
Drag and drop the Avonni Illustration component onto your screen flow canvas.
Choose the illustration you'd like to display.
Set a component visibility rule based on whether a record is selected in the main Data Table.
The rule should check if the {!AccountDataTable.firstSelectedRowKeyValue} is null (meaning no record is selected).
If the result is "True," the illustration will appear. If "False," the illustration will be hidden.
Replace AccountDataTable by the API Name you're using for your main data table.
With this simple configuration, you can enhance the user experience by providing a visual cue when no records are available, making your flow more intuitive and engaging.
