enum sap.f.LayoutType

Control sample: sap.f.LayoutType
Visiblity: public
Available since: N/A
Module: sap/f/library
Application Component: CA-UI5-CTR

Layouts, representing the number of columns to be displayed and their relative widths for a sap.f.FlexibleColumnLayout control.

Each layout has a predefined ratio for the three columns, depending on device size. Based on the device and layout, some columns are hidden. For more information, refer to the ratios (in %) for each value, listed below: (dash "-" means non-accessible columns).

Note: Please note that on a phone device, due to the limited screen size, only one column can be displayed at a time. For all two-column layouts, this column is the Mid column, and for all three-column layouts - the End column, even though the respective column may be hidden on desktop and tablet for that particular layout. Therefore some of the names (such as ThreeColumnsMidExpandedEndHidden for example) are representative of the desktop scenario only.

For more information, see Types of Layout in the documentation.


Properties Overview

Node Description
sap.f.LayoutType.EndColumnFullScreen

Desktop: -/-/100 only the End column is displayed

Tablet: -/-/100 only the End column is displayed

Phone: -/-/100 only the End column is displayed

Use to display a detail-detail page only, when the user should focus entirely on it.

sap.f.LayoutType.MidColumnFullScreen

Desktop: -/100/- only the Mid column is displayed

Tablet: -/100/- only the Mid column is displayed

Phone: -/100/- only the Mid column is displayed

Use to display a detail page only, when the user should focus entirely on it.

sap.f.LayoutType.OneColumn

Desktop: 100/-/- only the Begin column is displayed

Tablet: 100/-/- only the Begin column is displayed

Phone: 100/-/- only the Begin column is displayed

Use to start with a master page.

sap.f.LayoutType.ThreeColumnsBeginExpandedEndHidden

Desktop: 67/33/0 Begin (expanded) and Mid columns are displayed, End is accessible by layout arrows

Tablet: 67/33/0 Begin (expanded) and Mid columns are displayed, End is accessible by layout arrows

Phone: -/-/100 only the End column is displayed

Use to display the master and detail pages when the user should focus on the master. The detail-detail is still loaded and easily accessible with layout arrows.

sap.f.LayoutType.ThreeColumnsEndExpanded

Desktop: 25/25/50 Begin, Mid and End (expanded) columns are displayed

Tablet: 0/33/67 Mid and End (expanded) columns are displayed, Begin is accessible by layout arrows

Phone: -/-/100 (only the End column is displayed)

Use to display all three pages (master, detail, detail-detail) when the user should focus on the detail-detail.

sap.f.LayoutType.ThreeColumnsMidExpanded

Desktop: 25/50/25 Begin, Mid (expanded) and End columns are displayed

Tablet: 0/67/33 Mid (expanded) and End columns are displayed, Begin is accessible by a layout arrow

Phone: -/-/100 only the End column is displayed

Use to display all three pages (master, detail, detail-detail) when the user should focus on the detail.

sap.f.LayoutType.ThreeColumnsMidExpandedEndHidden

Desktop: 33/67/0 Begin and Mid (expanded) columns are displayed, End is accessible by a layout arrow

Tablet: 33/67/0 Begin and Mid (expanded) columns are displayed, End is accessible by a layout arrow

Phone: -/-/100 only the End column is displayed

Use to display the master and detail pages when the user should focus on the detail. The detail-detail is still loaded and easily accessible with a layout arrow.

sap.f.LayoutType.TwoColumnsBeginExpanded

Desktop: 67/33/- Begin (expanded) and Mid columns are displayed

Tablet: 67/33/- Begin (expanded) and Mid columns are displayed

Phone: -/100/- only the Mid column is displayed

Use to display both a master and a detail page when the user should focus on the master page.

sap.f.LayoutType.TwoColumnsMidExpanded

Desktop: 33/67/- Begin and Mid (expanded) columns are displayed

Tablet: 33/67/- Begin and Mid (expanded) columns are displayed

Phone: -/100/- only the Mid column is displayed

Use to display both a master and a detail page when the user should focus on the detail page.