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

{% hint style="success" %}

#### 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**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/). You'll get faster loading times and a more straightforward setup for your data queries on Lightning Pages.
{% endhint %}

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FhPC08ipv6bjasYuzNVQc%2F2023-09-27_09-19-21%20(1).gif?alt=media&#x26;token=a9579f87-3d86-4f75-907b-3227453a75dd" alt=""><figcaption></figcaption></figure>

### **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**](#a.-add-a-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**](#b.-simplify-with-a-text-template-optional)

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**

| Feature             | Formula Text Variable                         | Text Template Variable                               |
| ------------------- | --------------------------------------------- | ---------------------------------------------------- |
| **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:

#### **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:

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FYPQObJ5ZczBpccqMP4T7%2F2023-09-27_09-29-09.png?alt=media&#x26;token=eeb7175c-871a-4400-b4bd-032995083b37" alt="" width="563"><figcaption></figcaption></figure>

**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`).
   * <mark style="color:orange;">**Important:**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">Set "View As" to "Plain Text" in the Text Template settings</mark><mark style="color:purple;">.</mark>
   * In the template, enter your filter logic, replacing the placeholder with your Data Table's API name:

     ```
     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}`).

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FnD2jJQ5w3pk980WNJ7TF%2F2024-12-18_09-33-24.png?alt=media&#x26;token=656b520d-f929-4c52-aa5d-6928f42abfc7" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**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:

```
AccountId IN ({!commaSeparatedAccountIds})
```

or

```
Stage = 'Closed Won' OR Amount > 10000
```

{% endhint %}

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FkXeiUrtyWDl7vi76Tw7j%2F2023-09-27_09-30-41.png?alt=media&#x26;token=16e6aeed-924a-4361-99b3-b13e236aaf4a" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FFTb0yUp2Ydx0uBNt53HP%2F2024-07-22_15-14-21%20(1).gif?alt=media&#x26;token=5128a95f-3df3-45ed-84ab-8c048638caa3" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Replace **`AccountDataTable`** by the API Name you're using for your main data table.
{% endhint %}

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-make-data-tables-reactive.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.