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

The dynamic page header enables the user to focus on the actual content, while still keeping the most important information and actions of the header available to provide additional value to the user.

The dynamic page layout is a generic control. The content of the dynamic page header as well as the content of the page differs from floorplan to floorplan. The dynamic page header itself is a kind of container which can be used for several controls. For detailed guidance, please refer to the corresponding floorplan article:

• Initial page
• List report
• Object page: The object page also offers a snapping header feature, but uses different underlying technology to the dynamic page.
• Overview page
• Wizard
• Worklist

The dynamic page is already incorporated within all SAP Fiori element floorplans.

The footer toolbar is also part of the dynamic page layout and is used for closing or finalizing actions that impact the whole page.

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 list report, overview page, object page, which already incorporate the dynamic page layout.
• You want to implement an initial page or object page floorplan, as they already incorporate the snapping header and footer toolbar features. The behavior is similar to the dynamic page, but the technical base 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. It also provides the back navigation and the app title, including the navigation menu.

Components

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

The content of the dynamic page header and the page content differ from floorplan to floorplan. For detailed guidance and more information about the variations within the respective floorplans, please refer to the corresponding floorplan article:

• Initial page
• List report
• Object page
• Overview page
• Wizard
• Worklist

There are different states for the dynamic page header. You can find further information in the Behavior and Interaction section of this article.

Header Title

The header title bar contains the following elements.

Mandatory Elements

• Title
  Located to the left of the dynamic page header, the title is always visible. The title can contain the following components:

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

If the title does not use an actionable element (such as variant management or link), the header title text must be used to expand and collapse the corresponding header content (see the Behavior and Interaction section). Exceptions exist for two floorplans: The initial page contains an input field instead of the title and subtitle; and in the overview page, the header title and title text are optional when no filter bar is used within the header content.

Optional Elements

• Breadcrumb
  Depending on the use case and the way that a floorplan is used, breadcrumb navigation can be added. The breadcrumb is located above the header title. It’s mainly used for displaying the hierarchy of subpages within the object page.

• Subtitle
  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 a filter bar is used within the header content, such as with the list report, , 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, it should be clickable to allow the user to expand/collapse the header content. This needs to be provided additionally to the entire clickable area of the header title bar (see Behavior and Interaction).

• Key information
  Floorplans can also contain key information such as text, mini-facets, and KPI tags.

• Global action toolbar
  Global actions for the entire floorplan should be placed on the right-hand side of the header title. The actions should be represented only with buttons, visualized either as text or icons. For more information, see header toolbar.
  In the collapsed mode, the header title incorporates all the same actions as with the expanded mode and keeps them actionable. Do not remove or disable the actions within the global action toolbar when the header content is collapsed.

Header Content

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

Any components may be placed within the header content provided these follow the respective standard floorplan guidelines.

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

Additionally, the header content includes a “Pin/Unpin” toggle action (optional feature), which allows the user to keep the expanded mode of the header title and all elements in the header content fixed even upon scrolling and clicking (see Behavior and Interaction).

Footer Toolbar

The footer toolbar is also an optional part of the dynamic page layout that provides the possibility of 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. The interaction design recommends 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.

Examples

The dynamic page layout is a generic control. The content of the dynamic page header as well as the content of the page differs from floorplan to floorplan. Here you can find examples of the frequently-used variant per floorplan. For detailed guidance, please refer to the corresponding floorplan article (overview page, list report, worklist, wizard).

Resources