Dynamic Opportunity Viewer

Overview

This tutorial explains how to use Avonni's "Set 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, Map, Kanban, or List) based on which button a user clicks in a menu. This allows you to tailor the user interface effectively.

Guided Steps

Step 1: Add the Card

We'll start by adding a 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.

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 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). We 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).

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
          )
        )
      )
    )
  )
)

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

   • 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

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.

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

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.