Updated: March 17, 2021

SAPUI5 Version 1.46

Flexible Column Layout (Layout + SAP Fiori Elements)

sap.f.FlexibleColumnLayout

Intro

The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows a faster and more fluid navigation between multiple floorplans compared to the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (panels). Depending on which panel the user is focused on, it can get prioritized (wider). The user can also switch between different layouts and view the last panel in full screen.

Flexible column layout - Example with three panels

The flexible column layout behaves responsively, which makes it suitable for mobile devices as well as for desktops. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As layout container, it does not provide any content itself.

The flexible column layout is already incorporated within SAP Fiori elements.

Usage

Use the flexible column layout if:

You want to create a master-detail or master-detail-detail scenario in which the user can drill down or navigate.

Do not use the flexible column layout if:

You want to build a workbench or tools layout. The flexible column layout is not meant to provide a main panel with additional side panels on the left and/or right. If you want to display additional content to enrich the main content and to help the user better perform his/her tasks, please use the dynamic side content instead.
You want to create a dashboard with context-independent pages.
You want to open multiple instances of the same object type. Please use the multi-instance handling floorplan instead.
You want to split a single object into multiple panels, or you want to display a small amount of information.
You want to embed the SAP Fiori launchpad or overview page into one of the panels.

Structure

As with all layouts, the flexible column layout is embedded in the shell bar of the SAP Fiori launchpad. From the shell bar, users have access to the launchpad services, including the home page, search, settings, and help. Apps are embedded in the shell and have little influence over its features. The shell bar also provides the back navigation and the app title, including the navigation menu.

Depending on the current layout and display size, the flexible column layout consists of one, two, or three horizontally-aligned columns. Each column contains content which is not provided by the flexible column layout itself. The flexible column layout is not restricted to a specific floorplan as long as the desired floorplan is responsive down to phone size. However, we recommend using the dynamic page.

Information

It is not possible to use the SAP Fiori launchpad or the overview page in one of the panels.

Possible Layouts

To provide the user a better overview, the flexible column layout offers different layouts with one, two and three panels. Depending on the screen size, up to five different base layouts are available.

Flexible column layout - Structure example (25%, 50%, 25%)

Size XL and L (Desktop)

There are five different layouts in size XL and L: The full screen as well as two different 2-panel and 3-panel layouts.

Available layouts in sizes XL and L

Size M (Tablet)

There are three different layouts in size M: Full screen and two different 2-panel layouts. There is no 3-panel layout due to the limited width. However, it’s possible to load three pages in size M. Instead of showing them all side-by-side, the user will be able to switch between panels 1/2 and 2/3.

Available layouts in size M

Size S (Phone)

Due to the very limited width in size S, there is no multi-panel layout available. For this reason, the last panel will be shown in full screen instead.

Available layouts in size S

Components

The flexible column layout uses a few simple actions to allow the users to change the current layout according to their needs.

Note: Some of the actions (illustrated in blue lines below) should recover the last state of the layout to which they refer. This means that they react depending on the last state of the triggered layout.

Toggle

With toggle, users can expand the size of a certain panel, thereby changing the current layout. However, it’s not possible to expand a panel to full screen via toggle. To do this, the user can use the full screen action instead.

The toggle action is located over the divider and points in the direction in which a panel can be expanded. If a panel cannot be expanded any more, the action is hidden.

Information

The user cannot change the size of a panel freely (for example, 15%/85%).

Toggle

Enter Full-Screen Mode

With the full screen icon , the user can switch the rightmost (RTL: leftmost) panel to full screen. The action is located in the rightmost panel and only if there is more than one panel available.

Exit Full-Screen Mode

By selecting the exit full screen icon , the user can exit the full screen and switch back to the multi-panel (side-by-side) view. The action is only available while in full-screen mode.

Information

The actions are not available in size S, as there is always just only one panel shown.

Entering and exiting full screen

Close

With the close icon , the user can close the last (rightmost) panel. When using this action in the second panel while the third panel is minimized, both panels will be closed. Close is also available in full screen as well as in size S in the second/third panel.

Close

Information

The close and enter/exit full screen actions:

Are only displayed in the third panel (or second panel if there is no third panel, or if the third is minimized).
Are displayed in the global actions as the last actions.
Never go into the overflow.
Are always shown side-by-side (full screen: left / close: right). Exception: There is no full screen action in size S.

Developer Hint

The actions for exiting/entering full-screen mode and closing panels are not provided automatically by the flexible column layout control and need to be implemented manually. However, it is possible to use the semantic page (only with dynamic page), which supports these actions for freestyle applications.

Due to the technical restrictions of the overflow toolbar, it’s currently not possible to display the actions behind the overflow action (). This also applies to the object page, which does not use the overflow toolbar.

Navigation

In addition to the actions specific to the flexible column layout, the user can also use the forward and backward navigation to navigate through the flexible column layout. Drilling in/navigating forward opens a new panel, while using back will close a panel or the full-screen mode (depending on what the last action was). Please note: Back does not restore layout changes (such as switching from 33%/67% to 67%/33%).

