The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can freely resize the columns, switch between different layouts, and view the rightmost column in full screen mode.

The flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.

The flexible column layout is already incorporated within SAP Fiori elements.

Usage

Use the flexible column layout if:

• You want to create a list-detail or list-detail-detail layout, in which the user can drill down or navigate.

Do not use the flexible column layout if:

• You want to build a workbench or tools layout. The flexible column layout is not meant to provide a main column with additional side columns on the left and/or right. If you want to display additional content to enrich the main content and to help users better perform their tasks, use the dynamic side content instead.
• You want to create a dashboard with context-independent pages.
• You want to open multiple instances of the same object type. Use the multi-instance handling floorplan instead.
• You want to split a single object into multiple columns, or display only a small amount of information.
• You want to embed the SAP Fiori launchpad or overview page into one of the columns.

Structure

As with all layouts, the flexible column layout is embedded in the shell bar of the SAP Fiori launchpad. From the shell bar, users have access to the launchpad services, including the home page, search, settings, and help. Apps are embedded in the shell and have little influence over its features. The shell bar also provides the back navigation and the app title, including the navigation menu.

Depending on the current layout and display size, the flexible column layout consists of one, two, or three horizontally-aligned columns. Each column contains content that is not provided by the flexible column layout itself. The flexible column layout is not restricted to a specific floorplan, as long as the floorplan you use is responsive down to phone size. However, we recommend using the dynamic page.

Components

The flexible column layout offers a few simple actions that allow users to adapt the current layout according to their needs.

Note: Some of the actions (illustrated by blue lines in the image below) recover the last state of the layout to which they refer. In other words, the result of the action depends on the previous state of the layout.

Responsiveness

The flexible column layout changes its behavior for sizes XL, L, M and S in real time whenever the user resizes the screen.

If no previous state has been saved, ensure that the default layout appears automatically. For example, if the flexible column layout was initially loaded in size S and then, the user navigates to the second column and changes the browser window to size M, the default 2-column layout for size M (67% : 33%) should be shown.

Full Screen Navigation

After switching a column to full screen mode, selecting the Back icon exits the full screen mode.

If the screen is in full screen mode, and the user navigates forward, also show the next column in full screen mode. If the user navigates backward, go back in full screen mode until the point where the user initially switched to full screen. If the user then clicks Back again, return to the multi-column mode.

Footer Toolbar

Each column of the flexible column layout can have its own footer toolbar. There is no overall footer toolbar that spans several columns.

Overlapping Header

The flexible column layout can display multiple floorplans side-by-side. However, it is not designed for splitting a single floorplan into several columns. As a result, there is no overall header that spans several columns. If you need to show additional content within a floorplan, use the dynamic side content.

Empty Details Column

Do not display an empty details column when using the flexible column layout. For example, if no items have been selected in the second column, do not show an empty third column.

Usage With One or Several Initial Full Screen Pages

Some use cases require starting an application with one or more full screen pages. You can do this by using the first column of the flexible column layout in full screen mode. This allows you to show one or several initial full screen pages with different content. Because of technical constraints, you must always use the flexible column layout to show this initial content.

Content Padding Inside Columns

The flexible column layout doesn’t provide additional paddings around the content area. Since some controls have different internal paddings, please ensure that they are aligned correctly.

Navigation Indicator

It is important for users to be able to scan through the list and quickly identify the item for which the details are being shown in the second or third column. This is especially important for large lists. For this case, you can enable a “navigated” indicator for tables and lists to mark the item that was last opened.

If there are several tables/lists on one page, ensure that the indicator shows only for the last navigated item. There should never be two navigation indicators on one page.

SAP Fiori Elements

The flexible column layout is available in SAP Fiori elements for scenarios that use draft handling. If you use draft handling, we strongly recommend using the SAP Fiori elements implementation, wherever possible. The implementation already includes the navigation and routing behavior, as well as the Close and Full Screen actions, for example. Starting the application with two columns is also supported by SAP Fiori elements.

Resources

The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.  

When to Use

Use the comparison pattern if:

• Users need to compare two or more similar items.
• Users need to compare versions of the same item.
• You are using the Dynamic Page Layout.

Do not use the comparison pattern if:

• There is no business need for displaying items side-by-side. Don’t use the pattern purely for visualization.
• You want to display only one item. In this case, use the Object Page Floorplan instead.

Components

The comparison pattern comprises the following components. All are mandatory: 

• Triggering action: Opens the comparison view for the selected items.
• Header area: Shows the most important characteristics for identifying and comparing items. Each item is represented by a card.
• Content area: Shows all characteristics needed for comparison. Each item is represented by a panel.

Behavior and Interaction

The expand/collapse header and pin/unpin header features work as described in the Dynamic Page article.

Adding More Items

If your users need to add more items while comparing, place an Add to Comparison action in the header. For more information, see Dynamic Page Layout – Header Title.

For adding more items, either show a dialog or the original page the user started from. Make sure that you display the items that are already in the comparison: in the dialog, also show the previously selected items; in the original page, keep the items selected.

Responsiveness

The comparison pattern adapts the number of visible items based on the screen size. If a card is no longer in the visible area, also hide its corresponding column in the panels.

On size S, there is only one visible card in the header area and its corresponding panels in the content area. Users can navigate left or right to see the next or previous item.

The comparison pattern maintains the scrolling position of the page when switching to the next or previous item. This feature helps the user focus on a certain characteristic while navigating through the items.

On size M and larger, always show two or more cards with their corresponding panel columns in the visible area.

Example

Top Tips

Compare apples with apples.

Wording

• For triggering the comparison, use a meaningful button text with the number of selected items in brackets. We recommend “Compare (<number of selected items>)”, for example, Compare (3).
• Use a page title that describes the task. We recommend “Compare <selected object type>”, for example, Compare Products.
• Use precise panel titles to describe the characteristics.

Cards

• Show only the most important information for an item on the card.
• If the cards contain only a title, subtitle, and image/avatar, show the dynamic page header in collapsed mode when starting the app.
• Link each item’s object page (if available) to the header area of the card. This gives users access to all the characteristics for a specific item to help them make a final decision.

Related Topics

The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.

The flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.

The flexible column layout is already incorporated within SAP Fiori elements.

Usage

Use the flexible column layout if:

• You want to create a list-detail or list-detail-detail layout, in which the user can drill down or navigate.

Do not use the flexible column layout if:

• You want to build a workbench or tools layout. The flexible column layout is not meant to provide a main column with additional side columns on the left and/or right. If you want to display additional content to enrich the main content and to help users better perform their tasks, use the dynamic side content instead.
• You want to create a dashboard with context-independent pages.
• You want to open multiple instances of the same object type. Use the multi-instance handling floorplan instead.
• You want to split a single object into multiple columns, or display only a small amount of information.
• You want to embed the SAP Fiori launchpad or overview page into one of the columns.

Structure

As with all layouts, the flexible column layout is embedded in the shell bar of the SAP Fiori launchpad. From the shell bar, users have access to the launchpad services, including the home page, search, settings, and help. Apps are embedded in the shell and have little influence over its features. The shell bar also provides the back navigation and the app title, including the navigation menu.

Depending on the current layout and display size, the flexible column layout consists of one, two, or three horizontally-aligned columns. Each column contains content that is not provided by the flexible column layout itself. The flexible column layout is not restricted to a specific floorplan, as long as the floorplan you use is responsive down to phone size. However, we recommend using the dynamic page.

Components

The flexible column layout offers a few simple actions that allow users to adapt the current layout according to their needs.

Note: Some of the actions (illustrated by blue lines in the image below) recover the last state of the layout to which they refer. In other words, the result of the action depends on the previous state of the layout.

Responsiveness

The flexible column layout changes its behavior for sizes XL, L, M and S in real time whenever the user resizes the screen.

If no previous state has been saved, ensure that the default layout appears automatically. For example, if the flexible column layout was initially loaded in size S and the user then navigates to the second column and changes the browser window to size M, show the default 2-column layout for size M (67% + 33%).

