The dynamic page is a generic layout control designed to support various floorplans and use cases. The content of both the header and the page can differ from floorplan to floorplan.

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

The dynamic page also includes an optional footer toolbar 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 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 below the shell bar of the SAP Fiori launchpad. The shell bar is always at the very top, and gives users access to the launchpad services, including the home page, search, settings, and help. 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, and global actions (always visible)
• The header content (expandable/collapsible area) (optional)
• 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 (sap.f.DynamicPageTitle) always contains one of 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 (sap.m.Title)
  • Link
  • Variant management
• Visual indicator: Allows the user to expand and collapse the header content (see Behavior and Interaction).

Additional Elements (optional)

• Subtitle/summary
  Placement: Always below the title. The subtitle (sap.m.Text) 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).
• Breadcrumb
  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. In the flexible column layout, the breadcrumb is only available in full screen mode and not in the multi-column layout.
• Key information
  Placement: In the middle area, but left-aligned. 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
  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 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
  Placement: 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). Layout actions, such as the Close or Full Screen / Exit Full Screen icons, are mainly offered by the flexible column layout. The Close or Full Screen / Exit Full Screen icons should always stay on the very right. This ensures that the position of the actions remains stable, even if other layout actions (like Up and Down arrows) are added. They never move into the overflow. The dynamic page only offers the area for the layout actions. The navigation actions themselves are defined separately (for example, using the semantic page).

Header Content

Located below the header title, the header content (sap.f.DynamicPageHeader) 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. You can also hide the header content if it is empty. In the latter case, the header title is not interactive.

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 (sap.m.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. 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.

Behavior and Interaction

Keyboard Interaction

For keyboard interaction, the dynamic page header expands automatically as soon as the content of the dynamic page 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