Building a Dynamic Metrics Dashboard with the Data Table
Last updated
Last updated
This tutorial guides you through building a reactive dashboard in Avonni Flow, featuring dynamic metrics that respond to data table selections.
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.
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.
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.
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.
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.
Add Metric Components: Drag three "Metric" components into the section, one per column.
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).
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:
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.
Connect the Formula to the Metric: Use the formula text variable in the "Where Clause" field in the metric component's query configuration.
Repeat steps 3 and 4 for the remaining two metric components, adjusting the object, field, and aggregate function as needed.
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.