Overview

Flexible Column Layout can be used to display multiple floorplans at the same time and to provide related and detailed information without page transition. Each content area is called a "column" and they can have different floorplans.

information

NoteThis layout replaces the split screen layout which is deprecated as of SAPUI5 1.48. If you plan to design your application with the master-detail layout, use this layout instead of the split screen layout.

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.

Structure

Flexible Column Layout consists of multiple columns. The maximum number of columns is . Two-column version can replace Split Screen Layout, also known as Master-Detail Layout.

Columns

① First Column

The first column of the layout provides the main content of an application. It usually lists out items of interest to let users investigate details, for example, alerts, alert definitions, users, recommendations.

② Second Column

The second column shows the supplementary information of a select item in the first column. It also can have a list of related items which can trigger the third column to show its details, for example, alert details.

③ Third Column

This is the last column that this layout can have. It shows the supplementary information of a selected item in the second column or provides the related information of the shown item in the second column. And it usually supports the final step of the user's action in the application.

Refer to the section in Fiori Design Guidelinesto see all possible layouts.

Responsiveness & Adaptiveness

Flexible Column Layout is fully responsive in its structure. Therefore, the number of visible columns is changed whenever the user changes the screen size. Please refer to Fiori Design Guidelines for how it works.

Component Overview

Flexible Column Layout

Use Fiori's standard Flexible Column Layout for best consistency in visual design and interaction. Each column can have different floorplans and following are commonly used Fiori floorplans and components.

Fiori Design Guidelines/ API Documentation

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.

Tables: Flexible column layout with one column

Tables: Flexible column layout with two columns and pop-in and selected data

Behavior & Interactions

All behavior and interaction descriptions in Fiori Design Guidelines are valid for our use cases. Please refer to the page below for details.

Guidelines

You can define how many columns are visible in the default state (initial state). In case the main content doesn't provide a significant meaning and looking at the supplementary content is highly expected, your app can start with two columns opened. The selected item (mostly the first item in the main content) should also include the most important information.
Each column should be fully responsive in any sizes and all information in the column should be either visible or easily accessible. Below are components that require a thorough check-up before signing off its implementation, for example, Tables, Lists, Object Header, Filter Bar.

false

Make sure all components are well-aligned and in their correct form in a narrow column.

dont

false

Don't customize the responsive behavior of any SAPUI5 component in a narrow column.

Selected item in the preceding columns should be identifiable from other items to provide users the clear context.
The Close, Enter Full Screen, and Exit Full Screen actions are not automatically provided by SAPUI5 control and need to be implemented manually. Refer to the section in Fiori Design Guidelines and implement these features in the same way.

false

Place action buttons in a correct order. Enter Full Screen action button is followed by The Close action button. Enter Full Screen action button is a toggle button that transforms to Exit Full Screen button when a column is in the full screen mode.