Last Updated on April 26, 2022 by Rakesh Gupta

Big Idea or Enduring Question:

• How do you create a screen flow with collapsible sections? 

Objectives:

After reading this blog, you’ll be able to: 

• Add a section to the screen element
• Make a section in the screen flow collapsible 
• and much more

Business Use case

Arda Turan is working as a System Administrator at Gurukul on Cloud (GoC). Arda wants to create a screen flow with collapsible sections as per the below screenshot:

Automation Champion Approach (I-do):

After the recent release salesforce now allows us to make a section collapsible without writing any code. 

Before discussing the solution, let me show you a diagram of a Process Flow at a high level. Please spend a few minutes going through the following Flow diagram and understand it.

Let’s begin building this automation process.

Guided Practice (We-do):

There are 4 steps to solve Arda’s business requirement using Screen Flow. We must:

1. Define Flow properties for screen flow
2. Add a screen to capture the user’s input
   1. Add a Phone component to capture the user’s input for the phone number
   2. Add a Text component to capture the user’s input for the city
3. Add a section to display personal information fields and make it collapsible
4. Add a section to display mailing address fields and make it collapsible    

Step 1: Define Flow Properties   

1. Click Setup.
2. In the Quick Find box, type Flows.
3. Select Flows then click on the New Flow.
4. Select the Screen Flow option and click on Create and configure the flow. 
5. It will open the flow designer for you.

Step 2: Add a Screen Element to Capture the User’s Input  

1. On Flow Designer, click on the +icon and select the Screen element.
2. Input the following information:
   1. Enter Label the API Name will auto-populate.
3. Click Done. 

Step 2.1: Add a Phone Component to Capture the User’s Input for Phone Number

1. Under the Input section on the Screen Element, drag and drop the Phone component onto the screen. 
2. Input the following information:
   1. Enter a name in the API Name field; the Label will auto-populate.
   2. Required: {!$GlobalConstant.True}
3. Click Done.

Step 2.2: Add a Text Component to Capture the User’s Input for the City

1. Under the Input section on Screen Element, drag and drop the Text component onto the screen. 
2. Input the following information:
   1. Enter a name in the Label field; the API Name will auto-populate.
   2. Select Require checkbox.
3. Click Done.

Step 3: Add a Section to Display Personal Information Fields and Make it Collapsible 

1. Under the Display section on Screen Element, drag and drop the Section component onto the screen. 
2. Input the following information:
   1. Select the Include Header checkbox.
   2. Enter a name in the Label field; the API Name will auto-populate.
3. Click Done.

Step 4: Add a Section to Display Mailing Address Fields and Make it Collapsible 

1. Under the Display section on Screen Element, drag and drop the Section component onto the screen. 
2. Input the following information:
   1. Select the Include Header checkbox.
   2. Enter a name in the Label field; the API Name will auto-populate.
3. Click Done.

In the end, Arda’s Flow will look like the following screenshot:

Once everything looks good, perform the steps below: 

1. Click Save.
2. Enter Flow Label the API Name will auto-populate.
3. Click Show Advanced.
4. API Version for Running the Flow: 55
5. Interview Label: Collapsible Sections Example {!$Flow.CurrentDateTime}
6. Click Save. 

Almost there! Once everything looks good, click the Activate button.  

Proof of Concept

From now onwards, when users run the Flow they will see the section collapsible, as shown below!

What a wonderful learning journey this was!!! With little creativity, we can push many boundaries! Happy journey!

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.