Flexible Column Layout

The flexible column layout fits when users move through a hierarchy and must keep the level above in view: a list of purchase requisitions, one requisition, then one of its items. Users pick from the list on the left and read the detail beside it.

Decision criteria:

• Users switch often between items of the same list, on wide screens: the flexible column layout saves navigation.
• Users spend a long time on one complex object with wide tables: full-screen pages give the object room.
• Most users work on phones: only one column fits there, so the benefit is small.

Example: a buyer at Alder Manufacturing keeps the list of open requisitions in the first column, checks the Cedar Office Supply requisition in the second, and opens one item in the third, all without losing the list. The flexible column layout is the right choice when context across levels matters more than width for any single page.

The layout has three columns, called Begin, Mid and End, which hold the list, the detail and the sub-detail. A layout value decides which columns are visible and how wide each one is. SAP's recommended flow, which the semantic helper class encodes, runs like this:

1. The app starts with one column, usually the list.
2. Choosing an item opens its detail in the Mid column, with Full Screen and Close buttons.
3. Choosing an item in the detail opens the third level in the End column.
4. A fourth or deeper level replaces the End column in full screen.

Users can drag the column separators to resize columns or switch layouts, and the control remembers their widths. The control also adapts to the device on its own: three columns on a desktop, at most two on a tablet, where the first column is reached by dragging, and one on a phone. The flexible column layout is therefore a responsive container for navigation levels, not a floorplan with content of its own.

SAP Fiori tools offers a page map switch; the underlying settings differ by OData version:

The list report sits in the first column and object pages fill the following ones. In OData V2, a page can override the default with its own layout, for example moving the main object page into the first column and its items beside it. The setting belongs to the app, so it behaves the same in SAP S/4HANA and on SAP BTP. SAP Fiori elements saves column widths per app and device type. Two limits apply: the analytical list page supports only the two-column layout with the first column expanded, and the overview page does not use the flexible column layout. Enabling the flexible column layout changes navigation, not annotations.

1. Wide tables in narrow columns. A table designed for full width becomes unreadable in the Mid column; reduce columns or use pop-in layouts.
2. Promising three columns everywhere. Tablets show two and phones one, so designs must work at every width.
3. Surprise action placement. In non-draft apps with create, update and delete, only the last column shows Edit and Delete.
4. Unrelated objects side by side. The layout expresses a parent-child hierarchy; two unrelated apps do not belong in it.

When an SAP Fiori elements app ignores the setting and still opens full screen, check in order: the root view and router class (OData V4), the sap.f library dependency, the controlAggregation of each target, and any page-level default layout. Most flexible column layout problems are routing configuration problems, not rendering bugs.