Object Page – Header

Intro

The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.

For design information, see the Object Page Floorplan guidelines and the links below.

Always build the object page using the dynamic page header.

Set the shellbar page title to the name of the business object shown in the object page to indicate the user’s position in the system.

Do not use the current implementation of the “page variant” feature in SAP Fiori elements. This feature is technically available for object pages, but we are still working on the final design.

Feature Availability

Behavior and Interaction

Availability

Expanded State
Default on initial load
Collapsed State

Default on scroll

With SAP Fiori elements for OData V2, on mobile phone screens, the object page displays a summary line instead of the collapsed header.

Header Content Display in Display Mode
In the header content area
Header Content Display in Edit and Create Modes

When the header is editable:

  • The first dynamic section in the content area, the header section, displays all the fields in the header that can be rendered in a form — both editable and uneditable fields.
  • UI elements in the header that cannot be rendered in a form, such as micro charts, are not shown.
Header Content Visible
Default, you can hide it.
Header Content Hidden
Available
Header Field Editability

By default, in edit mode the header is:

  • Not editable with SAP Fiori elements for OData V2
  • Editable with SAP Fiori elements for OData V4

You can change the default.

Highlighting Values Based on Criticality
Available

Components

Availability

Dynamic Page Header
Mandatory, it must be configured.
Title
Mandatory, you must define it.
Menu for Saved Version / Draft
Default for draft-enabled applications
Breadcrumbs
Default
Subtitle
Available, you define the text.
Object Marker
Default in draft-enabled applications
Image
Available
Paging Buttons on the First Object Page
Available with SAP Fiori elements for OData V2 only
Paging Buttons on the First Subobject Page
Default under certain conditions
Toolbar
Available

Toolbar Actions

Availability

Edit and Delete

Default, when the data allows these actions.

You can turn one or both actions off.

Copy
Available with SAP Fiori elements for OData V2
Related Apps Menu Button

Available

With SAP Fiori elements for OData V4, you can change the button name to Open in…

Generic Actions
Default: Share is turned on for saved objects and turned off for drafts.
Application-Specific Actions
Available, they must be configured.
Conditional Enablement of Navigation Buttons

Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2

Order of Toolbar Actions

Default

You can change the default order.

Additional Content (Optional)

Availability

Message Strip
Available with SAP Fiori elements for OData V4 to provide information related to the object as a whole, such as the object status
Simple Header Facets
Available with SAP Fiori elements for OData V2 only
Plain Text Facets
Available
Contact Facets
Available
Micro Chart Facets
Available
Form Facets
Available
Address Facets
Available
Header Field Group
Available
Rating Indicator Facets
Available
Progress Indicator Facet
Available
Key Value Facet
Available
Link

Available

With SAP Fiori elements for OData V2:

  • The default link shows the text and ID. You can remove the text or the ID from the link.
  • You can include a link that navigates to a site external to the application.

Behavior and Interaction

Collapsed/Expanded State

When the object page header contains at least one facet:

  • On the initial load of the object page, the header is expanded.
  • When the user scrolls down the page, the header collapses.
  • The Expand/Collapse button and the Pin/Unpin button are displayed.

When the object page header contains only a title and a subtitle, the Expand/Collapse button and the Pin/Unpin button are not displayed.

With SAP Fiori elements for OData V2, when users scroll on a mobile phone screen, the object page optimizes the screen space by displaying a summary line instead of the collapsed header.

Next to the title, an arrow button lets the users expand the header.

For more information, see:

Summary Line for Object Page Header on Small Screens

Summary Line for Object Page Header on Small Screens

Display of Header Content

In display mode, the header content area displays all the header content.

In edit and create modes, when the header is:

The header section is only present in the edit and create modes.

Note that, by default, the header is

You can ask the application developers to change the default.

For more information, see Dynamic Page Header (Mandatory).

To change the default for the editability of the header, you can refer the application developers to: Toggling the Editability of Header Fields.

Header Content Visibility

By default, header content is visible.

You can set the following header components or selected content, fields, or actions in them to be displayed or hidden, according to the object’s state:

With Fiori elements for OData V2, you can set:

For more information on the features, refer the development team to:

Header Field Editability

By default, in edit mode the header is:

You can change the default.

Even when the header is editable, certain fields or facets in the header may not be editable, for example, micro chart facets or text fields marked as ReadOnly.

To change the default for the editability of the header, you can refer the application developers to: Toggling the Editability of Header Fields.

Highlighting Values Based on Criticality

You can assign colors and icons to text to indicate the criticality of a field value.

With SAP Fiori elements for OData V4, you can add a quick view to text that’s been set to display in a color to indicate the criticality of its value. The text is displayed underlined as a link so users know the quick view is available.

Components

Title

By default, with:

Tell the developers which property to use as the title.

With this menu next to the object page title, users can navigate between the saved version of an object and the draft version that they’ve created. This is a default feature in applications with draft-handling,

Breadcrumbs are displayed above the object title.

Limit the breadcrumbs to the drilldown levels within the object page.

Object Marker

