Possible Layouts

To give users a better overview, the flexible column layout offers different layouts with one, two, or three columns. Depending on the screen size, up to five alternative layouts are available.

Size L and XL (Desktop)

There are five different layouts in sizes L and XL: a full screen layout, as well as two different 2-column and 3-column layouts.

Size M (Tablet)

There are three different layouts in size M: a full screen layout and two different 2-column layouts. There is no 3-column layout due to the limited width. However, you can still load 3 pages in size M. Instead of showing them all side-by-side, the user can switch between columns 1/2 and 2/3.

Size S (Phone)

Because of the limited width, there is no multi-column layout for Size S. Instead, the rightmost column is shown in full screen mode.

Layout Arrow

The layout arrows allow users to expand the width of a given column, thereby changing the current layout. However, this action cannot be used to expand a column to full screen mode. There is a separate action for expanding a column to full screen mode.

The layout arrow is located next to the divider and points in the direction in which a column can be expanded. If a column cannot be expanded any further, the action is hidden.

Enter Full Screen Mode

With the Full Screen icon  , the user can switch the rightmost column to full screen mode. The action is located in the rightmost column, and is only offered if there is more than one column.

Exit Full Screen Mode

By selecting the Exit Full Screen icon  , the user can exit the full screen and switch back to the multi-column (side-by-side) view. The action is only available while in full screen mode.

Close

With the Close icon   , the user can close the last (rightmost) column. If the user selects this action in the second column while the third column is minimized, both columns are closed. Close is also available in full screen mode, and in the second/third column for size S.

Navigation

In addition to the actions specific to the flexible column layout, the user can also use the forward and backward navigation to navigate through the flexible column layout. Drilling in or navigating forward opens a new column, while Back closes a column or exits the full screen mode (depending on what the last action was).
Please note: Back does not restore layout changes (such as switching from 33% + 67% to 67% + 33%). It also doesn’t reopen columns that were closed previously using the Close button (  ).

Because the flexible column layout only supports a maximum of 3 columns, any follow-on pages are loaded in full screen mode. These pages do not contain Close or Enter Full Screen / Exit Full Screen actions.

By default, the width is initially 33% for the second column and 25% for the third column. You can also set the width of the second column to 67%, or the third to 50% if your use case requires it.

Behavior and Interaction

Dialogs

Dialogs triggered in one of the columns are centered over the entire screen.

Vertical Size / Scrolling

Each column inside the flexible column layout contains an independent floorplan with its own scrolling behavior. There is no “all-encompassing” scrollbar which scrolls all columns simultaneously. The height of each floorplan is defined by the screen size.

Scroll Position

During column resizing, the navigated item in the list column may no longer be in the visible screen area. In such cases, we recommend setting the scroll position to the item currently open in the details column (“navigated” item). This allows the user to see at a glance which item from the list or table is being displayed in the details column.

Two Columns (List-Detail Mode)

By default, the flexible column layout starts off with one column. The user opens new columns by navigating forward. Since the flexible column layout is the successor of the split-screen layout, you can also use just two columns if your use case requires it. Do not start your application with three columns. Too much information at the beginning can confuse users.

Note:

• If you start with two columns, make sure that size S shows the first column. Otherwise, users see the second column first, which might be confusing. (Showing the second column is the normal responsive behavior of the flexible column layout, which always shows the last column in size S.)
• Even if you start with two columns, offer the layout arrow and the Close action in the second column.

Titles / Breadcrumbs / Up and Down Arrows

If more than one column is visible, show the application title in the shell bar. If the user switches to full screen mode, show the page title. Also show the page title for size S, where only one column is visible.

If multiple columns are visible, hide the breadcrumbs and up/down arrows.

Bookmarks

Every layout inside the flexible column layout can be bookmarked. For example, if the user bookmarks a 3-column layout set to 25% + 50% + 25%, load this layout when the user opens the bookmark.

Minimized Third Column

When the user expands the first column in a 3-column layout, the third column is minimized. Close, Enter Full Screen, and layout arrow actions also appear on the right-hand border of the second column to allow the user to return to the original 3-column layout.

Close: The second and third (minimized) columns close. A dialog can appear to warn the user about any unsaved data in the third column.

Full screen: When the user clicks the Enter Full Screen icon, the second column switches to full screen mode. The third column remains open (but not visible), and closes as soon as the user selects another item in the second column, or uses the Close action in the second column. If the user selects the same item in the second column, it opens in the same state as before it was minimized.

Layout arrow: The arrow for changing the layout to 25% + 50% + 25% is only available in the 33% + 67% layout. This arrow is hidden if the user is changing the layout to 67% + 33%.

Using Close in Combination with Back Navigation

The back navigation must not restore a column that was previously closed with the Close icon  .

Example: The user closes the third column by clicking the Close icon   in the upper-right corner. If the user then navigates back (UI or browser), the second column closes.

3 Columns in Size M

To offer a desktop-like experience in size M, the flexible column layout displays either the first and second or the second and third column. The user can switch between these views by using the layout arrow on the left or right side of the flexible column layout. Note: This behavior is only intended for size M. Do not use it for sizes L or XL.

Letterboxing

Do not use letterboxing in combination with the flexible column layout, as it will reduce the size of the usable screen area.

Content Interaction

Selecting a Different Item

If the user selects a different item in the list-detail or list-detail-detail layout, the content of the details column changes to reflect the data of the newly selected item. If the item is selected in the first column, and the last column was open before the new item was selected, selecting the item closes the last column.

Deleting an Item

When an item is deleted, there are two options for handling the content of the details columns:

• Select the next item and change the content in the details column.
  If the user deletes the last item, you can opt to either select the previous item or close the details column(s). If the user deletes all the objects, always close all columns, since there is no content to display.

• Do not select an item and close the other columns.

Behavior on Filtering

Filtering in one of the columns does not affect the content in the other columns.

Once a filter is applied, the results are shown in the same column. The content in the remaining columns does not change, unless another item is selected.

Tab/Anchor Navigation

Tabs and anchors are used for navigation within an object or as a filter (for example, in object pages). They affect only the respective column and do not close or change the content in the other columns.