Salesforce Flow is one of the most powerful automation tools available in Salesforce. Among all flow types, Screen Flow is widely used because it allows users to interact with a custom user interface without writing code.
When we create a Screen Flow, all fields are usually displayed in a single column by default. However, in real business scenarios, long single-column forms can look confusing and difficult for users to complete.
To improve the user experience, Salesforce provides the Section component, which allows us to create multi-column layouts such as two-column or three-column screens.
In Salesforce, a Screen flow is a user-interactive flow in which the user directly interacts with the UI it creates.
For example, if a user wants to create a Lead record, they must enter the required fields in the UI generated by the screen flow.
In this tutorial, we will learn about screen flows and build a multi-column screen in Salesforce Flow: Screen with Two Columns. Using an example, I will also explain how to create a two-column screen with Screen Flow.
What is a Screen Flow in Salesforce?
A Screen Flow is a type of Salesforce Flow that allows users to interact with screens during the automation process.
Unlike Record-Triggered Flows that run in the background, Screen Flows display a user interface where users can enter information, select values, upload files, or review records.
Screen Flows are commonly used for:
- Record creation forms
- Guided data entry
- Employee onboarding
- Approval request forms
- Customer support forms
- Multi-step business processes
The Screen element is the most important part of Screen Flow because it allows us to display components such as:
- Text fields
- Picklists
- Checkboxes
- Date fields
- File upload
- Data tables
- Repeater components
- Sections and columns
Why Use Two Columns in Salesforce Screen Flow?
Using a two-column layout makes the flow screen cleaner and easier to use. Instead of showing all fields vertically in one long form, related fields can be displayed side by side.
For example:
- First Name and Last Name
- Email and Phone
- Billing City and Billing State
This improves readability and reduces scrolling.
Benefits of Multi-Column Screen Layouts
- Better User Experience
- Users can quickly understand and complete the form because related fields are grouped together.
- Professional UI Design
- A multi-column layout looks more modern and organized compared to a long single-column form.
- Reduced Scrolling
- Displaying fields side by side reduces screen real estate and improves navigation.
- Faster Data Entry
- Users can enter information more efficiently because the layout looks compact.
- Easy Grouping of Related Fields
- Contact, address, and account details can be properly grouped.
Create a Screen with Two Columns in Salesforce Flow
In the steps below, I will explain how to create a 2-column screen.
1. Log in to Salesforce Org. -> Click on the Setup -> Home Tab -> In Quick Find Box, Search for Flows. You will see an option under Process Automation -> Click on Flows.
2. Then, click on the New Flow button to create a new flow. Create a flow with the Screen Flow component. Click it, then click the Create button.
3. Now, we have to add a Screen to the Canvas. To do that, click on the Elements tab in the Toolbox. You will see the Screen element under the Interaction drag-and-drop screen component on Canvas.
- Then, enter the Label and API Name into the Screen component.
4. We can also configure the Screen Footer. You can see I have used a Custom Label for the Next button as Save, and also hidden the Previous button.
5. Now, we need to create some fields. For that, add Section Components from the left sidebar to the screen section. Using the section component, we can create multiple columns on the screen and make sections collapsible.
Then, drag and drop the Section Component. To add the columns and set up the following settings:
- Include Header: Here, we can give the Section a name and enter a Label for it. The API Name will automatically populate according to the label.
6. Configure Columns: Here, we have an Add Column button. When we click on it, the column is added to the section. We can manage the column width as needed.
7. To fetch the picklist values, we need to create a New Resource. Select Picklist Choice Set as the resource type and enter the API Name it will use to assign the screen picklist field.
- Select the Object on which that picklist field is present and select Data Type as Picklist. Then, select the picklist field label from the object. Here, I have selected the Account object, and the Type field is the picklist field on the object.
8. The Component Type will be the Picklist, and here, you need to select the resource created by the Picklist Choice Set. We need to apply this to the Choice field.
9. You can see we have added fields in the screen element, but this time, we have applied the Section Component and added fields on the section component. Using that, we have created a Multi-Column Screen element. Then click on the Done button.
10. Now we need to add the Create Records element to create the records. To do that, click on the ‘+ Add Element‘ icon and select Create Records. Then, enter the Label and API Name into the element.
- We will create one record at a time for the ‘select one record to create’ option.
- When creating records from the screen element, we need to use separate resources and literal values for the fields we added to the screen component.
- Select the Object on which you are going to create records. Here, I have selected the Account object.
11. In the section Set Values for the Account, we set the values for the object fields. Here, we will set the values that we created in the screen element. Now we will map the Account Fields with their Values.
- I have set object fields Name, Type, and Email with the respective values we created in the Screen element’s choice part. Map the Account fields to the created Screen Component fields, using their API Names.
12. After setting up all labels and conditions, click the Save button to save the flow. For that, we need to enter the Flow Label. The API Name will automatically populate as we click the text box. The Description is optional; we can introduce our flow shortly.
13. After saving the flow, click on the Debug button. Then click on the Activate button; always remember to debug the flow before activating it. It’s good practice to use flow.
- As you click on the Debug button, you will see that the Screen Component we created using the Section component is divided into a Multi-Column Screen.
Then, you need to add Screen Flow to the Lightning Homepage to create the records.
You can read the whole article on How to Call a Flow From a Button in Salesforce | How to Launch a Flow From a Button in Salesforce.
This is how we can build a multi-column screen using Salesforce Flow.
Single Column vs Two Column Screen Flow in Salesforce
| Feature | Single Column | Two Column |
|---|---|---|
| User Experience | Basic | Better |
| Scrolling | More | Less |
| Readability | Lower | Higher |
| Professional Design | Simple | Modern |
| Data Entry Speed | Slower | Faster |
| Field Organization | Limited | Better |
Frequently Asked Questions
1. Can we create more than two columns in Salesforce Flow?
Yes, Salesforce allows multiple columns using the Section component. You can create:
1. Two columns
2. Three columns
3. Custom-width layouts
However, too many columns may reduce readability.
2. Which component is used to create columns in Screen Flow?
The Section component is used to create multi-column layouts in Salesforce Screen Flow.
3. Can we make sections collapsible?
Yes, the Section component supports collapsible sections, which improves user experience for long forms.
4. Does the multi-column layout work on mobile devices?
Yes, but Salesforce automatically adjusts the layout for smaller screens. Always test flows on mobile devices before deployment.
5. Can we use dynamic visibility in multi-column layouts?
Yes, conditional visibility works perfectly with multi-column screens.
6. Is coding required to create two-column layouts?
No, Salesforce provides a no-code Section component for creating multiple columns.
Conclusion
Salesforce Screen Flow is a powerful no-code automation tool that enables the creation of interactive user experiences.
Using the Section component, we can easily build two-column or multi-column layouts that improve readability, reduce scrolling, and provide a professional interface.
Multi-column screen layouts are especially useful when collecting large amounts of user information because they make forms cleaner, more organized, and more user-friendly.
By following best practices such as grouping related fields, using proper spacing, and testing on multiple devices, you can create highly optimized screen flows in Salesforce.
You may like to read:
- Migrate Workflows and Process Builder to Salesforce Flow
- Automatically Assign PricebookId to Opportunities using Salesforce Flow
- How to Bypass Validation Rules Using Salesforce Flow
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
