Intro

The dynamic page is a generic layout control designed to support various floorplans and use cases.

Dynamic page

When to Use

Use the dynamic page if:

You want to build a freestyle application that uses dynamic page layout components for SAP Fiori pages, such as the dynamic page header and the footer toolbar.
You want to build a simple object page with only one section.
You want to use a full screen layout.
You want to use dynamic pages in a flexible column layout.

Don't

Don’t use the dynamic page if:

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.

Always use a header title – either as a text or link, or by including variant management.
Use the header title and header content to provide the most relevant information and actions for your use case.
Don’t 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.
Don’t offer the pin feature for size S screens. This saves vertical space.
Activate the summary line on size S screens to help users focus on the page content.

Anatomy

Anatomy of the dynamic page

The dynamic page consists of a title, a header with dynamic behavior, a content area, and an optional floating footer.

Dynamic page header: Comprises the header title (a) and expandable/collapsible header content (b).
a. Header title: The title area contains a mandatory title element, along with optional elements such as breadcrumbs, subtitle/summary, content, KPIs, and actions.
b. Expandable/collapsible header content: An area that can hold any components, depending on the use case. This content is hidden when the dynamic header collapses.
Expand Header and Pin Headerbuttons: Buttons used to expand or collapse the header, and to pin or unpin the expanded header.
Content area: The content of the dynamic page.
**Optional:**Footer area: A footer toolbar is used for finalizing page actions.

Types

Freestyle Dynamic Page

In the freestyle dynamic page, any component can be placed in the title and header content areas.

Example of a freestyle dynamic page

Combining the Dynamic Page with the Flexible Column Layout

The dynamic page can be combined with the flexible column layout.

For example, each column can contain its own dynamic page with a different floorplan, depending on the use case.

Example: Dynamic pages within a flexible column layout

guideline

In the flexible column layout, ensure that the icons for the Close or Full Screen / Exit Full Screen actions always stay on the very right. Their position then remains stable, even if other actions are added (such as the paging buttons :icon-slim-arrow-upand :icon-slim-arrow-down). The Close and Full Screen / Exit Full Screen actions must never move into the overflow.

Dynamic Page for Floorplans

Many SAP Fiori floorplans use the dynamic page, or are visually aligned to look the same (for example, overview page, list report, worklist, object page, wizard).

Example of a dynamic page used for a list report

Behavior & Interaction

The dynamic page header supports three optional interaction patterns that can be combined. With snap on scroll or snap on click, the header content can be collapsed or expanded. In addition, the header content can be fixed with the pin feature.

By default, all three interaction patterns are combined and activated.

Dynamic page header can be snapped on scroll

Dynamic page header can be snapped on click

The header content can be pinned

Starting in Expanded or Collapsed Mode

The dynamic header has both expanded and collapsed modes. By default, the header content is initially expanded.

You can opt to display the header in collapsed mode when the app is opened, deviating from the default. However, the idea is to always expand the header content when the application starts without a query.

Dynamic page – expanded mode

Dynamic page – collapsed mode

Snap on Scroll

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.

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. This interaction only works in combination with expandable/collapsible header content.

There are two click options. Users can:

Click the header title area
Click the Expand Header icon button

This interaction pattern can be combined with snap on scroll.

Clicking the Header Title Area

The user can expand and collapse the header content by clicking anywhere on the header title area that has no active elements (like links or active buttons).

Clicking the Expand Header Button

The Expand Header icon button directly below the header can also be used to expand or collapse the header content.

Pinning the Header Content

Activating the pin feature keeps the header expanded while the user scrolls through the page content. This interaction works only in combination with expandable/collapsible header content.

Dynamic page header with pin feature activated

Responsive Behavior

Responsiveness

The dynamic page is designed to adapt automatically to small, medium, and large screen sizes.

Dynamic Page in Sizes S, M, L, and XL

guideline

On small screens, the Pin Header action is not provided, as the pinned header would take up too much screen real estate.

Summary Line

To save vertical space on small screens, the dynamic page header offers 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 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.

Size S screen with summary line

Wrapping and Truncation

The dynamic page offers considerable freedom and flexibility.

Global Actions

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.

Wrapping and truncation of global actions

Title and Subtitle

The title and subtitle wrap in expanded mode to offer the full text. This behavior needs to come from the respective controls for the title and subtitle.
The title and subtitle truncate in collapsed mode to save vertical space.

Wrapping and truncation of the title and subtitle

Layout Actions

The placement of navigation actions depends on the screen size:

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.