The semantic page is designed to support freestyle applications. By predefining where elements such as titles, global actions, and finalizing actions are placed, the semantic page helps designers and developers to implement and comply with the SAP Fiori Design Guidelines more easily. Based on the dynamic page and possessing its functionalities, the semantic page also adds semantic meaning to specific elements on the page.

Usage

Use the semantic page if:

• You are building a freestyle application.
• You want to use a predefined layout to reduce development time.

Do not use the semantic page if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, object page.
• You want to implement an initial page or object page floorplan, as these already incorporate the snapping header and footer toolbar features, but with a different technical base.
• You only need to display a small amount of information. In this case, use a dialog. If you must use the dynamic page layout, use letterboxing to mitigate the issue.

Structure

The semantic page is based on the structure of the dynamic page layout. The semantic page consists of:

• The header title with global actions (always visible).
• The content of the page with a footer toolbar and finalizing actions (optional).

The control’s semantics determine whether content specified in the control will appear in the header toolbar or footer toolbar.

Header Title

The title is located on the left-hand side of the header title (sap.m.Title) and contains the following components :

• An optional global actions toolbar for the entire floorplan, located on the right-hand side. These actions should be represented using buttons, visualized either as text or icons. For more information, see header toolbar.
• Overflow menu for actions, moving into the overflow from right to left. Icons are shown in the overflow menu with a corresponding text.

In the case of the flexible column layout, navigation actions are placed in the same toolbar as the global actions, separated with a vertical separation line.

Footer Toolbar

The footer toolbar is optional and contains the following components:

• Message indicator (containing message popover) on the left-hand side
• Draft indicator
• Finalizing actions on the right-hand side

Actions

Actions in the Header Toolbar

The following actions are available in the semantic page:

• Application-specific actions determined by use case
• Global actions
• Navigation actions – only in flexible column layout.

In the semantic page, the order of the actions is predefined:

1. Emphasized button: Application-specific or semantic text button
2. Text buttons: Application-specific actions precede semantic (generic) actions
3. Icon buttons: Application-defined buttons precede semantic icons, such as Favorite, Flag and Share
4. Navigation actions with vertical separator: Used only in flexible column layout

Actions in the Footer Toolbar

In the semantic page, the order of the actions is predefined.

• The leftmost button is emphasized or positive/negative. Only one button can be emphasized at a time. The default actions for these buttons are Save, Accept, and Reject. If your header toolbar contains an emphasized button (excluding the message handling button), try to avoid using emphasized buttons in the footer toolbar.
• The transparent buttons appear next. They can include some of the actions below:
  • Post
  • Start Process
  • Send
  • Release
  • Save
  • Submit
  • Cancel
  • Forward
  • Confirm

A transparent button can also include custom application-specific actions. These will appear on the right-hand side of the footer toolbar.

Responsiveness and Adaptiveness

Guidelines

Please see the Guidelines section in the toolbar overview and dynamic page layout article.

Resources