When I saw the release notes for Winter ’17, I was very excited about the ability to have two-column screens inside of Visual Flow. When I first published my release notes highlights, there wasn’t any documentation out on how this was going to work. Salesforce just published the Developer Documentation around the Winter ’17 Preview, and now we can start see the features with more clarity. So, let’s dive right into this new feature!
You can find the Developer Documentation here on this feature.
Pre-requisite: You must Enable Lightning Flow Runtime for Flows to be able to use this feature. From Setup, enter Process Automation Settings in the Quick Find box, then select Process Automation Settings. Select Enable Lightning Flow Runtime for Flows. Save your changes.
How can you use the Two-Column Layout?
Through a URL Parameter into your Flow, just like you would the Record ID or another variable. Take a look my post on How to write a URL for your Flow if you need a refresher here. It is going to look like this:
/flow/flowName?flowLayout=twoColumn
If you’re dropping your Flow into the Lightning App Builder using a Flow Component, you can also control the Layout in that component. Simply choose the Two-Column Layout in the Flow Component’s Layout selector. This defaults to One-Column (as you would expect).
How does the Two-Column Layout work?
Very similar to the standard Page Layouts. You can determine the order of the fields, and every field alternates from left to right. Be warned, it can look somewhat funky when you have fields that are not all aligned.
Things to keep in mind…
The Layout is for ALL Screens in your Flow
Let me reiterate this. When you select your Layout, this is for ALL Screens inside your Flow. You simply can’t control the column layout at the Screen level. Another thing to keep in mind, is you’re selecting the Layout when you’re using the Flow. This is all done in the URL or in the individual Flow Lightning Component – not when you Save or Activate your Flow.
Only available with the new Lightning Skin
Your Flow can be viewed in both Single and Double Column layouts. If you have a Flow exposed on a Visualforce Page, you will not be able to select Two-Column Layout (at this time). Flow’s launched by Visualforce will not use the new Lightning Skin, and thus this feature is not available.
Tab-key Order not customizable
You’re unable to change user’s Tab-key Order in the Two-Column layout. It is automatically set to Top-Down. If you’re not quite sure what I mean, the Tab-key Order is something that you’ve see in every Section Properties in a Page Layout. This is not a huge issue to me, but I think it could annoy your Power Users who use Tab-keys efficiently.
Responsiveness
The Two-Column layout doesn’t care what the size of the user’s screen is. Which means it is not mobile responsive. This is something you’re reminded of in the Lightning App Builder through a Help Bubble, but not when you’re using a URL parameter. Make sure you keep that in mind when you’re deciding to go with a Two-Column Layout.
Recap: The new feature of having Two-Column screens comes with some drawbacks. We’re not able to control Screens separately inside one Flow. Right now if you’ve got something that you want to be accessed through a URL button (and not a Visualforce Page housing the Flow), then this will be a great solution for you. I am hopeful this is just the beginning and we’ll soon be able to customize this at the Screen level, but we’ll see with time if I’m being overly optimistic.
Salesforce Sidekick 