How to build a reactive 'Quarterly Opportunity Tracker' component
Last updated
Last updated
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.
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, which lets users select a specific quarter of the fiscal year.
Right Column: This has the Avonni Data Table, 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.
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.
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.
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}) & "'"
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.
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.
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.
