Overview

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.

Look and Feel

See also:

Fiori Design Guideline - Dynamic Page

When To Use

1
do
false

Recommended

  • Prefer Dynamic Page over all other page layouts
  • Use as a content container for Multi-Instance Tabs
  • Use as a content container in Flexible Colum Layout columns
1
dont
false

Not Recommended

  • Avoid nesting Dynamic Page inside other pages
  • Avoid nesting other pages inside Dynamic Page
  • Avoid using Flexible Column Layout inside Dynamic Page
  • Avoid adding decorations in Dynamic Page header.

Anatomy

The Dynamic Page is the main holder for content. It is a composite control that is build up from several containers. Some of them are used for specific purposes, while others are available to place any control inside. Mix and match the ones you need to make the most for your product.

Image
1
3.33; 6.94
Title (Mandatory)
Designates the name of the page and provides context for the content.
2
9.00; 11.19
Subtitle (Optional)
Provides a secondary information, additional identifier or data.
3
4.33; 30.31
KPI (Optional)
Provides additional data KPI related to the page content.
4
4.17; 84.56
Global Actions
Trigger actions in the form of buttons which affect the entirety of the page content.
5
20.50; 14.44
Header Content (Optional)
An empty container area for hosting key page information.
6
26.83; 50.69
Layout Controls (Optional)
Controls the visibility of the header area.
7
53.00; 67.31
Content
An empty area which holds all the page information.
8
93.33; 76.31
Footer
Contains finalising actions triggered by the global actions.

Title (Mandatory)

The title of the dynamic page provides information about the context of the entire page. It could be a short descriptor or the display name of an object (ex. Applications, Project Titan, Apple MacBook Pro, etc.).

1
do
false

Recommended

  • Keep the titles short and to the point. Try to fit them in 2 or 3 words

Subtitle (Optional)

The subtitle is an additional descriptor of the context like status, additional information, type, number, etc.

1
do
false

Recommended

  • Try to keep subtitles in text format

KPI (Optional)

This is an arad of the dynamic page that allows for displaying key data in a more graphical format.

1
do
false

Recommended

  • Try to use visually rich controls (ex. Generic Tag, Info Label, Message Strip).

Global Actions

This is an area that hosts buttons to perform trigger actions related to the whole page content. It also contains layout actions that allow resizing and closing the page when used in Flexible Column Layout.

1
do
false

Recommended

  • Try and place the main action in an emphasized state first
  • Make sure all actions are global acton and affect the entirety of the content.

See also:

Header Actions

UXC Product Standard - Action Placement

Header Content (Optional)

This is a generic container that will host any control. It can be used to display form data, simple filters, or anything that is related to the content of the entire page.

1
dont
false

Not Recommended

  • Avoid pinning the header by default
  • Avoid collapsing the header by default

Layout Controls (Optional)

These control the behavior of the header. You can either expand and collapse the header or pin it so it does not scroll up.

1
dont
false

Not recommended

  • Avoid showing the layout controls

Content

The content of your page. Can contain any control in any combination.

Only displayed when a header trigger action is performed. Contains finalizing actions related to the entire page content.

See also:

Footer Actions

UXC Product Standard - Action Placement

Resources

See also:

UI5 DemoKit Sample - Dynamic Page

Fundamental Styles Sample - Dynamic Page