How To Add Section Headers To Flow Screens In Salesforce

Salesforce Flow has emerged as the most effective tool for creating business automation processes. The platform’s intuitive interface allows anybody, irrespective of their skill level, from beginners to expert administrators, to craft tailored processes. As Workflow Rules and Process Builder are obsolete, Salesforce Flow has become the preferred go-to automation tool, generating significant curiosity and demand in the Salesforce world.

Among the many features Salesforce Flow provides, one of the most valuable enhancements in the Salesforce Summer ‘22 release is screen flow section headers. This major upgrade enhances the user experience by making the flow screens less cluttered, attractive, and user-friendly. 

In this blog, we will discuss section headers and how to add them to your Salesforce Screen Flows.

Overview Of Salesforce Screen Flow

A Screen Flow in Salesforce is a specific type of flow that presents various instructions, prompts, and input fields to the user as the user goes through the steps in the flow. Screen Flows enable you to:

• Display instructions or scripts for users.
• Request the user to fill out specific fields.
• Trigger automated actions in the background.

Screen flows can be launched from Salesforce Lightning pages, Experience Cloud sites, and quick actions. Their major advantage is a streamlined, step-by-step interface that makes a process easier for the user. It enhances user experiences by reducing the chances of mistakes and the amount of training required. 

Introduction To Section Headers In Screen Flows

Salesforce Flow’s recently added section header feature creates a visual hierarchy to screen flows, enhancing the usability of complicated workflows. Section headers enable logical divisions instead of long forms that must be filled from the top to the bottom. 

Collapsible headers allow a user to expand or collapse a section of the headers where necessary, reducing unnecessary visual distractions and allowing the user to focus on what’s important.

Key Benefits of Section Headers:

• Improved Visual Hierarchy: Key sections are highlighted for a clear, guided flow.

• Collapsible Sections: Expand or collapse sections to reduce clutter.

• Enhanced User Experience: Organized screens make forms less overwhelming.

Define Flow Properties for Screen Flow 

1. Add a screen that will capture the user’s input.

2. Add a section to display personal information fields and make it collapsible.

3. Add a Name component to capture the Name input for the phone number.

4. Add a Phone component to capture the user’s input for the phone.

5. Add a section to display mailing address fields and make it collapsible.

Steps To Add Section Headers To Flow Screens

Step 1: Define Flow Properties 

=> Click Setup.

=> Go to the Quick Find box, then type Flows.

=> After you select Flows, click on New Flow.

=> Select the Screen Flow option. Then you click on Create to configure the flow.

=> Next, it will open the flow designer for you.

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

=> On Flow Designer, click on the +icon. Next, select the Screen element.

=> Input the following information:

=> Next, enter Label, and the API Name will get auto-populated.

=> Click Done.

Step 2.1: 

=> Now add a Phone Component to Capture the User’s Input for the Phone Number.

=> Next, drag and drop the Phone component onto the screen under the Input section on the Screen Element.

=> Input the following information:

=> Now, enter a name in the API Name field; the Label gets auto-populated.

=> Required: {!$GlobalConstant.True}

=> Click Done.

Step 2.2: 

=> You add a Text Component to Capture the User’s Input for the City.

=> Next, drag and drop the Text component to the screen under the Input section on Screen Element. 

=> Now input the following information:

=> Next, enter a name in the Label field to auto-populate the API Name.

=> Select Require checkbox.

=> Then Click Done.

Step 3: 

=> Now add a Section to Display Personal Information Fields and make it Collapsible

=> Next, drag and drop the Section component onto the screen under the Display section on Screen Element.

=> Input the following information: Select the Include Header checkbox.

=> Now enter a name in the Label field, and the API Name will auto-populate.

=> Click Done.

Step 4: 

=> Next, add a Section to Display Mailing Address Fields and make it Collapsible

=> Then, drag and drop the Section component onto the screen under the Display section on Screen Element.

=> Input the following information: Select the Include Header checkbox. Enter a name in the Label field; the API Name will auto-populate.

=> Click Done.

In the end, Flow will look like the below screenshot:

Click Save.

=> Next, enter the Flow Label, and the API Name auto-populates.

=> Click Show Advanced.

=> Take the API Version for Running the Flow as 55

=> Interview Label: Collapsible Sections 

Example {!$Flow.CurrentDateTime}

=> Click Save

Flow Trigger Explorer

Another powerful feature introduced in Salesforce Summer ’22 is the Flow Trigger Explorer. It gives a comprehensive overview of each record-triggered flow, helping you manage and troubleshoot flows more effectively.

What Is Flow Trigger Explorer?

Flow Trigger Explorer is a tool in Salesforce that allows you to simultaneously see all the Record-Triggered Flows for a particular object. This feature is handy for administrators who want to manage the automation triggers depending on the record changes.

Key Features of Flow Trigger Explorer:

• Fast Field Updates: Shows pre-save record-triggered flows, sorted by label.

• Actions and Related Records: Displays post-save flows organized by label.

• Run Asynchronously: Lists background flows to enhance performance for complex processes.

How to Use the Flow Trigger Explorer?

Let’s see the Flow Trigger Explorer in action. 

Step 1: Click on Setup, then search for Flows. Then you view the Flow Trigger Explorer button at the top of the page.

Step 2: Clicking the Flow Trigger Explorer button will look like the page below.

Step 3: You can click on Account text to see the drop-down for other objects. Once you click on the Created option, it will show the created, updated, and deleted options.

Note: Another excellent option is after you click on the drop-down next to your flow, it shows versions associated with the Flow inside the panel.

Finally, you can open the Flow Trigger Explorer from Record Triggered Flows, as displayed on the screen below.

Conclusion 

Salesforce Flow updates have transformed it into an essential automation tool, especially with the addition of section headers and the Flow Trigger Explorer in the Summer ’22 release. These features enhance usability and organization, making Flows more intuitive and easier to navigate.

Adding section headers to Screen Flows helps you create visually appealing, structured screens that guide users efficiently through processes. Similarly, the Flow Trigger Explorer allows users to view and keep track of all Record-Triggered Flows without having to go into details of each record-triggered flow.

Be it Classic or Lightning Experience, this feature works across all Salesforce editions, such as Enterprise, Essentials, Professional, Developer, and Unlimited Editions.

So, if you want to optimize your Salesforce flows and improve the user experience, adding section headers is a great place to start! Need assistance in getting started? Partner with a top-rated CRM consulting company to streamline your processes, boost sales, and transform customer relationships effortlessly. From setup, implementation, and integration to optimization, our team has the expertise to solve all your technical challenges & help you unlock the full potential of your business.  Ready to see our cutting-edge CRM services & in action & explore value-adding, affordable packages? Contact us today and kickstart your journey to CRM success!