Multi-Column Screens Generation in Flow 

Share on facebook
Share on twitter
Share on linkedin

Flow Builder – Salesforce Configuration 

Flow Builder is used to automate complex business requirements in a simpler way. There are several enriched features in flow, like executing the business logic based on the prior value of the data apart from the current value and creating multi-column screens and, so on.  

Multi-column screens 

In Summer ’21 Release, Salesforce released a new feature called Section component to split the flow screens into multiple columns. This new feature will reduce the effort in scrolling the large forms and has the capability to add images in the screen. The multi-column screens layout will be responsive such that it fits for mobile devices also.  

Example 

Let us consider a Human Resource team needs to collect the employee details. So, the team requests each employee to supply the details using the below form. 

Continuation of the form 

Here the form displays only a few fields in the screen initially. The user needs to scroll down to fill the remaining fields. To reduce the scrolling effort made by the employee, the form can be divided into multiple columns using the Section Component. 

Steps to generate multi-columns flow screen 

Please follow the below steps to generate the multi-column screens in flow builder using the section component. 

Step 1: Drag the Section component into the screen. 

Step 2: Click the Add Column button to add a column. Maximum of four columns can be added in a row. Divide the Employee Details form as two column screens as follows. 

The columns can be divided equally in length as shown as in the above screen. The columns can be divided in inequal lengths using the width adjustments.  

  • For 2 columns screen, the width can be chosen from the range (1 of 12, 2 of 12,3 of 12 … 11 of 12). Below form has width as 3 of 12 for the first column and 9 of 12 for the second column. 
  • For three columns screen, the width can be chosen from the range (1 of 12, 2 of 12,3 of 12 … 7 of 12). Below form has width as 4 of 12 for the first column, 2 of 12 for the second column and 6 of 12 for the third column. 
  • For four columns screen, the width can be chosen from the range (1 of 12, 2 of 12,3 of 12 … 5 of 12). Below form has width as 3 of 12 for the first column, 3 of 12 for the second column, 4 of 12 for the third column and 2 of 12 for the fourth column. 

Step 3: For the employee details form, let us divide the screen into two columns with equal distribution. Drag the fields into the respective sections and arrange them in the order in which they need to appear.  

Step 4: click on Done and Save the flow. 

After adding the necessary fields by splitting them in the two columns of the section component, the Employee Details form would look as in the below screenshot. 

Summary 

Thus, the employee details form has been divided into two column screens using the screen component. Likewise, the large forms can be divided into multiple columns using the screen component and the effort in scrolling the form to view the remaining form elements is reduced to the users. Also, the generated multi-column forms would be visually appealing. 

Reference Links 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.