# Building a Dynamic Metrics Dashboard with the Data Table

## Overview

This tutorial guides you through building a reactive dashboard in Avonni Flow, featuring dynamic metrics that respond to data table selections. 

{% 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**](/dynamic-components/welcome.md). You'll get faster loading times and a more straightforward setup for your data queries on Lightning Pages.
{% endhint %}

### **Example scenario**

Imagine a dashboard displaying a list of accounts in a data table. As users select accounts, the metrics at the top dynamically update to show total revenue, the number of open opportunities, and the total value of those opportunities for the selected accounts. This empowers users to analyze and understand key performance indicators quickly.

<figure><img src="/files/XiEIdocDxfXWvneR15UZ" alt=""><figcaption></figcaption></figure>

## Guided Steps

This tutorial will walk you through creating an interactive dashboard in Avonni Flow, where metrics dynamically update based on selections made in a data table.

### **1. Set Up the Data Table**

* **Drag and Drop:** From the Avonni Components palette in Flow Builder, drag the "Data Table" component onto your screen.
* **Configure Data Source:** Select your desired data source. This could be a Salesforce object (e.g., Account, Opportunity) or a collection variable from a previous step in your flow.

<figure><img src="/files/m9TAmZrqN0ude249ZYhj" alt=""><figcaption></figcaption></figure>

* **Add Columns:** Drag the relevant fields from your data source onto the data table to create columns—Configure column settings (labels, formatting, etc.) as needed.

<figure><img src="/files/ixtC7b9ecVRFIGP7uMol" alt=""><figcaption></figcaption></figure>

### **2. Create the Metrics Section**

* **Add a Section:** Drag a "Section" component onto your screen and configure it to have three columns. This will provide a structured layout for your metrics.

<figure><img src="/files/s3AluLBPDL9vCOfQEPq8" alt=""><figcaption></figcaption></figure>

* **Add Metric Components:** Drag three "Metric" components into the section, one per column.

### **3. Configure the First Metric**

* **Set Query Value:** In the first metric component, choose "Query" as the value source.
* **Select Object and Field:** Select the relevant Salesforce object (e.g., Opportunity) and the field you want to aggregate (e.g., Amount).
* **Choose Aggregate Function:** To calculate the metric value, select the appropriate aggregate function (e.g., SUM, AVG, COUNT).

<figure><img src="/files/gCKh3kxB9t7SmzNh35zm" alt=""><figcaption></figcaption></figure>

### **4. Make the Metric Reactive**

* **Create a Formula Text Variable:** In your flow, create a new resource of type "Formula Text." This variable will filter the metric's query dynamically based on the data table selection.
* **Formula Syntax:** Use the following syntax for the formula:

  ```
  "Id IN ("&{!dataTable.selectedRowsKeyValueCommaSeparated}&")" 
  ```

  This formula constructs a string that filters records by their IDs, matching the IDs of the rows selected in the data table. `{!dataTable.selectedRowsKeyValueCommaSeparated}` retrieves the selected row IDs.

<figure><img src="/files/dPgmcsMLr4APJUS5Sef1" alt=""><figcaption></figcaption></figure>

* **Connect the Formula to the Metric:** Use the formula text variable in the "Where Clause" field in the metric component's query configuration.

<figure><img src="/files/U5c0tVh7zkUUCELmHX3O" alt=""><figcaption></figcaption></figure>

### **5. Repeat for Other Metrics**

Repeat steps 3 and 4 for the remaining two metric components, adjusting the object, field, and aggregate function as needed.

### **6. Test and Refine**

Save your flow and test it. Observe how the metrics dynamically update as you select different rows in the data table. Refine the formatting and layout of your dashboard to ensure clarity and visual appeal.

Following these steps, you'll create a dynamic and interactive dashboard that empowers users to explore data and gain valuable insights in real-time.


---

# 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/building-a-dynamic-metrics-dashboard-with-the-data-table.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.