The dynamic page is a layout control designed to support various floorplans and use cases. The layout is fully responsive and is the successor of the full screen layout.

The design of the dynamic page header helps users to focus on the actual page content, but still ensures that important header information and actions are readily available.

Usage

Use the dynamic page layout if:

• You are building a freestyle application that uses the dynamic page header and footer toolbar features of SAP Fiori 2.0 (versions 1.40 and higher).

Do not use the dynamic page layout if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, or object page, which already incorporate the dynamic page layout.
• You want to implement an initial page or object page floorplan. These floorplans already incorporate snapping header and footer toolbar features. The behavior is similar to the dynamic page, but the technical foundation is different.
• You only need to display a small amount of information. In this case, use a dialog instead. If you cannot avoid using the dynamic page layout, use letterboxing to mitigate the issue.

Structure

Like all layouts, the dynamic page 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.

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

The dynamic page layout consists of three main areas:

• The header title combined with the subtitle/summary, key information (optional), and global actions (always visible)
• The header content (expandable/collapsible area)
• The content of the page, with a footer toolbar and finalizing actions (optional)

Depending on your use case, you can either use one of the predefined floorplans, or create your own layout.

Components

Together, the header title (mandatory) and the header content (optional) form the dynamic page header.

Header Title

The header title bar contains the following elements.

Mandatory Elements

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

• • Text (mandatory)
  • Link (optional)
  • Variant management (optional)

Additional Elements (optional)

• Subtitle/summary
  The subtitle is often used to summarize the most important information pertaining to the collapsed header content.  For instance, it can be used to display the “Filtered by” information when the header content area contains a filter bar (for example, in a list report, analytical list page, or overview page). The subtitle can also be used to show information about the active tab within the worklist floorplan. Because the initial page contains an input field, no subtitle is needed. If the subtitle is used as a summary, make it clickable to allow the user to expand/collapse the header content. This needs to be provided as an additional feature, in parallel to the clickable area for the header title bar (see Behavior and Interaction).
• Breadcrumb
  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. In the flexible column layout, the breadcrumb is only available in full screen mode and not in the multi-column layout.
• Key information
  Floorplans can also contain key information such as text, mini-facets, and KPI tags. Currently, KPI tags are only used within the analytical list page floorplan.
• Global actions toolbar
  Place global actions for the entire floorplan 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 expanded mode and keeps them actionable. Do not remove or disable the actions within the global action toolbar when the header content is collapsed.
• Layout actions
  Layout actions, such as the Close or Full Screen / Exit Full Screen icons offered by the flexible column layout. Place these actions on the very right of the global actions toolbar and never move them into the overflow. Position the transparent Show/Hide <header content> button as the last text button before the icons. For more information, see the Exceptions section.

Header Content

Located below the header title, the header content is optional.

You can place any components in the header content area, provided that they follow the guidelines for the respective floorplan.

When the dynamic page header collapses, the header content is hidden. If the header content is empty, it can also be hidden. If no header content is available, the header title is not interactive, and hence no dynamic page header functionality is provided.

In addition, the header content area includes an optional Pin/Unpin toggle action. This feature allows the user to keep the header title and all elements in the header content expanded, even when scrolling and clicking (see Behavior and Interaction).

Footer Toolbar

The footer toolbar is also an optional part of the dynamic page layout. You can use it to offer closing or finalizing actions.

Responsiveness

Letterboxing means limiting the width of the content area to 1280 px. This prevents the app content from becoming too “stretched” on wide screens, and optimizes readability.

Behavior and Interaction

Keyboard Interaction

The dynamic page header is a header that expands/collapses its content. We recommend exposing the expand functionality on click (on the header title bar) and on scroll events.

In addition, an optional expand button/link allows the user to manually expand the header via mouse interaction (see the exceptional case: desktop-centric table usage). This button is not embedded into the tab chain if the dynamic page header automatically expands while receiving keyboard focus.

For keyboard interaction, the dynamic page header expands automatically as soon as the content of the snapping header comes into focus via the keyboard, such as via tabbing or via group jumps (F6).

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

Resources