As there is a maximum of three panels available, every following page will be loaded in full screen. These pages do not contain close or full screen actions.

By default, the second panel will be opened in 33% and the third panel in 25% width initially. You can also open the second panel in 67% and the third in 50% if your use case require it.

Developer Hint

To implement the navigation/routing, you can use the SemanticHelper class which provides a predefined behavior to simplify the implementation.

Forward navigation

Backward navigation

Responsiveness

The flexible column layout is runtime responsive, which means it changes its behavior for sizes XL, L, M and S, while resizing the screen in real time.

If no previous state has been saved, the default should appear automatically. For example, if the flexible column layout was initially loaded in size S and the user then navigates to the second panel and changes the browser window to size M, the default two panel layout of size M should appear (67%/33%).

Responsiveness of the flexible column layout

Behavior and Interaction

Dialogs

Dialogs triggered in one of the panels are centered over the entire screen.

Do

Do: Center dialogs triggered in a panel

Don’t

Do not: Right-align dialogs triggered in a panel

Vertical Size/Scrolling

Each panel inside the flexible column layout contains an independent floorplan with its own scrolling. There is no “all-encompassing” scrollbar which scrolls all panels simultaneously. The height of each floorplan is defined by the screen size.

Do

Do: Each panel contains its own scrollbar

Don’t

Do not: There is no all-encompassing scrollbar for all panels

Two Panels (Master-Detail Mode)

By default, the flexible column layout starts off with one panel, and the user opens new panels by navigating forward. As the flexible column layout is the successor of the split-screen layout, it can also be used with just two panels if your use case requires it. Do not start your application with three panels as it might confuse the user by displaying too much information initially.

Note: When starting with two panels, please make sure that you show the first panel on size S initially. Otherwise, the user would directly see the second panel, which might be confusing.

Examples: Starting with two panels (Size XL and L)

Titles/Breadcrumbs/Up and Down Arrows

The application title is shown in the shell bar as long as there is more than one panel visible on the screen. In full screen, the page title is shown. This also applies in size S, where just one panel is visible.

The breadcrumbs and up/down arrows are hidden if there are multiple panels visible.

Application title in the shell bar

Page title in the shell bar

Bookmarks

Every layout inside the flexible column layout can be bookmarked. For example, if the user bookmarks a 3-panel layout with 25%/50%/25%, this layout should be loaded when accessing the bookmark.

Minimized Third Panel

When the user expands the first panel in a 3-panel layout, the third panel gets minimized. Close, full screen, and toggle actions also appear on the right-hand border of the second panel to allow the user to return to the original 3-panel layout.

Close: The second and third (minimized) panel close. A dialog can appear to warn the user if there is, for example, any unsaved information in the third panel.

Full screen: When the user clicks on full screen, the second panel goes into full-screen mode. The third panel remains open (but not visible), and closes as soon as the user selects another item in the second panel or uses the close action of the second panel. If the user selects the same (still open) item in the second panel, it opens in the same state as it appeared before minimizing it.

Toggle: The toogle action is only available in 33%/67% layout and will hide if the user is changing to a 67%/33% layout.

Example of minimized third panel (33%/67%)

Using Close in Combination with Back Navigation

The back navigation should not restore a panel which was closed before by using the close icon

Example: The user closes the third panel by clicking the close icon in the upper-right corner. If the user then navigates back (UI or browser), the second panel should close.

Using close in combination with back navigation

Three Panels in Size M

To provide a desktop-like experience in size M, the flexible column layout displays either the first and second or the second and third panel. The user can switch between both views by using the toggle action on the left or right side of the flexible column layout. Note: This behavior is only meant for size M and should not be used in size XL or L.

Three panel interaction in size M

Letterboxing

Please do not use letterboxing in combination with the flexible column layout as it will reduce the size of the usable screen area.

Do

Do: Proper use of usable screen area

Don’t

Do not: Improper use of usable screen area with letterboxing

Full Screen Navigation

When switching a panel to full-screen mode, selecting the back icon closes the full-screen mode.

When the user navigates forward inside the full-screen mode, the next panel should also appear in full-screen mode. The back navigation should go back in full screen until the point in which the user initially switched to full screen. Then, the back icon should bring the user back to the multi-panel mode.

Example of using the full screen in combination with navigation

SAP Fiori Elements

The flexible column layout is available in SAP Fiori elements for scenarios that use draft handling. If you use draft handling, we strongly recommend using the SAP Fiori elements implementation, wherever possible. The implementation already includes the navigation and routing behavior, as well as the Close and Full Screen actions, for example.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

SAP Fiori Elements (guidelines)

Implementation

Flexible Column Layout Sample (SAPUI5 samples)
Flexible Column Layout (SAPUI5 API reference)
Flexible Column Layout (SAPUI5 Demo Kit)
Flexible Column Layout Semantic Helper (SAPUI5 API reference)
Flexible Column Layout Semantic Helper (SAPUI5 Demo Kit)