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 other 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 and Understand the Text Formula

Now, let's create the brains behind your reactive Data Table! You'll do this by setting up a formula text variable. This acts like a dynamic filter that controls which records your Data Table displays.

Here's the formula you'll use:

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

Important: Replace <<YOUR DATA TABLE API NAME>> with the actual API name of your Data Table component.

This formula tells your Data Table to only show Account records where the Account.Id matches the Id of the first row selected in the Data Table.

Don't worry if it looks a bit complex now – as you work through the tutorial, you'll see exactly how this formula brings your Data Table to life.

Understanding the Formula

Let's dissect the formula:

• "Account.Id = '": This formula part targets the 'Account.Id' field. Replace 'Account.Id' with the API name of the field you want to match in your specific use case.

• &{!<<YOUR DATA TABLE API NAME>>.firstSelectedRow.Id}: This dynamically retrieves the ID of the selected row (the chosen account) from your main Data Table. Substitute <<YOUR DATA TABLE API NAME>> with the actual API name of your Data Table.

• `&"'": This concludes the formula, ensuring it's formatted correctly.

Using this Text formula in the integrated query mode makes your component reactive. When a user selects a row in your Avonni data table, the formula automatically updates, filtering the other components in your flow to display only the relevant data for that specified account.

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.

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.