Master-detail is the most common Fiori pattern there is: a list on the left, details on the right. The Flexible Column Layout (FCL) is SAPUI5's purpose-built control for it — responsive, animated, and far less code than building the same behavior with splitters and custom CSS.
Three Columns, Five Layouts
FCL manages up to three columns: begin (master), mid (detail), and end (detail-detail). The visible combination is controlled by a layout parameter with five standard values:
OneColumn— single column, full width (typical phone portrait)TwoColumnsMidExpanded— master + detail, detail takes the spaceTwoColumnsBeginExpanded— master + detail, master takes the spaceThreeColumnsEndExpanded— all three, end column prioritizedThreeColumnsMidExpanded— all three, mid column prioritized
The control adapts automatically to screen size: on a phone it collapses to one column with full-screen navigation, on a desktop it shows columns side by side.
Key takeaway: the layout parameter is a single string that drives the entire responsive behavior. You never write media queries for this.
Setting Up the Root View
FCL replaces your app's root control. Each column hosts its own view, so the three screens stay independent:
<mvc:View controllerName="my.app.controller.App"
xmlns:f="sap.f">
<f:FlexibleColumnLayout id="fcl" layout="{/layout}"
beginColumnPages="..." midColumnPages="..." endColumnPages="..."/>
</mvc:View>The layout property binds to a simple JSON model holding the current layout string. Changing the string animates the columns — that is the entire transition logic.
Routing with Layouts
Navigation and layout go hand in hand, so the router carries the layout as a parameter. The standard pattern defines routes like master, detail, and detailDetail, each with a layout argument:
// manifest.json routing
{
"pattern": "orders/{orderId}/:layout:",
"name": "detail",
"target": ["master", "detail"]
}When the user taps a list item, the controller navigates to the detail route with the order ID and a layout like TwoColumnsMidExpanded. The route handler sets the layout model property, and FCL slides the detail column in. The back button (or the column close icon) navigates back to the master route with OneColumn.
Key takeaway: put the layout in the URL. It makes deep links work and gives you browser back-button support for free.
Handling the Close and Fullscreen Buttons
FCL columns come with built-in expand and close affordances, but your controller wires them up. The typical handlers:
onDetailClose: function () {
// collapse back to master only
this.getRouter().navTo("master", { layout: "OneColumn" });
},
onDetailExpand: function () {
// let the detail take the full width
this.getModel("appView").setProperty("/layout", "MidColumnFullScreen");
}MidColumnFullScreen and EndColumnFullScreen are extra layout values for the temporary full-screen states. Always store the previous layout before switching, so the collapse button can restore it.
When Not to Use It
FCL is the right default for master-detail and master-detail-detail flows, including the Fiori elements list report / object page pattern it was designed around. Skip it for wizard-style linear flows, dashboards, or anything where the columns are independent panels rather than a navigation hierarchy — a plain sap.ui.layout.Splitter or grid is simpler there.
Say you have a sales order list with line items and a line-item detail: begin column lists orders, mid column shows the order with its items, end column shows the selected line item. Three routes, one layout model, zero custom animation code.
Are you using FCL, or still hand-rolling master-detail with splitters? Tell me in the comments.