Dynamic Tradeshow Campaign Performance Dashboard

Overview

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 Card (for visual structure), an Input Choice Set (for view switching), and three Data Tables (for displaying the data), along with dynamic component visibility to create a clean, efficient, and user-friendly dashboard.

Guided Steps

Before You Begin - Installation and Setup

Ensure these prerequisites are met before building components:

1. Install: Install the Avonni Dynamic Components package.

2. Licenses: Assign licenses to users.

3. Permissions: Assign the appropriate permission sets:

   • Avonni Dynamic Components User: For end-users.

   • Avonni Dynamic Components Admin: For component builders.

Step 1: Create a New Dynamic Component

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

2. Create a New Component: On the "All Components" page (or similar), click the New button.

3. Name Your Component: Enter a descriptive name for your component (e.g., "...."). You can add an optional description as well.=

Step 2: Add and Customize the Card Component

1. Add the Card: In the Component Library (left panel), find the Card component and drag it onto the canvas (the main central area).

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

3. Choose an Icon (Optional):

   • In the Card's properties, find the Icon Name property.

   • Select an appropriate icon (e.g., standard:campaign).

4. Customize style (Optional)

   • Select the Style tab.

   • Select Title.

   • Customize the font, color or other styles as you want.

Step 3: Add and Configure the Checkbox Group (Data View Selector)

We'll use an Input Choice Set component to allow users to switch between different data views (Leads, Opportunities, Revenue).

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

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

Step 4: Add and Configure the Data Tables (Leads, Opportunities, Revenue)

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.

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

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

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

Step 5: Configure Dynamic Visibility (Input Choice Set Controls Data Tables)

Now, we'll make our component dynamic by controlling the visibility of each Data Table based on the selection in the Input Choice Set.

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

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

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

Step 6: Test

• Save and activate your component.

• Add your component to a page.

• Test your component