# Dynamic Tradeshow Campaign Performance Dashboard

{% hint style="warning" %}
This tutorial requires installing [**the Avonni Dynamic Components Package**](https://appexchange.salesforce.com/appxListingDetail?listingId=e855ec28-bf2c-47fa-aa38-30b43948ab4f) on your Salesforce org.
{% endhint %}

## **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](/dynamic-components/components/card.md) (for visual structure), an [Input Choice Set](/dynamic-components/components/checkbox-button.md) (for view switching), and three [Data Tables](/dynamic-components/components/data-table.md) (for displaying the data), along with *dynamic component visibility* to create a clean, efficient, and user-friendly dashboard.

<figure><img src="/files/lSXhM69nUPc2xvokCZDd" alt=""><figcaption></figcaption></figure>

## Guided Steps

### <mark style="background-color:orange;">Before You Begin - Installation and Setup</mark>

Ensure these prerequisites are met before building components:

1. **Install:** Install the Avonni Dynamic Components package.
2. **Licenses:** [Assign licenses](/dynamic-components/getting-started/installation-and-licenses-management.md#assigning-licenses) to users.
3. **Permissions:** Assign the [appropriate permission sets](https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/SNMAyDAWw0B5vTIXtrZS#id-3.-assigning-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** <a href="#step-2-add-and-customize-the-card-component" id="step-2-add-and-customize-the-card-component"></a>

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.

<figure><img src="/files/t8nLmj5OEWRcdMf1giVs" alt=""><figcaption></figcaption></figure>

### **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.

{% hint style="warning" %}

## Important Note

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.
{% endhint %}

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

Now, we'll make our component dynamic by [controlling the visibility](/dynamic-components/core-concepts/component-visibility.md) 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](#step-3-add-and-configure-the-input-choice-set-data-view-selector).
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`.

<figure><img src="/files/iQJAZmw9hpOpSXEuyVUA" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}

## Tip: Simplifying Visibility Control with Containers

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:

1. **Add a Container:** Drag an [Avonni Container component](/dynamic-components/components/container.md) onto your canvas.
2. **Place Components Inside:** Place *all* the components you want to show/hide together *inside* the Container.
3. **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.
{% endhint %}

### **Step 6: Test**

* Save and activate your component.
* Add your component to a page.
* Test your component

{% @arcade/embed flowId="ApD2Sr11jVEcRTrWEvUh" url="<https://app.arcade.software/share/ApD2Sr11jVEcRTrWEvUh>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/dynamic-tradeshow-campaign-performance-dashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.