# How to build a reactive 'Quarterly Opportunity Tracker' component

In this example, we use the [Avonni Tabs component](/flow/flow-components/tabs.md) to represent different year quarters. Each tab corresponds to a specific quarter and has an associated date range. When you select a tab, the [Avonni Data Table](/flow/flow-components/data-table.md) on the right side dynamically updates. It shows opportunities relevant to that quarter.

{% 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 %}

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

## Guided Steps

### Screen Flow Architecture

We're using the Avonni Header at the top to give the page a title. Below, we've divided the screen into two columns using a Section component.

* **Left Column:** This contains the [Avonni Tabs component](/flow/flow-components/tabs.md), which lets users select a specific quarter of the fiscal year.
* **Right Column:** This has the [Avonni Data Table](/flow/flow-components/data-table.md), which will show the opportunities related to the selected quarter.

The idea is that when a user clicks on a different quarter tab, the Data Table will automatically update to show the opportunities for that quarter.

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

### 1. Adding the Avonni Tabs component

* We'll use the Avonni Tabs component to represent each quarter of the year (Q1, Q2, Q3, Q4).
* Each tab will have a label for the quarter and the specific dates that the quarter covers.
* In our example, we created a custom Salesforce object called "Period" to store this information.
* We'll connect (map) the fields from that "Period" object to the matching attributes in the Avonni Tabs component.

<figure><img src="/files/MShoGCnhhv4MTOi1uFuf" alt=""><figcaption><p>Screen Flow structure</p></figcaption></figure>

### 2. Adding the Avonni Data Table component

* You can customize the table's appearance and the information it shows (like opportunity name, stage, amount).
* To make the table update automatically when someone selects a different quarter in the Avonni Tabs, we'll use the "Query Data Source" option for the Data Tabl

Drag the Avonni Data Table component onto your screen. This is where your list of opportunities will appear.

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

### 3. **Create a Formula for Dynamic Filtering**

To make the data table react to the tabs you select, we'll create a formula text variable. This formula acts like a filter that changes what's shown in the data table based on which tab you have active. Think of it as the "behind-the-scenes" communication between the tabs and the data table.

Here's an example of what the formula might look like

```
"CloseDate >= '" & TEXT({!tabs.activeTabSObjectValue.Start_Date__c}) & "' AND CloseDate <= '" & TEXT({!tabs.activeTabSObjectValue.End_Date__c}) & "'"
```

<figure><img src="/files/927JyZhaLZTiMe1aaQBw" alt=""><figcaption></figcaption></figure>

#### **Breaking down the formula**

**`"CloseDate >= '" & TEXT({!tabs.activeTabSObjectValue.Start_Date__c}) & "' AND CloseDate <= '" & TEXT({!tabs.activeTabSObjectValue.End_Date__c}) & "'"`**

* **CloseDate Comparison**:
  * `CloseDate >= '...`: This part checks if the opportunity's close date is on or after the start date of the selected quarter.
  * `... AND CloseDate <= '...`: This part checks if the opportunity's close date is on or before the end date of the selected quarter.
* **Using the Tab's Date Values**:
  * `TEXT({!tabs.activeTabSObjectValue.Start_Date__c})`: This retrieves the start date of the quarter selected in the tab. The `TEXT` function converts this date into text format. `tabs.activeTabSObjectValue` is the tab component attribute we're using.
  * `TEXT({!tabs.activeTabSObjectValue.End_Date__c})`: Similarly, this retrieves the quarter's end date and converts it into text format.
* **Combining the Conditions**:
  * The `AND` in the middle combines these two conditions. The formula only selects opportunities whose close dates fall between these start and end dates.

### 4. Mapped the formula for filter on the data table&#x20;

We've created a formula to filter the opportunities. Now, we need to connect this formula to the Data Table. This will change the list of opportunities in the Data Table automatically whenever a different quarter is selected in the Avonni Tabs.&#x20;

<figure><img src="/files/7Qp1EXwuyIGfxS33NyFQ" alt=""><figcaption></figcaption></figure>

### 5. Test and you're done

## **How It Works in Practice**

When you select a quarter tab, the formula dynamically updates to use that quarter's specific start and end dates. The Data Table shows only the opportunities whose close dates fall within this selected quarter.


---

# 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-build-a-reactive-quarterly-opportunity-tracker-component.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.