Last updated
Was this helpful?
Build a powerful, interactive dashboard to track your tradeshow ROI within a reusable Avonni Dynamic Component!
This tutorial guides you through creating a component that lets users easily switch between views of:
Leads Generated: See all leads captured at the tradeshow.
Opportunities Created: Track opportunities directly linked to the tradeshow.
Closed-Won Revenue: Analyze the revenue generated as a result of the tradeshow.
You'll learn how to combine a (for visual structure), an (for view switching), and three (for displaying the data), along with dynamic component visibility to create a clean, efficient, and user-friendly dashboard.
Ensure these prerequisites are met before building components:
Install: Install the Avonni Dynamic Components package.
Avonni Dynamic Components User: For end-users.
Avonni Dynamic Components Admin: For component builders.
Open the Avonni Components App: From the Salesforce App Launcher (the nine-dot grid), find and open the "Avonni Components" application. Note: Ensure the Avonni Dynamic Components package is installed in your Salesforce org.
Create a New Component: On the "All Components" page (or similar), click the New button.
Name Your Component: Enter a descriptive name for your component (e.g., "...."). You can add an optional description as well.=
Add the Card: In the Component Library (left panel), find the Card component and drag it onto the canvas (the main central area).
Set the Title:
Select the Card component on the canvas.
In the Properties Panel (right panel), find the Title property.
Enter "Marketing Campaign Performance" as the title.
Choose an Icon (Optional):
In the Card's properties, find the Icon Name property.
Select an appropriate icon (e.g., standard:campaign).
Customize style (Optional)
Select the Style tab.
Select Title.
Customize the font, color or other styles as you want.
We'll use an Input Choice Set component to allow users to switch between different data views (Leads, Opportunities, Revenue).
Add the Input Choice Set:
Find the Checkbox Group component from the Component Library (named as Input Choice Set in the resources) and drag it inside the Card component, placing it in the header section.
Configure the Checkbox Group:
Select the Input Choice Set component on the canvas.
In the Properties Panel:
API Name: Give it a descriptive name (e.g., DataViewSelector).
Label: Enter a label (e.g., "Select Data to View:").
Type: Set the type to button.
Display as: Set it to row.
Data Source: Choose Manual.
Items (Manual Data):
Click the button/link to edit the Items (options).
Add three items, configuring each as follows:
Item 1:
Label: Leads Generated
Value: leads
Item 2:
Label: Opportunities Created
Value: opportunities
Item 3:
Label: Closed Won Revenue
Value: revenue
Important: The Value properties (leads, opportunities, revenue) are internal identifiers. We'll use these values in the visibility conditions of our Data Tables later. The Label properties are what the user sees.
We'll now add three separate Avonni Data Table components, one for each data view (Leads, Opportunities, Revenue). All three Data Tables will be placed within the Card component, but only one will be visible at a time, controlled by the Input Choice Set.
Add the Leads Data Table:
From the Component Library, drag an Avonni Data Table component inside the Card component, below the Input Choice Set.
API Name: Give it a descriptive name (e.g., LeadsTable).
Configure the Data Source:
Data Source: Avonni Query Data Source
Create a Query:
Object: Lead
Fields: Select the Lead fields you want to display (e.g., Id, FirstName, LastName, Company, Status, etc.). Include the Id field.
Filters (Optional): Add any static filters that should always apply to the Leads table (e.g., you might filter to show only unconverted leads). Do not add the filter based on the Input Choice Set here.
Configure Columns: Add and configure the desired columns in the Data Table's properties.
Set other Table Properties Like Pagination, search, and more.
Add the Opportunities Data Table:
Drag another Avonni Data Table component inside the Card component, below the Input Choice Set (and next to/below the Leads Data Table – their positions don't matter since only one will be visible at a time).
API Name: Give it a descriptive name (e.g., OpportunitiesTable).
Configure the Data Source:
Data Source: Avonni Query Data Source
Create a Query:
Object: Opportunity
Fields: Select the Opportunity fields you want to display (e.g., Id, Name, StageName, Amount, CloseDate). Include the Id field.
Filters (Optional): Add any static filters that should always apply to the Opportunities table. Do not add the filter based on the Input Choice Set here.
Configure Columns: Add and configure the desired columns.
Set other Table Properties Like Pagination, search, and more.
Add the Revenue Data Table:
Drag a third Avonni Data Table component inside the Card component.
API Name: Give it a descriptive name (e.g., RevenueTable).
Configure the Data Source:
Data Source: This one is a bit trickier, as it depends on how you want to calculate "Closed Won Revenue." Here are two common approaches, choose one:
Option A (Opportunity Data): If you simply want to show a table of closed-won Opportunities, use the same Data Source configuration as the OpportunitiesTable, but add an additional static filter: StageName equals 'Closed Won'.
Option B (Aggregate Data - More Advanced): If you want to show aggregated revenue data (e.g., total revenue by month, by salesperson), you'll likely need to:
Use an Avonni Query Data Source.
Create a query with aggregate functions (SUM, AVG, etc.) in your SOQL query (within the Query Data Source configuration). This is a more advanced topic.
Configure Columns: Add and configure the desired columns.
Set other Table Properties Like Pagination, search, and more.
At this point, all three Data Tables will be visible in the Component Builder. Using the Input Choice Set, we'll control their visibility in the next step.
Configure Visibility for the Leads Data Table:
Select the LeadsTable component (or whatever you named it) on the canvas.
In the Properties Panel, find the Set Component visibility property.
From the dropdown menu, select "All Conditions Are Met"
Select your Input Choice Set component (e.g., DataViewSelector).
Choose the value attribute.
Set the operator to equals
Set the value to leads. This is the value we assigned to the "Leads Generated" option in the Input Choice Set in Step 3.
Configure Visibility for the Opportunities Data Table:
Select the OpportunitiesTable component.
Repeat the same process as above, but this time set the value to be equals to opportunities.
Configure Visibility for the Revenue Data Table:
Select the RevenueTable component.
Repeat the same process as above, but this time set the value to be equals to revenue.
How it Works:
Each Data Table's Visible property is now bound to a condition that checks the value attribute of the DataViewSelector Input Choice Set.
Only the Data Table whose visibility condition evaluates to true will be displayed (and loaded). The others will be hidden.
When the user selects a different option in the Input Choice Set, the DataViewSelector.value attribute changes, the visibility conditions are re-evaluated, and the appropriate Data Table is shown/hidden.
A container component can significantly simplify your configuration if you need to show or hide multiple components under the same conditions. Instead of setting the Visible property on each individual component, you can:
Place Components Inside: Place all the components you want to show/hide together inside the Container.
Set Visibility on the Container: Set the Visible property of the Container component (binding it to a Variable, Formula, or Component Attribute, as described earlier).
Now, all components within the Container will inherit the Container's visibility. If the Container is visible, all its child components are (potentially) visible; if the Container is hidden, all its child components are also hidden (and not loaded). This is much more efficient than managing individual Visible properties for each component.
Save and activate your component.
Add your component to a page.
Test your component
Licenses: to users.
Permissions: Assign the :
Now, we'll make our component dynamic by of each Data Table based on the selection in the Input Choice Set.
Add a Container: Drag an onto your canvas.
This tutorial requires installing the Avonni Dynamic Components Package on your Salesforce org.