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
