Experience Cloud Docs AppExchange Listing

How to build a reactive 'Quarterly Opportunity Tracker' component

In this example, we use the Avonni Tabs component 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 on the right side dynamically updates. It shows opportunities relevant to that quarter.

Guided Steps

1. Adding the Avonni Tabs component

  • Using the Avonni Tabs for Quarter: Each tab is labeled for a quarter (Q1, Q2, Q3, Q4), with dates defining that quarter.

2. Display Your Data with the Avonni Data Table Drag and drop the Avonni Data Table component into your screen flow. This is where your list of opportunities will be shown. You can customize how the data table looks and what information it displays (e.g., opportunity name, stage, amount).

3. Create a Formula for Dynamic Filtering To make the data table react to the tabs you select, we'll create a special formula. 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

4. Mapped the formula for filter on the data table

5. Test and you're done

6. sdfsf

1. sdfsf

  • Reactive Data Table: Upon selecting a tab, the Data Table on the right becomes reactive.

  • The formula for Filtering: This formula filters opportunities based on their close dates. It checks if an opportunity's close date falls within the start and end dates of the selected quarter.

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

  • Displaying Opportunities: As a result, the Data Table displays all opportunities where the close date is between the start and end dates of the selected quarter.

Breaking down the formula

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

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

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

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

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.

Last updated