How to add components into an expandable section

Introduction

Tired of cluttered screens? The Avonni Expandable Section component helps you create a cleaner, more organized user interface. This component lets you hide or show sections of content based on specific conditions, improving the flow of your Salesforce apps.

In this guide, we'll show you how to use the Expandable Section to:

• Enhance user experience by decluttering your screens.

• Display content only when it's relevant to the user.

• Create dynamic interactions using the Reactive Screens feature in Flow Builder

Tutorial Steps:

1. Create a Screen Flow

Start by building the foundation of your user interaction.

• Navigate to the Salesforce's Flow Builder.

• Click on 'New Flow'.

• Select 'Screen Flow' from the options and click on 'Create'.

• You'll be presented with a canvas where you can drag and drop elements to build your flow.

2. Drag and Configure the Avonni Expandable Section

Integrate the Expandable Section .

• Drag and drop the 'Avonni Expandable Section' from the elements panel onto the canvas.

• Click on the Expandable Section element to configure its properties via the "Open Component Builder".

• Ensure the 'Closed' attribute is checked. This ensures that the section is collapsed by default, and the user can expand it.

3. Drag and Configure Other Components

Add the components you want to be dynamically visible based on the Expandable Section’s state.

• Again, from the elements panel, drag and drop the components you wish to reveal upon expanding the section.

• Place these components below the Expandable Section to maintain a logical flow in the user interface.

4. Configure the Set Component Visibility Settings

This critical step links the visibility of the components to the state (open/closed) of the Expandable Section.

• Select the components that you want to be conditionally visible.

• Navigate to the component's visibility settings.

• Configure the visibility formula to {!expsection1.closed} IS NULL > TRUE.

  • !expsection1.closed references the state of the Expandable Section (replace 'expsection1' with the actual API name of your Expandable Section).

  • IS NULL > TRUE is used to check if the section is open (not closed).

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