Full Screen Navigation

After switching a column to full screen mode, selecting the Back icon exits the full screen mode.

If the screen is in full screen mode, and the user navigates forward, also show the next column in full screen mode. If the user navigates backward, go back in full screen mode until the point where the user initially switched to full screen. If the user then clicks Back again, return to the multi-column mode.

Footer Toolbar

Each column of the flexible column layout can have its own footer toolbar. There is no overall footer toolbar that spans several columns.

Overlapping Header

The flexible column layout can display multiple floorplans side-by-side. However, it is not designed for splitting a single floorplan into several columns. As a result, there is no overall header that spans several columns. If you need to show additional content within a floorplan, use the dynamic side content.

Empty Details Column

Do not display an empty details column when using the flexible column layout. For example, if no items have been selected in the second column, do not show an empty third column.

Usage With One or Several Initial Full Screen Pages

Some use cases require starting an application with one or more full screen pages. You can do this by using the first column of the flexible column layout in full screen mode. This allows you to show one or several initial full screen pages with different content. Because of technical constraints, you must always use the flexible column layout to show this initial content.

Content Padding Inside Columns

The flexible column layout doesn’t provide additional paddings around the content area. Since some controls have different internal paddings, please ensure that they are aligned correctly.

Navigation Indicator

It is important for users to be able to scan through the list and quickly identify the item for which the details are being shown in the second or third column. This is especially important for large lists. For this case, you can enable a “navigated” indicator for tables and lists to mark the item that was last opened.

If there are several tables/lists on one page, ensure that the indicator shows only for the last navigated item. There should never be two navigation indicators on one page.

SAP Fiori Elements

The flexible column layout is available in SAP Fiori elements for scenarios that use draft handling. If you use draft handling, we strongly recommend using the SAP Fiori elements implementation, wherever possible. The implementation already includes the navigation and routing behavior, as well as the Close and Full Screen actions, for example. Starting the application with two columns is also supported by SAP Fiori elements.

Resources

The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.

Using the semantic page significantly reduces the development effort for app teams, and ensures that the placement of the header and footer content conforms with the SAP Fiori Design Guidelines.

When to Use

Use the semantic page if:

• You are building a freestyle application.
• You want to use a predefined layout to reduce development time.

Do not use the semantic page if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, or object page.
• You want to implement an initial page or object page floorplan.
• You only need to display a small amount of information. In this case, use a dialog. If you must use the dynamic page, use letterboxing to mitigate the issue.

Components

The semantic page is based on the structure of the dynamic page. In short, the semantic page has the following elements:

1. Header title
2. Header content
3. Page content, dependent on the use case
4. Footer toolbar with finalizing actions

The control’s semantics determine whether content specified in the control appears in the header toolbar or footer toolbar.

Header Title

Mandatory Elements

• Title (1): The title is located on the left-hand side of the header title bar and is always visible.

Optional Elements

• Subtitle (2): The subtitle is always below the title and is often used to summarize the most important information.
• Breadcrumb (3): Depending on the use case, you can add a breadcrumb navigation.
• Key information (4): Key information is located in the middle area, and is left aligned. This can be text, mini facets, or KPI tags, for example.
• Global actions toolbar (5): The global actions toolbar for the entire floorplan is located on the right-hand side. Always use buttons for global actions, visualized either as text or icons. For more information, see header toolbar.
  Overflow menu: Actions move into the overflow from right to left. Icons are shown in the overflow menu with a corresponding text.
• Layout actions (6): These are actions like the Close or Full Screen / Exit Full Screen icons, which are mainly offered by the flexible column layout. Depending on the screen size, layout actions are placed either to the right of the global actions toolbar, separated by a divider line, or above the global actions.

For more information about the expandable and collapsible header and its features, see dynamic page.

Header Content

The optional header content is not defined in the semantic page and can be populated according to the use case.

Page Content

Like the header content, the page content is also not specified by the semantic page. It is proportionally the largest area of the layout and can be populated according to the use case.

Footer Toolbar

The footer toolbar is optional and contains the following components:

1. Message button (containing the message popover) on the left-hand side
2. Draft indicator on the right-hand side, just before the finalizing actions
3. Finalizing actions on the right-hand side

Behavior and Interaction

The interaction and guidelines for the dynamic page also apply for the semantic page. The actions in the semantic page and their order are predefined and follow the rules of the action placement concept. For more information about toolbars in general, see toolbar overview.

Initial Focus

When the semantic page is loaded, set the initial focus as follows:

• If the page is in display mode, set the focus on the first section.
• If the page is in edit mode, set the focus on the first empty mandatory field.
• If there are no mandatory fields in edit mode, set the focus on the first editable element or first action.

Responsiveness

The semantic page offers considerable freedom and flexibility. It is designed to adapt automatically to small, medium, and large screen sizes. Next to that the responsive behavior depends on the behavior of the content being displayed.

The title (sap.m.Title) and subtitle (sap.m.Text) on the left truncate in collapsed mode to save vertical space and wrap in expanded mode to offer the full text. This behavior needs to come from the respective controls for the title and subtitle. Overall, it is recommend not to show more than 2 lines of text in collapsed mode to avoid a disproportionate header height, especially on mobile devices, when no summary line is used. This can either be a combined title and subtitle or a longer wrapping title. For more information see wrapping and truncating text.

Key information (middle area, left aligned) stays as long as possible before it moves into the overflow.

Global actions also stay as long as possible, but have a predefined width depending on the available space. If no key information is available, the title and global actions automatically get more space. The toolbar follows the standard toolbar overflow guidelines, and adds buttons to the overflow menu from right to left.

The combination of a semantic page within in a flexible column layout and accompanying layout actions works as described for the dynamic page. The same applies for the summary line and letterboxing.

Top Tips

• Use always a header title.
• Use the header title and header content to provide the most relevant information and actions for your use case.
• Do not remove or disable actions within the header title when it is collapsed.
• Make sure that the layout actions in the flexible column layout are displayed correctly and never get hidden in the overflow.
• Start your application in expanded mode if users need further content or adjustment options to get started.
• Offer the pinning feature whenever users may need to fix the header content while scrolling through the page content.
• Activate the summary line on smartphones to help users focus on the actual content of the page.

Related Topics

The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.

