# Dynamic Opportunity Viewer

{% 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

This tutorial explains how to use Avonni's "[Set Component Visibility](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/getting-started/understanding-the-essentials/component-visibility)" to control which components appear in a Screen Flow. You'll learn to dynamically display different views of Opportunity data (like a [Data Table](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/data-table), [Map](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/map), [Kanban](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/kanban), or [List](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/list)) based on which button a user clicks in a menu. This allows you to tailor the user interface effectively.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FGsHcqtoyKDb5saK0AgWY%2F2025-04-03_21-45-28%20(1).gif?alt=media&#x26;token=207dcef5-b22d-4578-b651-a083d17ce83b" alt=""><figcaption></figcaption></figure>

## Guided Steps

### Step 1: Add the Card

We'll start by adding a [**Card**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/card) component. The Card will be the main **container** for our entire "Opportunity Views" component. It will hold the button menu that switches views and the area where the different data components (Data Table, Map, etc.) appear.&#x20;

1. **Add the Card:** Drag an Avonni **Card** component from the Component Library onto the canvas.
2. **Set the Title:** Select the Card component on the canvas. In the **Properties Panel** (right panel), find the `Title` property and enter a descriptive title (e.g., "Opportunity Views").
3. **Choose an Icon (Optional):** In the Card's properties, find the `Icon Name` property and select an appropriate icon (e.g., `standard:opportunity`).
4. Click the "**`Expand content to fit`**" toggle to remove any space around the items inside the card, aligning them directly with its edges.

### Step 2: Add the Button Menu Component

Next, we'll add a [**Button Menu**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/button-menu) component. This component will act as our **view switcher**, presenting buttons (like "Table", "Map", "Kanban") that allow users to select which visualization of the Opportunity data they want to see. The option the user selects here will determine which data component (Data Table, Map, etc.) is displayed later using dynamic visibility rules.

* **Add the Button Menu:** From the Component Library, drag a **Button Menu** component *inside* the Card component, dropping it into the **"Action" slot** (located in the top-right corner of the Card's header).
* **Configure Items Manually**
  * Select the Button Menu component you just added.
  * In the **Properties Panel**, locate the **`Menu Items`** section and add your menu items.
  * Add items representing the views you plan to create (we'll add the actual view components later). For each item:
    * Set the `Label`: This is the text the user sees on the button (e.g., `Table`, `Map`, `Kanban`, `List`).
    * Set the `Value`: This is a unique *internal identifier* for the button (e.g., `table`, `map`, `kanban`, `list`). W**e will use these exact `Value` later (in Step 4) to control the visibility of the corresponding data components.** Ensure they are unique and easy to remember (lowercase, no spaces recommended).

{% hint style="success" %}

## Handy TIP: Dynamic Button Menu Icon via Formula

To change your Button Menu's icon based on the selected item:

1. Create a **Formula** resource (Data Type: `Text`). In the formula expression, use nested `IF` statements to check `@YourButtonMenuApiName.value` and return the desired icon name string (e.g., `'utility:table'`) for each corresponding item `Value` (e.g., `'table'`). Include a default icon.
2. Select the **Button Menu** component.
3. In the Properties Panel, bind the **Icon Name** property to the Formula resource you created. The icon will now update dynamically with the selection.

<img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FocMADAzXg3aAy1ehFfWZ%2F2025-04-04_16-25-56.png?alt=media&#x26;token=6efcb042-4e07-4446-98b2-4ee1a1503e33" alt="" data-size="original">![](https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FjPJzrRs0pHRONPvoNSP0%2F2025-04-04_16-26-35.png?alt=media\&token=1faf6b92-3211-4c70-be57-3ca962cc242c)

```
IF(@YourButtonMenuApiName.value == 'table', 'utility:table',
  IF(@YourButtonMenuApiName.value == 'kanban', 'utility:kanban',
    IF(@YourButtonMenuApiName.value == 'grid', 'utility:tile_card_list',
      IF(@YourButtonMenuApiName.value == 'groupby', 'utility:summarydetail',
        IF(@YourButtonMenuApiName.value == 'calendar', 'utility:shift_pattern',
          IF(@YourButtonMenuApiName.value == 'map', 'utility:location',
            'utility:apps' // Default icon if no other value matches
          )
        )
      )
    )
  )
)
```

{% endhint %}

### Step 3: Add the Data Table View

Let's add the first component to display our Opportunity data – the Avonni **Data Table**. Remember, this table will initially be visible in the builder, but we'll later configure it to appear only when the "Table" button (from the Input Choice Set) is selected.

1. **Add the Data Table:** Drag an Avonni **Data Table** component from the Component Library *inside* the Card component, placing it *below* the Input Choice Set you added in Step 2.
2. **Configure the Data Source**
   * In the Properties Panel, set the **Data Source** to `Avonni Query Data Source`.
   * Click **Create a Query**.
   * **Object:** Select `Opportunity`.
   * **Filters (Optional):** Add any filters that should always apply to this table (e.g., filter by a specific Record Type or permanently exclude certain stages).&#x20;
   * Click **Save** to save the query.
3. **Configure Columns**
   * Go to the **Columns** section in the Properties Panel.
   * Click **Add Column** for each field you want to display.
   * For each column, select the appropriate **Source Field** from your query results.
   * You can adjust column Labels, Data Types, and other settings (such as sortable, filterable, and editable) as desired.

### Step 4: Set Data Table Visibility&#x20;

Let's make the Data Table appear *only* when the user selects the "Table" option in the Input Choice Set. This is the core of the dynamic behavior and ensures the table only loads when needed, optimizing performance. We'll do this by configuring the Data Table's `Set Component Visibility` property.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FtLTl4cC5Ug89JEOYGRVM%2F2025-04-04_11-59-25.png?alt=media&#x26;token=13a0b367-ddae-4bd6-8be0-6a1d354d13e8" alt=""><figcaption></figcaption></figure>

**How it Works:** The Data Table's visibility is now directly linked to the selected value in the Button Menu. When the user clicks the "Table" menu item, the condition (`@DataViewSelector.value == 'table'`) becomes `true`, and the Data Table appears (and its data loads). If any other option is selected, the condition becomes `false`, and the Data Table is hidden and not loaded.

### Step 5: **Add and Configure Other Data Views (e.g., Map)**.&#x20;

Repeat a similar process for any other data views you want to include, based on the options you created in your Input Choice Set (Step 3). We'll use the Map as an example pattern:

1. **Add the Component:** Drag the appropriate Avonni component (e.g., **Map**, **Kanban**, **List**) from the Component Library *inside* the Card component, alongside the Data Table.
2. **Configure the Component:** Set up its basic properties (like `API Name`) and configure its **Data Source** (e.g., create/select a query for Opportunities, ensuring you include necessary fields like location data for the Map). Also, configure any component-specific settings (like mapping Location Fields for the Map).
3. **Set Visibility Rule:** Select the new component (e.g., the Map) and find its `Visible` property in the Properties Panel. Configure a condition using **Component Attribute**:
   * Check if the `value` of your Input Choice Set component (e.g., `@DataViewSelector.value`) `equals` the *specific value* you defined for *this view's* button (e.g., `map`, `kanban`, `list`).

**Repeat this process** (Add Component -> Configure Basics -> Set Visibility Rule) for each view you included in your Input Choice Set.

This setup ensures that only the component whose visibility condition matches the currently selected button in the Input Choice Set is displayed and loaded, efficiently creating your dynamic view switcher.