Overview

The flexible column layout is a floorplan that allows you to display up to three pages in separate columns, which provides related and detailed information without page transition. Each column can use a different layout and the user can expand the column they want to focus on. It behaves responsively and is suitable for both desktop and mobile devices.

Flexible column layout with 3 columns

information

Note:The flexible column layout replaces the deprecated split-screen layout (sap.m.SplitApp).

Usage

false

Recommended

You want to create a parent-child or parent-child-child scenario in which the user can drill down or navigate.
You have complex information and you require the user to drill into the provided information to see more details about the chosen entity.
Start with one or two open columns only. Avoid giving too much information right at the beginning which can confuse users.

dont

false

Not Recommended

Avoid having a complex application that needs to be structured in defined areas.
Use the responsive splitter layout instead.
Avoid embedding the overview page into one column.
Avoid dashboards with context-independent pages.

Components

Full Screen Mode

If there is more than one column, the user can switch to fullscreen mode on the rightmost column.

Close

The user can close the rightmost column with the close icon. It is grouped with the enter full screen and the exit full screen icon.

The Enter Full Screen / Exit Full Screen and Close actions are displayed as the last actions in the global actions toolbar and always on the same line. Both actions are detached by a separator line and never move into the overflow.

false

Global actions and components on same level

dont

false

Global actions and components on different levels

Content Density

Cards

If you want to display cards instead of a table or list, provide additional layout recommendation for the resizable cards. If the cards consist of multiple lines of information, avoid displaying the same information when navigating to the next column. Rather display only a portion of the information and shrink the cards’ size.

Cards: Flexible column layout with one column

Cards: Flexible column layout with two columns and reduced card information

Tables

If you are using a responsive table or list in a column with multiple columns, decide which is the most important data that shall remain visible in the pop-in area when navigating to the second or third column to avoid long scrolling areas.