The object marker indicates the object is locked by another user in draft-enabled applications.

Image

The image is an avatar control. By default, it has a square shape.

You can set:

When no image is set or found for the avatar, the avatar initials are displayed.

If those are not set or found either, an icon for the avatar is displayed:

For more information on the logic used for displaying an object, consult the development team and see Using Images, Initials, and Icons.

Paging Buttons

By default, with both SAP Fiori elements for OData V2 and V4, the paging buttons appear in the subobject page of applications that use the dynamic page layout in the following conditions:

With SAP Fiori elements for OData V2, you can:

Toolbar Actions

Edit and Delete

By default, these actions are displayed when the data in the object page allows them.

You can:

For more information, see:

Copy

You can place a copy action button in the header to let the user to create a new object with the same data as the current object with SAP Fiori elements for OData V2.

You set the label for the button according to your use case. Otherwise, the default label is Copy.

In the object page, the Copy button is displayed after the Delete button.

Application developers can define a standard copy action button by annotating a function import action (DataFieldForAction) as a Copy action. For more information, refer them to: Enabling Actions in the Object Page Header.

You can enable the Related Apps menu button. It displays the actions available on the same object in different applications. Users select the action to open the same object in another application.

You can also:

Generic Actions

By default, the Share button is displayed for saved objects and hidden for drafts.

[internal_only]The share menu includes the Chat in Microsoft Teams and Card in Microsoft Teams options when the required settings have been made by the system administrators of SAP S/4HANA Cloud. The Card in Microsoft Teams option is for internal communication only.

The options are part of collaborative ERP (enterprise resource planning), which integrates the best of SAP S/4HANA Cloud with Microsoft Teams. They’re not available for all users.

[/internal_only]

[external_only]The share menu includes the Chat in Microsoft Teams option when the required settings have been made by the system administrators of SAP S/4HANA Cloud. This option is part of collaborative ERP (enterprise resource planning), which integrates the best of SAP S/4HANA Cloud with Microsoft Teams. It’s not available for all users.[/external_only]

[external_only]The share menu includes the Chat in Microsoft Teams option when the required settings have been made by the system administrators of SAP S/4HANA Cloud.

The option is part of collaborative ERP (enterprise resource planning), which integrates the best of SAP S/4HANA Cloud with Microsoft Teams. It’s not available for all users.

[/external_only]

For more information, see Share (Generic).

For more information, refer application developers to: Integrating Microsoft Teams.

Application-Specific Actions

You can include the actions required for your use case.

The header toolbar displays application-specific actions to the left of the generic actions.

You can also define custom shortcuts for application-defined action buttons and navigation buttons.

For more information, refer application developers to Keyboard Shortcuts.

Conditional Enablement of Navigation Buttons

With SAP Fiori elements for OData V4, you can enable buttons that navigate the user to another page or application based on the value of a specific field.

With SAP Fiori elements for OData V2, this feature requires extensions.

For example, you can enable the Generate Purchase Order button only for sales orders with the completed status.

Implement this feature only when the way to enable the button is obvious to end users.

Order of Toolbar Actions

The default order — left to right — for actions in the object page toolbar is below:

You can rearrange the order, for example, by setting an application-specific action that’s the primary action to the leftmost position on the toolbar.

For more information, see:

Additional Content

Message Strip

With SAP Fiori elements for OData V4, you can add a message strip in the header to provide information related to the object as a whole, such as the object status.

The message strip is displayed under the object page title and optional subtitle. When the header is collapsed, the message strip remains visible.

When more than one message is relevant for the object as a whole, the message strip displays the text “The object contains errors / warnings / information.”

The user can find the individual messages via the message popover in the footer bar.

For more information, see:

Simple Header Facets

With SAP Fiori elements for OData V2:

Plain Text Facets

You can use the plain text facet to display a continuous text in the header.

For more information, see Plain Text Facet.

Contact Facets

You can enable a quick view for a contact.

With SAP Fiori elements for OData V4:

For more information, see Quick View.

Micro Chart Facets

You can display the following micro charts in the header:

For more information, see Micro Charts.

Form Facets

You can add a quick view to the form facet.

For more information, see Form Facet (Dataset).

For more information, refer the development team to Form Facet.

Address Facets

You can display an address such as a shipping address.

For more information, refer the development team to Address Facet in the Object Page Header.

Header Field Groups

You can define fields to display together in a facet. For example, for the product object, in the General Information section, you can include the fields quantity, weight, and supplier.

Rating Indicator Facets

You can add a rating indicator to the header. It is read-only in both display and edit modes.

By default, the maximum rating is five stars.

You can:

With extensions, you can make the rating editable.

Display Mode

The rating indicator shows with the:

Edit Mode

The rating indicator moves into the header facet and appears with only the title in edit mode.

For an aggregated rating, the number of ratings is shown in parentheses after the stars.

For more information, see:

Progress Indicator Facets

You can add a progress indicator facet to the object header.

For more information, see:

Key Value Facets

You can add a key value facet to highlight important data or KPIs.

For more information, see Key Value Facet.