How to make Data Tables Reactive

Overview

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.

Step 1: Set Up the Main Data Table

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.

Step 2: Create a Dynamic Filter

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:

Formula Text Variable

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.

Text Template Variable

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.

Key Differences and Considerations

Let's explore both approaches:

A. Add a Formula Text Variable

1. Go to your page's variables and create a new variable of type "Formula Text".

2. Give it a descriptive name like selectedAccountId.

3. Enter the following formula, making sure to replace <<YOUR DATA TABLE API NAME>> with the actual API name of your Data Table component:

   Copy

   "Account.Id = '" & {!<<YOUR DATA TABLE API NAME>>.firstSelectedRow.Id} & "'" 

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.

B. Simplify with a Text Template (Optional)

For easier management, you can use a "Text Template" variable:

1. 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:

     Copy

     Account.Id = {!<<YOUR DATA TABLE API NAME>>.firstSelectedRow.Id} 

2. Reference the Template:

   • In your selectedAccountId formula variable, replace the long formula with the name of your Text Template variable (e.g., {!accountFilterTemplate}).

AccountId IN ({!commaSeparatedAccountIds})

Stage = 'Closed Won' OR Amount > 10000

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.

Step 3: Configure the Reactive Data Tables

To set up the other Data Tables that will update based on the selection in the main table:

1. Select 'Query Data Source' for these tables.

2. Choose the Object you wish to query (for example, customer-related data).

3. 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.

4. 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.

Dive deeper

The Avonni Illustration component provides visual feedback when the main Data Table has no selected records.

How to Set It Up

1. Drag and drop the Avonni Illustration component onto your screen flow canvas.

2. Choose the illustration you'd like to display.

3. 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.

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.