Flexible Column Layout – 5 Hands-on Insights

The flexible column layout implements the master-detail-detail paradigm by displaying up to three floorplans on a single page. The width of the columns is flexible: The column the user wants to focus on can be made wider, or it can be displayed in full screen at any time. Get skilled up with our hands-on insights.

How to start

Start your master column ideally with a list report or a worklist. If you need to show more complex data, trees can be used due to their hierarchical view. Using trees, the first column can already display parent-child relationships. They show the key identifier of hierarchically structured items.

Example of a tree with a clear parent-child relationship

You can start your app with one or two columns. Never start with three columns since too much information at the beginning can be overwhelming.

When starting with two columns, make sure that size S (up to 960px phone) shows the first column, the master column. Otherwise, users see the second column (detail column) first. Because of the limited width, there is no multi-column layout for size S. Instead, the rightmost column is shown in full screen mode.

Accessing page displays & finding items

When an entry gets selected, the app gets a new URL. By using deep links, the selected item and the state of the layout can be shared. For example, a 3-column layout set to 25% + 50% + 25%, will be loaded when the user opens the bookmark or the deep link.

Without a deep link, you can search for an item. From enterprise search or clicking on the object link from another app or business card, the object page opens as a separate individual page.

Since the flexible column layout is a layout control which can contain several UI5 views (pages), you can just load the UI5 view which contains the object without opening the flexible column layout.

Place for actions

In general, the footer bar should only be used for finalizing actions. Actions should be close to the control they belong to. In case you have a + that adds an entry to the table, it should go in the table toolbar. However, the actions of the footer toolbar and the toolbar itself are not part of the flexible column layout.

The flexible column layout itself uses a few actions to let users adapt the current layout according to their needs. These generic actions go into the toolbar of title bar of the page (upper right corner): Close and Enter Full Screen / Exit Full Screen.

Layout actions, such as the Close or Full Screen / Exit Full Screen icons, are mainly offered in the flexible column layout. Yet, also the dynamic page offers a section for layout actions. As in the screenshot below, always place the icons for Full Screen / Exit Full Screen and Close in this section. To keep their position stable in case other layout actions are added, keep them on the very right.

The footer’s buttons

Each column of the flexible column layout has its own optional footer toolbar. There is no overall footer toolbar that spans several columns, just like there is no overall header. The footer toolbar is only used for finalizing actions, like Save / Cancel. It is only available on the column it belongs to.

When deciding about the buttons in the footer toolbars, the edit flow needs to be considered. There’s the local and the global flow.

In the global flow, there is a main object with a global save/cancel. The subobjects (columns) only have Apply / Cancel buttons.

In the local flow, 2 columns are handled as separate objects. Then, there would be a Save / Cancel button on each footer toolbar.

Messaging

Handling the message popover (sap.m.MessagePopover) in columns also depends on the edit flow. The message popover can handle multiple messages. With a message manager, it automatically displays messages that occur after validation points.

Full screen message popover on a smartphone

In the global edit flow, we recommend using one message popover, because you provide a global Save / Cancel. For local edit flow, use one message popover for each object, because they have separated Save / Cancel actions.

The form field validation kicks in, wherever you validate forms and editable fields. To provide a summarized collection of the messages on the UI, you can use the sap.m.MessagePopover in the footer toolbar of the object.

Read more about flexible column layouts in this blog: Go with the Flow with Flexible Column Layout. 

Many kudos to ux designer Jan-Michel Blinn for sharing his expertise!