Create Dynamic Expandable Sections

Overview

This tutorial shows you how to use the Avonni Expandable Section component to create cleaner, more organized screen flows. You'll learn how to dynamically hide and reveal content based on user interactions, creating a better user experience by displaying information only when needed.

What You'll Build: A screen flow where content appears only when users expand a section, and automatically hides when they collapse it. This creates a progressive disclosure pattern that reduces clutter and guides users through complex processes in a step-by-step manner.

Example Scenario: Imagine a customer service form where basic information is always visible, but additional optional fields (like "Shipping Address" or "Special Instructions") only appear when users expand the relevant section. This keeps the form simple while still providing access to all necessary options

Prerequisites

Before starting this tutorial, you should have:

• Basic familiarity with Salesforce Flow Builder

• Understanding of how to add components to a screen

• The Avonni Components for Screen Flows package is installed in your Salesforce org

Understanding How Expandable Sections Work

The Avonni Expandable Section has two states:

• Collapsed (Closed): The section header is visible, but the content inside is hidden

• Expanded (Open): Both the header and content are visible

The section has a property called closed that tracks its current state:

• closed = TRUE means the section is collapsed

• closed = FALSE means the section is expanded

The key concept: You can use this closed property to control the visibility of other components on your screen. When the section expands (closed becomes FALSE), you can make other components appear. When it collapses (closed becomes TRUE), those components hide again.

Step-by-Step Instructions

1

Create a Screen Flow

First, you'll create the foundation for your interactive screen.

1. Navigate to Flow Builder

   • Go to Setup in Salesforce

   • Search for "Flows" in the Quick Find box

   • Click Flows

2. Create a New Flow

   • Click New Flow

   • Select Screen Flow

   • Click Create

3. Add a Screen Element

   • The canvas appears

   • Click the + icon to add a new element

   • Select Screen

   • Give your screen a label (e.g., "Customer Information Form")

   • Click Done

What you've accomplished: You now have a blank screen where you'll add your expandable section and other components.

2

Add the Expandable Section Component

Now you'll add the component that users can expand and collapse.

1. Add the Component

   • In the screen canvas, look at the component palette on the left

   • Find Avonni Expandable Section

   • Drag it onto your screen

2. Configure Basic Settings

   • Click on the Expandable Section component to select it

   • In the properties panel on the right, configure:

     • Title: Enter the section header text (e.g., "Additional Information", "Shipping Details", "Advanced Options")

     • API Name: Note the auto-generated name (e.g., expsection1) - you'll need this later

3. Enable Collapsible Functionality

   • Find the Collapsible property

   • Check this toggle to enable it

   • This allows users to expand and collapse the section by clicking the header

   • Important: Without enabling this, the section will always be expanded and users won't be able to interact with it

4. Set the Initial State

   • Once you've enabled Collapsible, a new property appears: Closed

   • Find the Closed property (this determines if the section starts collapsed or expanded when the screen first loads)

   • Check this toggle to set it to enabled

   • This means the section will be collapsed (closed) by default when users first see the screen

   Understanding the options:

   • Collapsible checked + Closed checked: Section starts collapsed, and users can expand/collapse it

   • Collapsible checked + Closed unchecked: Section starts expande,d and users can expand/collapse it

   • Collapsible unchecked: The Closed option doesn't appear;the section is always expanded and cannot be collapsed

5. Recommended Configuration

   • ✓ Collapsible: Checked (enables expand/collapse functionality)

   • ✓ Closed: Checked (starts collapsed for a cleaner initial view)

What you've accomplished: Users will now see a collapsible section header on your screen. By default, it starts collapsed, keeping the screen clean and focused. When users click the header, the section will expand to reveal its contents.

3

Add Components That Will Show/Hide

Next, add the content you want to appear only when the section is expanded.

Add Your Components

• From the component palette, drag the components you want to show conditionally

• Place these components below the Expandable Section on your screen

Important: At this point, these components will always be visible. In the next step, you'll configure them to hide and show based on the state of the expandable section.

What you've accomplished: You've added the content that will be revealed when users expand the section.

4

Link Component Visibility to the Expandable Section

This is the critical step where you create the dynamic behavior. You'll configure your components to automatically show when the section expands and hide when it collapses.

Understanding the Logic

The Goal: Make components visible only when the Expandable Section is open.

How It Works:

• The Expandable Section has a closed property that tracks its state

• When expanded: closed = FALSE

• When collapsed: closed = TRUE

• You'll create a visibility rule: "Show this component only when closed is FALSE"

This creates automatic visibility updates as users interact with the section.

Configuration Steps

1. Select a Component

   • Click on one of the components you added in Step 3

2. Open Visibility Settings

   • In the properties panel, find Set Component Visibility

3. Create the Visibility Rule

   • Create a condition to display the component only when the closed attribute from the Expandable Section equals FALSE (meaning the section is expanded)

   Enter this visibility rule:

   {!expsection1.closed} EQUALS FALSE

• Replace expsection1 with your Expandable Section's actual API Name

1. Understanding the Formula

   • {!expsection1.closed} - References the Expandable Section's closed property

   • EQUALS FALSE - Checks if the section is expanded (not closed)

   • Result: Component appears when section is open, hides when collapsed

2. Apply to All Components

   • Repeat for every component you want to show/hide with the section

   • Use the same formula for all of them

What you've accomplished: Your components are now dynamically linked to the expandable section and will automatically show/hide as users interact with it

5

Save Your Flow and Test It

Finalize your interactive screen flow and ensure it functions as expected.

• Click 'Save' to preserve your flow configuration.

• Name your flow and add a description if necessary.

• To test your flow, click 'Debug' or 'Run'.

• Interact with the Expandable Section by expanding and collapsing it, and observe if the other components become visible or hide accordingly.

Following these steps, you've successfully created a dynamic and reactive screen using Avonni's Expandable Section within Salesforce's Flow Builder. This not only enhances the user experience by providing a cleaner, more focused interface but also empowers users to navigate complex data sets or processes in a more digestible manner. Happy building

Key Takeaways

• The Expandable Section has a closed property that tracks its state

• closed = TRUE means collapsed, closed = FALSE means expanded

• Use the visibility formula {!expsection1.closed} EQUALS FALSE to show components when the section is expanded

• Replace expsection1 with your actual Expandable Section's API Name

• Apply the same formula to all components you want to show/hide together

• The visibility updates automatically as users interact with the section

• This creates a cleaner, more focused user interface with progressive disclosure

Common Misconception Clarified

Misconception: "I should use {!expsection1.closed} EQUALS TRUE to show components when the section is open"

Reality: No! This is backward. The property is called "closed" (not "open"):

• When the section is open (expanded), closed = FALSE

• When the section is closed (collapsed), closed = TRUE

• To show components when open, check if closed EQUALS FALSE

Think of it this way: "Show this component when the section is NOT closed" = closed EQUALS FALSE

---

Following these steps, you've successfully created a dynamic and reactive screen using Avonni's Expandable Section within Salesforce's Flow Builder. This not only enhances the user experience by providing a cleaner, more focused interface but also empowers users to navigate complex data sets or processes in a more digestible manner. Happy building