One part of the dynamic page header (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.

When to Use

Use the dynamic page if:

• You want to build a freestyle application that uses the foundation layout components for SAP Fiori pages, such as the dynamic page header and the footer toolbar. Also see the related semantic page.
• You want to build a simple object page with only one section.
• You want to represent your application in full screen. Also the combination within the flexible column layout is possible.

Do not use the dynamic page if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, or object page. These floorplans already incorporate the dynamic page.
• You want to implement an initial page or an object page floorplan with complex content and several sections. These floorplans only use the dynamic page header.
• You only need to display a small amount of information. In this case, use a dialog instead. If you can’t avoid using the dynamic page, use letterboxing to mitigate the issue.

Dynamic Page vs. Semantic Page

The dynamic page is a skeleton structure that comes with empty content containers (page header, page content) and built-in responsive behavior.

This basic structure can be “filled” with content elements in three ways:

• Automatically: If you are using an SAP Fiori element floorplan, the content of the dynamic page is provided out of the box.
• Via the semantic page (recommended for freestyle apps): If you are creating a floorplan from scratch, you can use the semantic page (sap.f.semanticPage) to create a freestyle page. The semantic page is a separate control that comes with built-in logic for adding predefined content elements to the page, such as a title, global actions, and a footer toolbar. Using the semantic page significantly reduces the development effort for app teams, and ensures that the header and footer content is structured consistently.
  Note that in this case, the app developer uses only the semantic page control (which already embeds the dynamic page), and not the dynamic page control itself.
• Manually: Technically, it’s possible to build the dynamic page from scratch. However, implementing the dynamic page manually is a significant development effort! Only consider this option in exceptional cases (for example, if you have special requirements for a freestyle app that cannot be implemented using the preconfigured semantic page control).

Components

Like all layouts, the dynamic page is below the shell bar of the SAP Fiori launchpad, which is always at the very top. The dynamic page consists of the following areas:

1. Dynamic page header, comprising the header title (1a) and the expandable/collapsible header content (1b)
2. Title
3. Subtitle/summary
4. Key information / KPI
5. Global actions
6. Header features to expand/collapse (6a) and pin/unpin (6b) the header
7. Page content (differs depending on the use case and floorplan)
8. Footer toolbar with finalizing actions

Dynamic Page Header

The dynamic page header contains the header title (mandatory) and the header content (optional).

Header Title

The header title bar (sap.f.DynamicPageTitle) always contains one of the following elements:

Mandatory Elements

• Title (1): The title is located on the left of the header title bar, and is always visible. The title can contain one of the following components:

• • Title (text)
  • Link
  • Variant management
  • Input field (for the initial page)

Optional Elements

• Subtitle/summary (2)
  Placement: Always below the title. The subtitle is often used to summarize the most important information in the collapsed header content. For example, if the header area contains a filter (as in a list report, analytical list page, or overview page), the subtitle can be used to display the “Filtered By” information.
• Breadcrumb (3)
  Placement: Above the title. Depending on the floorplan and use case, you can add breadcrumb navigation. The breadcrumb is located above the header title, and is primarily used to display the hierarchy of subpages within an object page.
  Note that in the flexible column layout, the breadcrumb is only available in full screen mode, and only if just one column is visible.
• Key information (4)
  Placement: In the middle area, but left-aligned. Floorplans can also contain key information, such as text, mini facets, and KPI tags.
  Note that currently, KPI tags are only used within the analytical list page and worklist floorplans.
• Global actions (5)
  Placement: Global actions for the entire floorplan appear on the right-hand side of the header title bar. Always offer the actions as buttons, visualized either as text or icons. For more information, see Header Toolbar. In the collapsed mode, the header title offers the same actions as in the expanded mode and keeps them actionable.
• Layout actions (6)
  Placement: Typical layout actions are the Close, Full Screen, or Exit Full Screen icons, which are mainly offered by the flexible column layout. Depending on the screen size, the layout actions are placed either on the very right of the global actions toolbar, separated by a divider line, or above the global actions (see more in the Responsiveness section). Note that the dynamic page only provides the area for the layout actions. The navigation actions themselves are defined separately (for example, using the semantic page).

Header Content

The optional header content (sap.f.DynamicPageHeader) is located below the header title. You can place any components in the header content area (1) as long as they follow the guidelines for the respective floorplan.

When the dynamic page header collapses, the header content area is hidden. If there is no header content, the header content area is hidden automatically. In the latter case, the header title is not interactive (snap on scroll or snap on click) and there is no expand/collapse header feature.

Header Features

The header features (3) allow users to control the visibility of header content using two icon buttons at bottom of the header content area:

1. Expand/collapse header:  or   
2. Pin/unpin header content:  

Footer Toolbar

The footer toolbar (sap.m.Toolbar) is an optional part of the dynamic page. You can use it to offer closing or finalizing actions.

Combining the Dynamic Page with the Flexible Column Layout

The layout of the dynamic page is responsive and optimized for use within a flexible column layout. Each column (1, 2, 3) can contain its own dynamic page with a different floorplan, depending on the use case.

Behavior and Interaction

Initial Focus

The dynamic page itself doesn’t set an initial focus. The initial focus depends on the floorplan that is using the dynamic page and the specific app use case.

Starting in Expanded or Collapsed Mode

By default, the header content is initially expanded. In certain cases, it can also make sense to deviate from the default and allow the header to appear in collapsed mode when initiating the app. However, the idea is to always expand the header content when the application starts without a query (and the content area is therefore empty).

Snap on Scroll

Scrolling is the typical trigger for collapsing the header content. When the user scrolls down the page, the header content scrolls away. The header title switches to collapsed mode and stays fixed. When the user scrolls up the page, the header content expands again.

Note that this interaction pattern works only in combination with an expandable/collapsible header content. It can be combined with snap on click, but does not have to be.

Snap on Click

The snap on click pattern is another way of expanding and collapsing the header content. The user can collapse the header without scrolling, and expand it again even when it has been collapsed by scrolling down. Two interaction variants are offered, which always appear in combination: clicking the header title and clicking the Expand Header / Collapse Header icon button in the header features area.

Again, the interaction pattern works only in combination with expandable/collapsible header content. It can be combined with snap on scroll, but does not have to be.

Clicking the Header Title

The user can expand and collapse the header content by clicking anywhere on the header title bar that has no active elements (such as links or active buttons). When using a mouse, the cursor changes from an arrow to a hand to support the user’s interaction. In addition, a hover effect is visible on the header title and on the Expand Header / Collapse Header icon button in the header area. If the header is expanded and the user clicks the title bar, the header content collapses, and vice versa.

Clicking the Expand/Collapse Header Button

The expand/collapse header feature is a small icon button directly below the header, which is also used to expand or collapse the header content. When the pin is active, the expand/collapse header button is still available and overrules the pin. The icon buttons for expanding and collapsing the header are an alternative to clicking on the header title bar, which might not have much clickable space. They also support keyboard actions.

Pinning the Header Content

Activating the pin feature keeps the header expanded while the user scrolls through the page content. This mode remains fixed until the user clicks the pin icon again or triggers snap on click. This feature is optional and can be switched off if it is not useful for your application.

The expand/collapse header button remains visible when the pin is activated. Clicking the Collapse Header  icon overrules the pin, collapses the header, and switches the pin button off. Do not offer the pin feature for floorplans without scrollbars (see special case below), or if there is no header content.

In the smartphone version, the pin action is not provided, as the pinned header would take up too much screen real estate. The same applies whenever the dynamic page header would occupy more than 60% of the screen, regardless of the device type. Overruling the pin feature keeps the focus on the content.

Note that this interaction works only in combination with expandable/collapsible header content. The pin button is available as soon as snap on scroll (or snap on click) is activated.

Special Case: No Page Scrolling Possible

The following special case applies for pages containing desktop-centric tables, such as the analytical table, grid table, or tree table.

Because these tables use up all of the available screen space, there should not be a vertical scroll function, and hence no snap on scroll. In this special case, an explicit interaction via the expand/collapse header button is required to expand or collapse the content area. The pin feature is obsolete and is not provided.

This exceptional case also applies to chart containers that use up all the available screen space in a similar way to desktop-centric tables.

Keyboard Interaction

The dynamic page header expands automatically as soon as keyboard actions like tabbing or group jumps (F6) bring the content of the dynamic page header into focus.

The dynamic page header collapses as soon as the keyboard focus leaves the dynamic page header content area.

Responsiveness

The dynamic page offers considerable freedom and flexibility. In addition, the dynamic page header and the footer toolbar are designed to adapt automatically to small, medium, and large screen sizes.

The title (sap.m.Title) and subtitle (sap.m.Text) on the left truncate in collapsed mode to save vertical space, and wrap in expanded mode to offer the full text. This behavior needs to come from the respective controls for the title and subtitle. Overall, we recommend showing a maximum of 2 lines of text in collapsed mode. This prevents a disproportionate header height, especially on mobile devices if no summary line is used. The 2 lines can either be a combined title and subtitle, or a longer wrapping title. For more information, see wrapping and truncating text.

Key information, such as a KPI (middle area, left aligned), stays as long as possible before it moves into the overflow.

Global actions stay as long as possible. If there is no key information, the title and the global actions automatically get more space. The toolbar follows the standard toolbar overflow guidelines, and adds the available buttons to the overflow menu from right to left.

Layout actions: The dynamic page offers a specific area for layout actions, which reacts to the predefined breakpoint of 1280 px:

• Less than 1280 px: Navigation actions are placed in a separate row above the global actions.
• 1280 px or more: Navigation actions are placed to the right of the global actions on the same line.

This breakpoint corresponds to the page width and not to the window width. Therefore it doesn’t matter whether the page is used in the flexible column layout, on a desktop device, or on a mobile device.

Letterboxing limits the width of the content area to 1280 px. This prevents the app content from becoming too “stretched” on wide screens, and optimizes readability. Letterboxing can be used together with the dynamic page if the use case requires it. However, most business apps offer so much content that the page is typically shown across the entire screen, without letterboxing.

Summary Line

To save vertical space on smartphones, you can opt to display a smaller summary line instead of the collapsed header. The header content scrolls away as soon as the user scrolls up the page. The header converts to a summary line, which shows only the title and an arrow icon button on the very right of the screen. Tapping the summary line also expands and collapses the whole header. The rest of the page stays in the same position.

Examples

The dynamic page is a generic control. The content of both the header and the page differs from floorplan to floorplan. Here are some examples showing the most frequently-used variants for each type of floorplan. For detailed guidance, see the corresponding floorplan guidelines (analytical list page, overview page, list report, worklist, initial page, object page, wizard).

Top Tips

• Always use a header title – either as a text or link, or by including variant management. For the initial page floorplan, use an input field.
• Use the header title and header content to provide the most relevant information and actions for your use case.
• Only use KPI tags within the analytical list page and worklist floorplans.
• Do not remove or disable the actions within the global action toolbar when the header content is collapsed.
• Make sure that the layout actions in the flexible column layout are displayed correctly and never get hidden in the overflow.
• Start your application in expanded mode if users need further content or adjustment options to get started.
• Offer the pin feature whenever users may need to fix the header content while scrolling through the page content.
• Activate the summary line on smartphones to help users focus on the page content.

Related Links

The multi-instance layout allows the user to display and edit multiple objects within one page.

Beforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.

As a result, the user can work on several objects simultaneously and switch between them easily.

Usage

Use the multi-instance layout if users need to open and edit multiple objects simultaneously.

Do not use this layout if your users need a side-by-side display on the same page. Use the comparison pattern instead.

Components

The multi-instance layout uses a tab container.

The content of each tab is managed using an embedded object page floorplan.

The tab container holds:

1. Opened tabs
2. Scroll buttons and overview list (if not all tabs can be shown on the screen)
3. A Create button (optional)

Tabs

Each tab represents one object. One tab is always active, while the others are inactive.

The tab contains a title and a Close button:

• Title
  ID or name of the object. If the title text exceeds 25 characters, it is truncated.
  An asterisk next to the tab title indicates that the object was changed but not saved.
   Guideline: Use the same title as in the object page.
• Close button ( )
  The Close button is shown on all tabs.
   Guideline: If the user closes a tab without saving first, display a warning. See Handling Unsaved Changes.

Scroll Buttons and Overview List

The tab container has an overflow mechanism for cases where there are too many tabs to display on the screen:

• Horizontal scroll buttons (  and  ) can be used to scroll back and forth through the tabs.
• An overflow menu lists all the tabs, including the hidden tabs.

“Create” Button

You can offer a Create button on the far right of the tab container. Selecting this button opens a new tab containing an empty object page.

 Guideline: Only use this button if the application allows users to create new objects.

Behavior and Interaction

Opening Tabs

The multi-instance layout is always triggered from another page, such as a list report.

To work on multiple objects, users select the relevant objects and choose a triggering action, such as Open in Tabs (3). This opens a new page, in which the selected objects appear as tabs.

Closing Tabs

To close a tab, the user can click the Close ( ) button on the tab itself, or close the tab from the overflow menu.

Closing the Last Tab

When the last remaining tab is closed, the complete page is closed and the user is returned to the page from which the items were selected.

Handling Unsaved Changes

If objects have unsaved changes, the corresponding tabs show an asterisk (*) next to the title.

To prevent data loss, show a warning message in the following cases:

Responsiveness

The multi-instance layout is controlled by the sap.m.TabContainer control.

The tab container supports all three SAP Fiori responsive sizes: small, medium, and large.

Top Tips

• To open the page containing the tabs, use a meaningful button text with the number of selected objects in brackets.
  Recommended label: Open in Tabs (number of objects)
  Example: Open in Tabs (3).
• Use the same tab title as the object page title.
• Always use an object page floorplan to display the content of a tab.
• Only offer a Create button if the application allows users to create new objects.

Related Topics

The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.

The flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.

The flexible column layout is already incorporated within SAP Fiori elements.

Usage

Use the flexible column layout if:

• You want to create a master-detail or master-detail-detail scenario in which the user can drill down or navigate.

Do not use the flexible column layout if:

• You want to build a workbench or tools layout. The flexible column layout is not meant to provide a main column with additional side columns on the left and/or right. If you want to display additional content to enrich the main content and to help users better perform their tasks, use the dynamic side content instead.
• You want to create a dashboard with context-independent pages.
• You want to open multiple instances of the same object type. Use the multi-instance handling floorplan instead.
• You want to split a single object into multiple columns, or display only a small amount of information.
• You want to embed the SAP Fiori launchpad or overview page into one of the columns.

Structure

As with all layouts, the flexible column layout is embedded in the shell bar of the SAP Fiori launchpad. From the shell bar, users have access to the launchpad services, including the home page, search, settings, and help. Apps are embedded in the shell and have little influence over its features. The shell bar also provides the back navigation and the app title, including the navigation menu.

Depending on the current layout and display size, the flexible column layout consists of one, two, or three horizontally-aligned columns. Each column contains content that is not provided by the flexible column layout itself. The flexible column layout is not restricted to a specific floorplan, as long as the floorplan you use is responsive down to phone size. However, we recommend using the dynamic page.

Components

The flexible column layout offers a few simple actions that allow users to adapt the current layout according to their needs.

Note: Some of the actions (illustrated by blue lines in the image below) recover the last state of the layout to which they refer. In other words, the result of the action depends on the previous state of the layout.

Responsiveness

The flexible column layout changes its behavior for sizes XL, L, M and S in real time whenever the user resizes the screen.

If no previous state has been saved, ensure that the default layout appears automatically. For example, if the flexible column layout was initially loaded in size S and the user then navigates to the second column and changes the browser window to size M, show the default 2-column layout for size M (67% + 33%).

Full Screen Navigation

After switching a column to full screen mode, selecting the Back icon exits the full screen mode.

If the screen is in full screen mode, and the user navigates forward, also show the next column in full screen mode. If the user navigates backward, go back in full screen mode until the point where the user initially switched to full screen. If the user then clicks Back again, return to the multi-column mode.

Footer Toolbar

Each column of the flexible column layout can have its own footer toolbar. There is no overall footer toolbar that spans several columns.

Overlapping Header

The flexible column layout can display multiple floorplans side-by-side. However, it is not designed for splitting a single floorplan into several columns. As a result, there is no overall header that spans several columns. If you need to show additional content within a floorplan, use the dynamic side content.

Empty Details Column

Do not display an empty details column when using the flexible column layout. For example, if no items have been selected in the second column, do not show an empty third column.

Usage With One or Several Initial Full Screen Pages

Some use cases require starting an application with one or more full screen pages. You can do this by using the first column of the flexible column layout in full screen mode. This allows you to show one or several initial full screen pages with different content. Because of technical constraints, you must always use the flexible column layout to show this initial content.

Content Padding Inside Columns

The flexible column layout doesn’t provide additional paddings around the content area. Since some controls have different internal paddings, please ensure that they are aligned correctly.

Navigation Indicator

It is important for users to be able to scan through the master list and quickly identify the item for which the details are being shown in the second or third column. This is especially important for large lists. For this case, you can enable a “navigated” indicator for tables and lists to mark the item that was last opened.

If there are several tables/lists on one page, ensure that the indicator shows only for the last navigated item. There should never be two navigation indicators on one page.

SAP Fiori Elements

The flexible column layout is available in SAP Fiori elements for scenarios that use draft handling. If you use draft handling, we strongly recommend using the SAP Fiori elements implementation, wherever possible. The implementation already includes the navigation and routing behavior, as well as the Close and Full Screen actions, for example. Starting the application with two columns is also supported by SAP Fiori elements.

Resources

The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.

One part of the dynamic page header (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.

When to Use

Use the dynamic page if:

• You want to build a freestyle application that uses the foundation layout components for SAP Fiori pages, such as the dynamic page header and the footer toolbar. Also see the related semantic page.
• You want to build a simple object page with only one section.
• You want to represent your application in full screen. Also the combination within the flexible column layout is possible.

Do not use the dynamic page if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, or object page. These floorplans already incorporate the dynamic page.
• You want to implement an initial page or an object page floorplan with complex content and several sections. These floorplans only use the dynamic page header.
• You only need to display a small amount of information. In this case, use a dialog instead. If you can’t avoid using the dynamic page, use letterboxing to mitigate the issue.

Dynamic Page vs. Semantic Page

The dynamic page is a skeleton structure that comes with empty content containers (page header, page content) and built-in responsive behavior.

This basic structure can be “filled” with content elements in three ways:

• Automatically: If you are using an SAP Fiori element floorplan, the content of the dynamic page is provided out of the box.
• Via the semantic page (recommended for freestyle apps): If you are creating a floorplan from scratch, you can use the semantic page (sap.f.semanticPage) to create a freestyle page. The semantic page is a separate control that comes with built-in logic for adding predefined content elements to the page, such as a title, global actions, and a footer toolbar. Using the semantic page significantly reduces the development effort for app teams, and ensures that the header and footer content is structured consistently.
  Note that in this case, the app developer uses only the semantic page control (which already embeds the dynamic page), and not the dynamic page control itself.
• Manually: Technically, it’s possible to build the dynamic page from scratch. However, implementing the dynamic page manually is a significant development effort! Only consider this option in exceptional cases (for example, if you have special requirements for a freestyle app that cannot be implemented using the preconfigured semantic page control).

Components

Like all layouts, the dynamic page is below the shell bar of the SAP Fiori launchpad, which is always at the very top. The dynamic page consists of the following areas:

1. Dynamic page header, comprising the header title (1a) and the expandable/collapsible header content (1b)
2. Title
3. Subtitle/summary
4. Key information / KPI
5. Global actions
6. Header features to expand/collapse (6a) and pin/unpin (6b) the header
7. Page content (differs depending on the use case and floorplan)
8. Footer toolbar with finalizing actions

Dynamic Page Header

The dynamic page header contains the header title (mandatory) and the header content (optional).

Header Title

The header title bar (sap.f.DynamicPageTitle) always contains one of the following elements:

Mandatory Elements

• Title (1): The title is located on the left of the header title bar, and is always visible. The title can contain one of the following components:

• • Title (text)
  • Link
  • Variant management
  • Input field (for the initial page)

Optional Elements

• Subtitle/summary (2)
  Placement: Always below the title. The subtitle is often used to summarize the most important information in the collapsed header content. For example, if the header area contains a filter (as in a list report, analytical list page, or overview page), the subtitle can be used to display the “Filtered By” information.
• Breadcrumb (3)
  Placement: Above the title. Depending on the floorplan and use case, you can add breadcrumb navigation. The breadcrumb is located above the header title, and is primarily used to display the hierarchy of subpages within an object page.
  Note that in the flexible column layout, the breadcrumb is only available in full screen mode, and only if just one column is visible.
• Key information (4)
  Placement: In the middle area, but left-aligned. Floorplans can also contain key information, such as text, mini facets, and KPI tags.
  Note that currently, KPI tags are only used within the analytical list page and worklist floorplans.
• Global actions (5)
  Placement: Global actions for the entire floorplan appear on the right-hand side of the header title bar. Always offer the actions as buttons, visualized either as text or icons. For more information, see Header Toolbar. In the collapsed mode, the header title offers the same actions as in the expanded mode and keeps them actionable.
• Layout actions (6)
  Placement: Typical layout actions are the Close, Full Screen, or Exit Full Screen icons, which are mainly offered by the flexible column layout. Depending on the screen size, the layout actions are placed either on the very right of the global actions toolbar, separated by a divider line, or above the global actions (see more in the Responsiveness section). Note that the dynamic page only provides the area for the layout actions. The navigation actions themselves are defined separately (for example, using the semantic page).

Header Content

The optional header content (sap.f.DynamicPageHeader) is located below the header title. You can place any components in the header content area (1) as long as they follow the guidelines for the respective floorplan.

When the dynamic page header collapses, the header content area is hidden. If there is no header content, the header content area is hidden automatically. In the latter case, the header title is not interactive (snap on scroll or snap on click) and there is no expand/collapse header feature.

Header Features

The header features (3) allow users to control the visibility of header content using two icon buttons at bottom of the header content area:

1. Expand/collapse header:  or   
2. Pin/unpin header content:  

Footer Toolbar

The footer toolbar (sap.m.Toolbar) is an optional part of the dynamic page. You can use it to offer closing or finalizing actions.

Combining the Dynamic Page with the Flexible Column Layout

The layout of the dynamic page is responsive and optimized for use within a flexible column layout. Each column (1, 2, 3) can contain its own dynamic page with a different floorplan, depending on the use case.

Behavior and Interaction

Initial Focus

The dynamic page itself doesn’t set an initial focus. The initial focus depends on the floorplan that is using the dynamic page and the specific app use case.

Starting in Expanded or Collapsed Mode

By default, the header content is initially expanded. In certain cases, it can also make sense to deviate from the default and allow the header to appear in collapsed mode when initiating the app. However, the idea is to always expand the header content when the application starts without a query (and the content area is therefore empty).

Snap on Scroll

Scrolling is the typical trigger for collapsing the header content. When the user scrolls down the page, the header content scrolls away. The header title switches to collapsed mode and stays fixed. When the user scrolls up the page, the header content expands again.

Note that this interaction pattern works only in combination with an expandable/collapsible header content. It can be combined with snap on click, but does not have to be.

Snap on Click

The snap on click pattern is another way of expanding and collapsing the header content. The user can collapse the header without scrolling, and expand it again even when it has been collapsed by scrolling down. Two interaction variants are offered, which always appear in combination: clicking the header title and clicking the Expand Header / Collapse Header icon button in the header features area.

Again, the interaction pattern works only in combination with expandable/collapsible header content. It can be combined with snap on scroll, but does not have to be.

Clicking the Header Title

The user can expand and collapse the header content by clicking anywhere on the header title bar that has no active elements (such as links or active buttons). When using a mouse, the cursor changes from an arrow to a hand to support the user’s interaction. In addition, a hover effect is visible on the header title and on the Expand Header / Collapse Header icon button in the header area. If the header is expanded and the user clicks the title bar, the header content collapses, and vice versa.

Clicking the Expand/Collapse Header Button

The expand/collapse header feature is a small icon button directly below the header, which is also used to expand or collapse the header content. When the pin is active, the expand/collapse header button is still available and overrules the pin. The icon buttons for expanding and collapsing the header are an alternative to clicking on the header title bar, which might not have much clickable space. They also support keyboard actions.

Pinning the Header Content

Activating the pin feature keeps the header expanded while the user scrolls through the page content. This mode remains fixed until the user clicks the pin icon again or triggers snap on click. This feature is optional and can be switched off if it is not useful for your application.

The expand/collapse header button remains visible when the pin is activated. Clicking the Collapse Header  icon overrules the pin, collapses the header, and switches the pin button off. Do not offer the pin feature for floorplans without scrollbars (see special case below), or if there is no header content.

In the smartphone version, the pin action is not provided, as the pinned header would take up too much screen real estate. The same applies whenever the dynamic page header would occupy more than 60% of the screen, regardless of the device type. Overruling the pin feature keeps the focus on the content.

Note that this interaction works only in combination with expandable/collapsible header content. The pin button is available as soon as snap on scroll (or snap on click) is activated.

Special Case: No Page Scrolling Possible

The following special case applies for pages containing desktop-centric tables, such as the analytical table, grid table, or tree table.

Because these tables use up all of the available screen space, there should not be a vertical scroll function, and hence no snap on scroll. In this special case, an explicit interaction via the expand/collapse header button is required to expand or collapse the content area. The pin feature is obsolete and is not provided.

This exceptional case also applies to chart containers that use up all the available screen space in a similar way to desktop-centric tables.

Keyboard Interaction

The dynamic page header expands automatically as soon as keyboard actions like tabbing or group jumps (F6) bring the content of the dynamic page header into focus.

The dynamic page header collapses as soon as the keyboard focus leaves the dynamic page header content area.

Responsiveness

The dynamic page offers considerable freedom and flexibility. In addition, the dynamic page header and the footer toolbar are designed to adapt automatically to small, medium, and large screen sizes.

The title (sap.m.Title) and subtitle (sap.m.Text) on the left truncate in collapsed mode to save vertical space, and wrap in expanded mode to offer the full text. This behavior needs to come from the respective controls for the title and subtitle. Overall, we recommend showing a maximum of 2 lines of text in collapsed mode. This prevents a disproportionate header height, especially on mobile devices if no summary line is used. The 2 lines can either be a combined title and subtitle, or a longer wrapping title. For more information, see wrapping and truncating text.

Key information, such as a KPI (middle area, left aligned), stays as long as possible before it moves into the overflow.

Global actions stay as long as possible. If there is no key information, the title and the global actions automatically get more space. The toolbar follows the standard toolbar overflow guidelines, and adds the available buttons to the overflow menu from right to left.

Layout actions: The dynamic page offers a specific area for layout actions, which reacts to the predefined breakpoint of 1280 px:

• Less than 1280 px: Navigation actions are placed in a separate row above the global actions.
• 1280 px or more: Navigation actions are placed to the right of the global actions on the same line.

This breakpoint corresponds to the page width and not to the window width. Therefore it doesn’t matter whether the page is used in the flexible column layout, on a desktop device, or on a mobile device.

Letterboxing limits the width of the content area to 1280 px. This prevents the app content from becoming too “stretched” on wide screens, and optimizes readability. Letterboxing can be used together with the dynamic page if the use case requires it. However, most business apps offer so much content that the page is typically shown across the entire screen, without letterboxing.

Summary Line

To save vertical space on smartphones, you can opt to display a smaller summary line instead of the collapsed header. The header content scrolls away as soon as the user scrolls up the page. The header converts to a summary line, which shows only the title and an arrow icon button on the very right of the screen. Tapping the summary line also expands and collapses the whole header. The rest of the page stays in the same position.

Examples

The dynamic page is a generic control. The content of both the header and the page differs from floorplan to floorplan. Here are some examples showing the most frequently-used variants for each type of floorplan. For detailed guidance, see the corresponding floorplan guidelines (analytical list page, overview page, list report, worklist, initial page, object page, wizard).

Top Tips

• Always use a header title – either as a text or link, or by including variant management. For the initial page floorplan, use an input field.
• Use the header title and header content to provide the most relevant information and actions for your use case.
• Only use KPI tags within the analytical list page and worklist floorplans.
• Do not remove or disable the actions within the global action toolbar when the header content is collapsed.
• Make sure that the layout actions in the flexible column layout are displayed correctly and never get hidden in the overflow.
• Start your application in expanded mode if users need further content or adjustment options to get started.
• Offer the pin feature whenever users may need to fix the header content while scrolling through the page content.
• Activate the summary line on smartphones to help users focus on the page content.

Related Links

The multi-instance layout allows the user to display and edit multiple objects within one page.

Beforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.

As a result, the user can work on several objects simultaneously and switch between them easily.

Usage

Use the multi-instance layout if users need to open and edit multiple objects simultaneously.

Do not use this layout if your users need a side-by-side display on the same page. Use the comparison pattern instead.

Components

The multi-instance layout uses a tab container.

The content of each tab is managed using an embedded object page floorplan.

The tab container holds:

1. Opened tabs
2. Scroll buttons and overview list (if not all tabs can be shown on the screen)
3. A Create button (optional)

Tabs

Each tab represents one object. One tab is always active, while the others are inactive.

The tab contains a title and a Close button:

• Title
  ID or name of the object. If the title text exceeds 25 characters, it is truncated.
  An asterisk next to the tab title indicates that the object was changed but not saved.
   Guideline: Use the same title as in the object page.
• Close button ( )
  The Close button is shown on all tabs.
   Guideline: If the user closes a tab without saving first, display a warning. See Handling Unsaved Changes.

Scroll Buttons and Overview List

The tab container has an overflow mechanism for cases where there are too many tabs to display on the screen:

• Horizontal scroll buttons (  and  ) can be used to scroll back and forth through the tabs.
• An overflow menu lists all the tabs, including the hidden tabs.

“Create” Button

You can offer a Create button on the far right of the tab container. Selecting this button opens a new tab containing an empty object page.

 Guideline: Only use this button if the application allows users to create new objects.

Behavior and Interaction

Opening Tabs

The multi-instance layout is always triggered from another page, such as a list report.

To work on multiple objects, users select the relevant objects and choose a triggering action, such as Open in Tabs (3). This opens a new page, in which the selected objects appear as tabs.

Closing Tabs

To close a tab, the user can click the Close ( ) button on the tab itself, or close the tab from the overflow menu.

Closing the Last Tab

When the last remaining tab is closed, the complete page is closed and the user is returned to the page from which the items were selected.

Handling Unsaved Changes

If objects have unsaved changes, the corresponding tabs show an asterisk (*) next to the title.

To prevent data loss, show a warning message in the following cases:

Responsiveness

The multi-instance layout is controlled by the sap.m.TabContainer control.

The tab container supports all three SAP Fiori responsive sizes: small, medium, and large.

Top Tips

• To open the page containing the tabs, use a meaningful button text with the number of selected objects in brackets.
  Recommended label: Open in Tabs (number of objects)
  Example: Open in Tabs (3).
• Use the same tab title as the object page title.
• Always use an object page floorplan to display the content of a tab.
• Only offer a Create button if the application allows users to create new objects.

Related Topics

In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.

If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.

SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.

Guidelines

When to Switch ON Letterboxing

• You want to make the UI appear simple and focused.
• There is too little content on the UI to require using the full width of the screen.
• The content cannot respond to large differences in size, and stretching the app would distort the content and lead to poor usability.

Letterboxing can be switched on or off per entire application or for individual pages within an application. Only enable letterboxing for individual pages if the app contains one or a few pages that benefit from using letterboxing.

If you want to use letterboxing for an application, set the appWidthLimited property of the sap.m.Shell control to true.

In some cases, applications may need to have the flexibility to change the width at runtime for different views. Example: fullWidth in view A and letterboxing in view B.

Through a new API, apps can change the width in the AppConfiguration service at runtime for different views.

When to Switch OFF Letterboxing

• A lot of information needs to be displayed. This will require the app to accommodate the content to all intermediate screen sizes in a graceful way.
• The user needs to have as much content as possible on the screen without having to scroll. This has to be handled carefully as it can create a crowded and messy appearance.

The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.

The flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.

The flexible column layout is already incorporated within SAP Fiori elements.

Usage

Use the flexible column layout if:

• You want to create a list-detail or list-detail-detail layout, in which the user can drill down or navigate.

Do not use the flexible column layout if:

• You want to build a workbench or tools layout. The flexible column layout is not meant to provide a main column with additional side columns on the left and/or right. If you want to display additional content to enrich the main content and to help users better perform their tasks, use the dynamic side content instead.
• You want to create a dashboard with context-independent pages.
• You want to open multiple instances of the same object type. Use the multi-instance handling floorplan instead.
• You want to split a single object into multiple columns, or display only a small amount of information.
• You want to embed the SAP Fiori launchpad or overview page into one of the columns.

Structure

As with all layouts, the flexible column layout is embedded in the shell bar of the SAP Fiori launchpad. From the shell bar, users have access to the launchpad services, including the home page, search, settings, and help. Apps are embedded in the shell and have little influence over its features. The shell bar also provides the back navigation and the app title, including the navigation menu.

Depending on the current layout and display size, the flexible column layout consists of one, two, or three horizontally-aligned columns. Each column contains content that is not provided by the flexible column layout itself. The flexible column layout is not restricted to a specific floorplan, as long as the floorplan you use is responsive down to phone size. However, we recommend using the dynamic page.

Components

The flexible column layout offers a few simple actions that allow users to adapt the current layout according to their needs.

Note: Some of the actions (illustrated by blue lines in the image below) recover the last state of the layout to which they refer. In other words, the result of the action depends on the previous state of the layout.

Responsiveness

The flexible column layout changes its behavior for sizes XL, L, M and S in real time whenever the user resizes the screen.

If no previous state has been saved, ensure that the default layout appears automatically. For example, if the flexible column layout was initially loaded in size S and the user then navigates to the second column and changes the browser window to size M, show the default 2-column layout for size M (67% + 33%).

Full Screen Navigation

After switching a column to full screen mode, selecting the Back icon exits the full screen mode.

If the screen is in full screen mode, and the user navigates forward, also show the next column in full screen mode. If the user navigates backward, go back in full screen mode until the point where the user initially switched to full screen. If the user then clicks Back again, return to the multi-column mode.

Footer Toolbar

Each column of the flexible column layout can have its own footer toolbar. There is no overall footer toolbar that spans several columns.

Overlapping Header

The flexible column layout can display multiple floorplans side-by-side. However, it is not designed for splitting a single floorplan into several columns. As a result, there is no overall header that spans several columns. If you need to show additional content within a floorplan, use the dynamic side content.

Empty Details Column

Do not display an empty details column when using the flexible column layout. For example, if no items have been selected in the second column, do not show an empty third column.

Usage With One or Several Initial Full Screen Pages

Some use cases require starting an application with one or more full screen pages. You can do this by using the first column of the flexible column layout in full screen mode. This allows you to show one or several initial full screen pages with different content. Because of technical constraints, you must always use the flexible column layout to show this initial content.

Content Padding Inside Columns

The flexible column layout doesn’t provide additional paddings around the content area. Since some controls have different internal paddings, please ensure that they are aligned correctly.

Navigation Indicator

It is important for users to be able to scan through the list and quickly identify the item for which the details are being shown in the second or third column. This is especially important for large lists. For this case, you can enable a “navigated” indicator for tables and lists to mark the item that was last opened.

If there are several tables/lists on one page, ensure that the indicator shows only for the last navigated item. There should never be two navigation indicators on one page.

SAP Fiori Elements

The flexible column layout is available in SAP Fiori elements for scenarios that use draft handling. If you use draft handling, we strongly recommend using the SAP Fiori elements implementation, wherever possible. The implementation already includes the navigation and routing behavior, as well as the Close and Full Screen actions, for example. Starting the application with two columns is also supported by SAP Fiori elements.

Resources

The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.

Using the semantic page significantly reduces the development effort for app teams, and ensures that the placement of the header and footer content conforms with the SAP Fiori Design Guidelines.

When to Use

Use the semantic page if:

• You are building a freestyle application.
• You want to use a predefined layout to reduce development time.

Do not use the semantic page if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, or object page.
• You want to implement an initial page or object page floorplan.
• You only need to display a small amount of information. In this case, use a dialog. If you must use the dynamic page, use letterboxing to mitigate the issue.

Components

The semantic page is based on the structure of the dynamic page. In short, the semantic page has the following elements:

1. Header title
2. Header content
3. Page content, dependent on the use case
4. Footer toolbar with finalizing actions

The control’s semantics determine whether content specified in the control appears in the header toolbar or footer toolbar.

Header Title

Mandatory Elements

• Title (1): The title is located on the left-hand side of the header title bar and is always visible.

Optional Elements

• Subtitle (2): The subtitle is always below the title and is often used to summarize the most important information.
• Breadcrumb (3): Depending on the use case, you can add a breadcrumb navigation.
• Key information (4): Key information is located in the middle area, and is left aligned. This can be text, mini facets, or KPI tags, for example.
• Global actions toolbar (5): The global actions toolbar for the entire floorplan is located on the right-hand side. Always use buttons for global actions, visualized either as text or icons. For more information, see header toolbar.
  Overflow menu: Actions move into the overflow from right to left. Icons are shown in the overflow menu with a corresponding text.
• Layout actions (6): These are actions like the Close or Full Screen / Exit Full Screen icons, which are mainly offered by the flexible column layout. Depending on the screen size, layout actions are placed either to the right of the global actions toolbar, separated by a divider line, or above the global actions.

For more information about the expandable and collapsible header and its features, see dynamic page.

Header Content

The optional header content is not defined in the semantic page and can be populated according to the use case.

Page Content

Like the header content, the page content is also not specified by the semantic page. It is proportionally the largest area of the layout and can be populated according to the use case.

Footer Toolbar

The footer toolbar is optional and contains the following components:

1. Message button (containing the message popover) on the left-hand side
2. Draft indicator on the right-hand side, just before the finalizing actions
3. Finalizing actions on the right-hand side

Behavior and Interaction

The interaction and guidelines for the dynamic page also apply for the semantic page. The actions in the semantic page and their order are predefined and follow the rules of the action placement concept. For more information about toolbars in general, see toolbar overview.

Responsiveness

The semantic page offers considerable freedom and flexibility. It is designed to adapt automatically to small, medium, and large screen sizes. Next to that the responsive behavior depends on the behavior of the content being displayed.

The title (sap.m.Title) and subtitle (sap.m.Text) on the left truncate in collapsed mode to save vertical space and wrap in expanded mode to offer the full text. This behavior needs to come from the respective controls for the title and subtitle. Overall, it is recommend not to show more than 2 lines of text in collapsed mode to avoid a disproportionate header height, especially on mobile devices, when no summary line is used. This can either be a combined title and subtitle or a longer wrapping title. For more information see wrapping and truncating text.

Key information (middle area, left aligned) stays as long as possible before it moves into the overflow.

Global actions also stay as long as possible, but have a predefined width depending on the available space. If no key information is available, the title and global actions automatically get more space. The toolbar follows the standard toolbar overflow guidelines, and adds buttons to the overflow menu from right to left.

The combination of a semantic page within in a flexible column layout and accompanying layout actions works as described for the dynamic page. The same applies for the summary line and letterboxing.

Top Tips

• Use always a header title.
• Use the header title and header content to provide the most relevant information and actions for your use case.
• Do not remove or disable actions within the header title when it is collapsed.
• Make sure that the layout actions in the flexible column layout are displayed correctly and never get hidden in the overflow.
• Start your application in expanded mode if users need further content or adjustment options to get started.
• Offer the pinning feature whenever users may need to fix the header content while scrolling through the page content.
• Activate the summary line on smartphones to help users focus on the actual content of the page.

Related Topics

The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.  

When to Use

Use the comparison pattern if:

• Users need to compare two or more similar items.
• Users need to compare versions of the same item.
• You are using the Dynamic Page Layout.

Do not use the comparison pattern if:

• There is no business need for displaying items side-by-side. Don’t use the pattern purely for visualization.
• You want to display only one item. In this case, use the Object Page Floorplan instead.

Components

The comparison pattern comprises the following components. All are mandatory: 

• Triggering action: Opens the comparison view for the selected items.
• Header area: Shows the most important characteristics for identifying and comparing items. Each item is represented by a card.
• Content area: Shows all characteristics needed for comparison. Each item is represented by a panel.

Behavior and Interaction

The expand/collapse header and pin/unpin header features work as described in the Dynamic Page article.

Adding More Items

If your users need to add more items while comparing, place an Add to Comparison action in the header. For more information, see Dynamic Page Layout – Header Title.

For adding more items, either show a dialog or the original page the user started from. Make sure that you display the items that are already in the comparison: in the dialog, also show the previously selected items; in the original page, keep the items selected.

Responsiveness

The comparison pattern adapts the number of visible items based on the screen size. If a card is no longer in the visible area, also hide its corresponding column in the panels.

On size S, there is only one visible card in the header area and its corresponding panels in the content area. Users can navigate left or right to see the next or previous item.

The comparison pattern maintains the scrolling position of the page when switching to the next or previous item. This feature helps the user focus on a certain characteristic while navigating through the items.

On size M and larger, always show two or more cards with their corresponding panel columns in the visible area.

Example

Top Tips

Compare apples with apples.

Wording

• For triggering the comparison, use a meaningful button text with the number of selected items in brackets. We recommend “Compare (<number of selected items>)”, for example, Compare (3).
• Use a page title that describes the task. We recommend “Compare <selected object type>”, for example, Compare Products.
• Use precise panel titles to describe the characteristics.

Cards

• Show only the most important information for an item on the card.
• If the cards contain only a title, subtitle, and image/avatar, show the dynamic page header in collapsed mode when starting the app.
• Link each item’s object page (if available) to the header area of the card. This gives users access to all the characteristics for a specific item to help them make a final decision.

Related Topics

The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.  

When to Use

Use the comparison pattern if:

• Users need to compare two or more similar items.
• Users need to compare versions of the same item.
• You are using the Dynamic Page Layout.

Do not use the comparison pattern if:

• There is no business need for displaying items side-by-side. Don’t use the pattern purely for visualization.
• You want to display only one item. In this case, use the Object Page Floorplan instead.

Components

The comparison pattern comprises the following components. All are mandatory: 

• Triggering action: Opens the comparison view for the selected items.
• Header area: Shows the most important characteristics for identifying and comparing items. Each item is represented by a card.
• Content area: Shows all characteristics needed for comparison. Each item is represented by a panel.

Behavior and Interaction

The expand/collapse header and pin/unpin header features work as described in the Dynamic Page article.

Adding More Items

If your users need to add more items while comparing, place an Add to Comparison action in the header. For more information, see Dynamic Page Layout – Header Title.

For adding more items, either show a dialog or the original page the user started from. Make sure that you display the items that are already in the comparison: in the dialog, also show the previously selected items; in the original page, keep the items selected.

Responsiveness

The comparison pattern adapts the number of visible items based on the screen size. If a card is no longer in the visible area, also hide its corresponding column in the panels.

On size S, there is only one visible card in the header area and its corresponding panels in the content area. Users can navigate left or right to see the next or previous item.

The comparison pattern maintains the scrolling position of the page when switching to the next or previous item. This feature helps the user focus on a certain characteristic while navigating through the items.

On size M and larger, always show two or more cards with their corresponding panel columns in the visible area.

Example

Top Tips

Compare apples with apples.

Wording

• For triggering the comparison, use a meaningful button text with the number of selected items in brackets. We recommend “Compare (<number of selected items>)”, for example, Compare (3).
• Use a page title that describes the task. We recommend “Compare <selected object type>”, for example, Compare Products.
• Use precise panel titles to describe the characteristics.

Cards

• Show only the most important information for an item on the card.
• If the cards contain only a title, subtitle, and image/avatar, show the dynamic page header in collapsed mode when starting the app.
• Link each item’s object page (if available) to the header area of the card. This gives users access to all the characteristics for a specific item to help them make a final decision.

Related Topics

The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.

One part of the dynamic page header (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.

When to Use

Use the dynamic page if:

• You want to build a freestyle application that uses the foundation layout components for SAP Fiori pages, such as the dynamic page header and the footer toolbar. Also see the related semantic page.
• You want to build a simple object page with only one section.
• You want to represent your application in full screen. Also the combination within the flexible column layout is possible.

Do not use the dynamic page if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, or object page. These floorplans already incorporate the dynamic page.
• You want to implement an initial page or an object page floorplan with complex content and several sections. These floorplans only use the dynamic page header.
• You only need to display a small amount of information. In this case, use a dialog instead. If you can’t avoid using the dynamic page, use letterboxing to mitigate the issue.

Dynamic Page vs. Semantic Page

The dynamic page is a skeleton structure that comes with empty content containers (page header, page content) and built-in responsive behavior.

This basic structure can be “filled” with content elements in three ways:

• Automatically: If you are using an SAP Fiori element floorplan, the content of the dynamic page is provided out of the box.
• Via the semantic page (recommended for freestyle apps): If you are creating a floorplan from scratch, you can use the semantic page (sap.f.semanticPage) to create a freestyle page. The semantic page is a separate control that comes with built-in logic for adding predefined content elements to the page, such as a title, global actions, and a footer toolbar. Using the semantic page significantly reduces the development effort for app teams, and ensures that the header and footer content is structured consistently.
  Note that in this case, the app developer uses only the semantic page control (which already embeds the dynamic page), and not the dynamic page control itself.
• Manually: Technically, it’s possible to build the dynamic page from scratch. However, implementing the dynamic page manually is a significant development effort! Only consider this option in exceptional cases (for example, if you have special requirements for a freestyle app that cannot be implemented using the preconfigured semantic page control).

Components

Like all layouts, the dynamic page is below the shell bar of the SAP Fiori launchpad, which is always at the very top. The dynamic page consists of the following areas:

1. Dynamic page header, comprising the header title (1a) and the expandable/collapsible header content (1b)
2. Title
3. Subtitle/summary
4. Key information / KPI
5. Global actions
6. Header features to expand/collapse (6a) and pin/unpin (6b) the header
7. Page content (differs depending on the use case and floorplan)
8. Footer toolbar with finalizing actions

Dynamic Page Header

The dynamic page header contains the header title (mandatory) and the header content (optional).

Header Title

The header title bar (sap.f.DynamicPageTitle) always contains one of the following elements:

Mandatory Elements

• Title (1): The title is located on the left of the header title bar, and is always visible. The title can contain one of the following components:

• • Title (text)
  • Link
  • Variant management
  • Input field (for the initial page)

Optional Elements

• Subtitle/summary (2)
  Placement: Always below the title. The subtitle is often used to summarize the most important information in the collapsed header content. For example, if the header area contains a filter (as in a list report, analytical list page, or overview page), the subtitle can be used to display the “Filtered By” information.
• Breadcrumb (3)
  Placement: Above the title. Depending on the floorplan and use case, you can add breadcrumb navigation. The breadcrumb is located above the header title, and is primarily used to display the hierarchy of subpages within an object page.
  Note that in the flexible column layout, the breadcrumb is only available in full screen mode, and only if just one column is visible.
• Key information (4)
  Placement: In the middle area, but left-aligned. Floorplans can also contain key information, such as text, mini facets, and KPI tags.
  Note that currently, KPI tags are only used within the analytical list page and worklist floorplans.
• Global actions (5)
  Placement: Global actions for the entire floorplan appear on the right-hand side of the header title bar. Always offer the actions as buttons, visualized either as text or icons. For more information, see Header Toolbar. In the collapsed mode, the header title offers the same actions as in the expanded mode and keeps them actionable.
• Layout actions (6)
  Placement: Typical layout actions are the Close, Full Screen, or Exit Full Screen icons, which are mainly offered by the flexible column layout. Depending on the screen size, the layout actions are placed either on the very right of the global actions toolbar, separated by a divider line, or above the global actions (see more in the Responsiveness section). Note that the dynamic page only provides the area for the layout actions. The navigation actions themselves are defined separately (for example, using the semantic page).