Go with the Flow with Flexible Column Layout

The Beacon nugget, Learning Floorplans – and Layouts, Too, explained the difference between layouts and floorplans. The flexible column layout (FCL) can display up to three floorplans on a single page in a flexible and responsive way. FCL offers a high overall performance since the page stays the same while navigating. Since no new pages need to be loaded, the user experiences a smooth flow.

Lots of options: it’s flexible!

FCL can contain up to three columns, each displaying a different floorplan. It is supposed to be used for master-detail or master-detail-detail use cases from left to right, going from basic info to deeper details.

FCL adapts to the screen sizes of desktops, tablets, and phones. Whereas desktops have enough space for up to three columns, tablets provide a desktop-like experience by displaying two columns. For optimal readability, phones show one column at a time.

Size L/ XL (desktop) offers 5 layouts

Size M (tablet) offers 3 layouts

Size S (phone) offers 1 layout

How to interact with FCL

You can easily adjust the current layout to its needs with a few actions.

The Layout Arrow expands the width of a column. It is located next to the divider and points in the direction in which a column can be expanded. By default, the width is 33% for the second column and 25% for the third.

The Close icon closes the last (rightmost) column. If you close the second column while the third column is minimized, both columns are closed. A dialog can appear to warn the user about losing unsaved data.

The Enter Full Screen switches the rightmost column to full screen mode. In full screen, using Exit Full Screen switches back to the multi-column view.

As an SAP Fiori element, FCL already includes these actions plus routing behavior.

Going forward

Drilling in or navigating forward opens a new column. The forward and backward browser navigation works, too. As you can see below, the freshly opened column is initially displayed in minimized mode.

Exemplary forward navigation starting with full screen on size XL/ L

Exemplary forward navigation starting with full screen on size M

Forward navigation on size

Backward navigation

Depending on the last action, Back closes a column or exits the full screen mode.
However, Back does not restore layout changes (such as switching from 33% + 67% to 67% + 33%) neither reopens columns that were closed via close (X).

Exemplary backward navigation on size M

For more details, please check out the article in the SAP Fiori design guidelines.

Many thanks to ux designer and layouts expert Jan-Michel Blinn!

Be the first to leave a comment

You must be Logged on to comment or reply to a post.