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
<div> <div></div> <div></div> </div> <div> <div> <h4 id="behavior-and-interaction">Behavior and Interaction</h4> </div> <div> <h4 id="availability">Availability</h4> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23collapsedexpanded-state">Expanded State</a></div> <div>Default on initial load</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23collapsedexpanded-state">Collapsed State</a></div> <div> <p>Default on scroll</p> <p>With SAP Fiori elements for OData V2, on mobile phone screens, the object page displays a summary line instead of the collapsed header.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23display-of-header-content">Header Content Displayed in the Header Content Area and the Header Section</a></div> <div>Default in create and edit modes</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23header-content-visibility">Header Content Visible</a></div> <div>Default, you can hide it.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23header-content-visibility">Header Content Hidden</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23making-header-fields-editable">Making Header Fields Editable</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23highlighting-values-based-on-criticality">Highlighting Values Based on Criticality</a></div> <div>Available</div> </div> <div> <div> <h4 id="components">Components</h4> </div> <div> <h4 id="availability-1">Availability</h4> </div> </div> <div> <div>Dynamic Page Header</div> <div>Mandatory, it must be configured.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23title">Title</a></div> <div>Mandatory, you must define it.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23breadcrumbs">Breadcrumbs</a></div> <div>Default</div> </div> <div> <div>Subtitle</div> <div>Available, you define the text.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23object-marker">Object Marker</a></div> <div>Default in draft-enabled applications</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23image">Image</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23paging-buttons">Paging Buttons on the First Object Page</a></div> <div>Available with SAP Fiori elements for OData V2 only</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23paging-buttons">Paging Buttons on the First Subobject Page</a></div> <div>Default under certain conditions</div> </div> <div> <div>Toolbar</div> <div>Available</div> </div> <div> <div> <h4 id="toolbar-actions">Toolbar Actions</h4> </div> <div> <h4 id="availability-2">Availability</h4> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23edit-and-delete"><em>Edit</em> and <em>Delete</em></a></div> <div> <p>Default, when the data allows these actions.</p> <p>You can turn one or both actions off.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23related-apps-menu-button"><em>Related Apps</em> Menu Button</a></div> <div> <p>Available</p> <p>With SAP Fiori elements for OData V4, you can change the button name to <em>Open in…</em></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23display-saved-version-return-to-draft"><em>Display Saved Version/Return to Draft</em> Button</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23generic-actions">Generic Actions</a></div> <div>Default: <em>Share</em> is turned on for saved objects and turned off for drafts.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23applicationspecific-actions">Application-Specific Actions</a></div> <div>Available, they must be configured.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23conditional-enablement-of-navigation-buttons">Conditional Enablement of Navigation Buttons</a></div> <div> <p>Available with SAP Fiori elements for OData V4</p> <p>Requires an extension with SAP Fiori elements for OData V2</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23order-of-toolbar-actions">Order of Toolbar Actions</a></div> <div> <p>Default</p> <p>You can change the default order.</p> </div> </div> <div> <div> <h4 id="additional-content-optional">Additional Content (Optional)</h4> </div> <div> <h4 id="availability-3">Availability</h4> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23simple-header-facets">Simple Header Facets</a></div> <div>Available with SAP Fiori elements for OData V2 only</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23plain-text-facets">Plain Text Facets</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23contact-facets">Contact Facets</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23micro-chart-facets">Micro Chart Facets</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23form-facets">Form Facets</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23address-facets">Address Facets</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23header-field-groups">Header Field Group</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23rating-indicator-facets">Rating Indicator Facets</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23progress-indicator-facets">Progress Indicator Facet</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-96%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23key-value-facets">Key Value Facet</a></div> <div>Available</div> </div> <div> <div>Link</div> <div> <p>Available</p> <p>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.</p> </div> </div>
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-down-arrow :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-down-arrow :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-arrow button lets the users expand the header.
Summary Line for Object Page Header on Small Screens
In display mode, the header content area displays all the header content.
In edit and create modes, the header content is displayed in two places:
The header content area, at the top of the page, displays uneditable header content. By default, all header content is uneditable. You can make specific fields editable. See Making Header Fields Editable below.
The Header section, the first dynamic section in the content area, displays editable header content. It’s only present in the edit and create modes.
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.
hint
For more information on the features, refer the development team to:
You can make fields in the object page header editable in edit mode.
Highlighting Values Based on Criticality
You can assign colors and icons to text to indicate the criticality of a field value.
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).
guideline
Tell the developers which property to use as the title.
Breadcrumbs
Breadcrumbs are displayed above the object title.
guideline
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:
An image to display instead of the avatar.
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.
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.
Display Saved Version / Return to Draft
You can display this button on the object page to allow users to choose between a display of the saved or the draft version of the object page record:
Display Saved Version displays the last saved version of the object page record.
Return to Draft displays the object page in edit mode.
This feature is enabled at the application level and also displays the Hide Draft Values / Show Draft Values button in the list report toolbar for the table that displays the objects.
The selection in the list report determines the state of the object that opens when the user navigates to the object page:
From a list report with Hide Draft Values selected, the object page opens with the last saved version of the record. If a draft record exists, the object page also shows the Return to Draft button.
From a list report with Show Draft Values selected, the object page opens in edit mode for drafts and shows the Display Saved Version button.
When the user navigates back to the list report, it displays with the previously selected state.
Generic Actions
By default, the Share button is displayed for saved objects and hidden for drafts.
You can include the actions required for your use case.
The header toolbar displays application-specific actions to the left of the generic actions.
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.
guideline
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 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.
