Object Page – Header
Discover / Frameworks / SAP Fiori Elements / Object Page / 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
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 icon-navigation-up-arrowbutton and the Pin/Unpin :icon-pushpin-offbutton are displayed.
When the object page header contains only a title and a subtitle, the Expand/Collapse icon-navigation-up-arrowbutton and the Pin/Unpin :icon-pushpin-offbutton 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 :icon-navigation-down-arrowbutton lets the users expand the header.
For more information, see:
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:
-
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.
-
The header section is only present in the edit and create modes.
- The first temporary section will have a section title called “Header” if there is no Anchor Bar available.
- UI elements in the header that cannot be rendered in a form, such as micro charts, are not shown.
-
Not Editable, the header is hidden.
Note that, by default, the header is
- Editable with SAP Fiori elements for OData V4
- Not editable with SAP Fiori elements for OData V2
You can ask the application developers to change the default.
For more information, see Dynamic Page Header (Mandatory).
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:
- Entire header facets
- Content, such as fields, in a header facet
- Content in quick views
With Fiori elements for OData V2, you can set:
- The header to be displayed in edit mode.
- Header facets to be visible in edit mode.
For more information on the features, refer the development team to:
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.
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.
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:
- SAP Fiori elements for OData V2, the title area is empty.
- SAP Fiori elements for OData V4, the title area displays the text: (Unnamed Object).
Menu for Saved Version / Draft
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
Breadcrumbs are displayed above the object title.
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:
- An image to display instead of the avatar. SAP Fiori elements for OData V4 uses the lightbox control to allow a larger view of the image.
- The avatar to a have a circular shape.
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:
- A square avatar for a product
- A circular avatar for a person.
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:
- The user has navigated from a table in the object page to the subobject.
- The table in the object page contains at least two items.
With SAP Fiori elements for OData V2, you can:
- Enable the paging buttons to show on the first object page opened from a list report.
- Disable the default display of the paging buttons on the subobject page.
Toolbar Actions
Edit and Delete
By default, these actions are displayed when the data in the object page allows them.
You can:
- Set each enabled action to be displayed or hidden based on certain conditions in the back end. For example, you can hide the actions for a sales order that has already been paid.
- Disable the actions.
For more information, see:
Copy
You can place a copy action button in the header to let the user 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.
Related Apps Menu Button
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:
- Hide specific actions in the menu.
- Change the button name to Open In… with SAP Fiori elements for OData V4.
Generic Actions
By default, the Share button is displayed for saved objects and hidden for drafts.
It can include the:
- Share in SAP Jam menu item when SAP Jam integration is configured.
- Microsoft Teams > As Chat and As Card options when the required settings have been made by the system administrators of SAP S/4HANA or SAP S/4HANA Cloud. This feature is part of collaborative ERP (enterprise resource planning), which integrates the best of SAP S/4HANA or SAP S/4HANA Cloud with Microsoft Teams. It’s not available for all users. When available, the menu item opens a separate window where users can directly share a link to a business application in the SAP S/4HANA or SAP S/4HANA Cloud system with co-workers.[internal_only]
- Collaboration Manager when SAP Collaboration Manager is enabled.[/internal_only]
[internal_only]With SAP Fiori elements for OData V4, you can control the visibility in the Share menu of the Send E-mail and Share: Microsoft Teams, and Collaboration Manager options at both application level and page level.[/internal_only]
[external_only]With SAP Fiori elements for OData V4, you can control the visibility in the Share menu of the Send E-mail and Share: Microsoft Teams.[/external_only]
For more information, see:
For more information, refer application developers to:
- The Share Functionality
- Integrating Microsoft Teams for SAP S/4HANA Cloud
- Integration with Microsoft Teams for SAP S/4HANA
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.
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.
Order of Toolbar Actions
The default order — left to right — for actions in the object page toolbar is below:
- Edit
- Delete
- Copy with SAP Fiori elements for OData V2
- Application-specific action buttons
- Related Apps menu button
- Share
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:
Grouping Actions in a Menu Button
With SAP Fiori elements for OData V4, you can group together actions with a similar business purpose in a menu button.
Note that when all the actions in the menu have one of the following states, the menu button does too:
- Disabled
- Hidden
Additional Content
Message Strip
You can add a message strip in the header to provide information related to the object, 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:
- You can use a simple header facet to show simple data points that align horizontally across the header.
- When form fields contain no value, they display the empty state indicator (–).
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.
For applications with Microsoft Teams integration, the contact card and the quick view card both display options for starting a Microsoft Teams audio call, video call, or chat with the contact.
With SAP Fiori elements for OData V4:
- When a quick view detail contains no value, the empty state indicator (–) is displayed.
- 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.
For more information, see Quick View.
Micro Chart Facets
You can display the following micro charts in the header:
- Area micro chart
- Bullet chart
- Radial chart
- Column chart
- Line micro chart
- Harvey ball chart
- Stacked bar chart
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).
Address Facets
You can display an address such as a shipping address.
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:
- Change the maximum rating.
- Specify more descriptive text for the subtitle.
With extensions, you can make the rating editable.
Display Mode
The rating indicator shows with the:
- Title
- Subtitle with the total number of ratings
- Rating shown with stars: Both the aggregated and non-aggregated single rating types are supported.
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.
Related Links
Elements and Controls
- Object Page Floorplan (guidelines)
- Object Handling (Create, Edit, Delete) (guidelines)
- Page Title and Navigation Menu (guidelines)
- Action Placement (guidelines)