Setting Up Dynamic Content with Reactivity

Introduction

The Avonni Expandable Section component improves Salesforce interfaces by displaying content dynamically. It reveals or conceals components depending on specific conditions, making the interface cleaner and more user-friendly. This guide demonstrates how to use the Expandable Section to enhance user interaction and effectively arrange components. It focuses explicitly on displaying components within an expandable section, utilizing the Reactive Screens feature from 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