Object Page – Footer Bar

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

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

Warning
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 view management” feature in SAP Fiori elements. This feature is technically available for object pages, but we are still working on the final design.

Feature Availability

 

Footer Bar Actions

 

Availability

Finalizing Actions Available
Create Default in create mode
Save Default in edit mode
Close on Save Available with SAP Fiori elements for OData V2 only
Save and Edit Available, for non-draft applications with SAP Fiori elements for OData V2 only
Save and Next Available, with SAP Fiori elements for OData V2 only
Apply Available, for the subobject page in draft-enabled applications only
Message Popover Button Default, visible only when messages are present.
Discard Draft Default in edit mode for draft-enabled applications
Cancel Default in edit mode for applications without draft handling
Enabling / Disabling of Actions Available
Keyboard Shortcuts for Actions Available

Footer Bar Actions

In create and edit modes, the footer bar appears at the bottom of the screen.


Finalizing Actions

You can add finalizing actions to the footer bar.

A message toast is displayed when an operation is successful.

Finalizing actions complete the work on the current screen, by permanently changing the object state. You can also set them to navigate away from the object page.

Note that developers may call these actions determining actions.

Guidelines
Replace the generic placeholder text in the message toast with text that’s meaningful to the user.

Save

The action is displayed by default in edit mode.

After saving, the user stays on the object page for applications both with and without draft handling enabled.

You can enable users to automatically navigate back to the list report when they save with SAP Fiori elements for OData V2. To do this, ask your development team to add close logic to the Save action.


Save and Edit

You can enable this action in non-draft applications with SAP Fiori elements for OData V2.

With the Save and Edit action, users save current changes and stay on the object page to continue editing.


Save and Next

This action is enabled with SAP Fiori elements for OData V2 when the direct edit feature is enabled in the corresponding list report.

With the Save and Next action, users save current changes and navigate to the next editable object in the list report.

After they click Save and Next for the last editable object in the list report, they return to the list report.


Apply

You can enable this action in the footer bar of a subobject page in draft-enabled applications.

With the Apply action, users conclude the create or edit activity, save the draft, and navigate one step up in the object hierarchy to the object page.

Similarly, when the subobject page is open in flexible column layout with three column layout, clicking Apply now closes the column where the subobject is displayed and returns the user to the object page.


Message Popover Button

Turned on by default, the button is only visible when messages are present and allows the user to open the message popover. The color of the message button reflects the most crtical message level.

The message popover displays the count of error messages.

Messages without a criticality level are treated as information messages.

With SAP Fiori elements for OData V2, the messages in the message popover are grouped by section and table so users can easily locate where they need to take action.

For more information, see:


Discard Draft

Displayed by default in edit mode for applications with draft-handling, this action button lets the users leave the object page without saving the changes they’ve made in a draft version of the object.


Cancel

Displayed by default in edit mode for applications without draft-handling this action button lets users leave the object page without saving changes they’ve made to the object.


Enabling / Disabling of Actions

You can enable or disable footer bar actions according to certain conditions. For example, to prevent users from archiving a sales order that is still being processed, you can enable the Archive action only for sales orders with the status Delivered or Cancelled.

Note that even if you disable all footer bar actions, the footer bar still appears onscreen for the display of the message popover, described above.


Keyboard Shortcuts for Actions

Keyboard shortcuts are available for basic operations.

You can also enable custom shortcuts for application-defined actions.

Developer Hint
For more information, refer application developers to Keyboard Shortcuts.

Related Links

Object Page – Header

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.

Warning
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 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.

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:

  • 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).

Developer Hint
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:

  • 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.
Developer Hint
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.

Developer Hint
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:

  •  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).
Guidelines
Tell the developers which property to use as the title.

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.

Guidelines
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. 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 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.

Developer Hint
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.

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.

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 options at both application level and page level.

For more information, see:

Developer Hint
For more information, refer application developers to:


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.

Developer Hint
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.

Guidelines
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:

  • 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:

Additional Content


Message Strip

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:

  • 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 Team 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).

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

Address Facets

You can display an address such as a shipping address.

Developer Hint
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:

  • 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

List Report – Header

The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.

For design information, see the List Report Floorplan guidelines and the links below.

Warning
Put all controls for searching and filtering data in the list report filter bar.

Do not include the search or filter options that are available in the table header.

Feature Availability

 

Features

 

Availability

Page-Level View Management Default, you can turn it off.
Share Menu Default
Manual Update Mode Default
Live Update Mode Available
Search Available
Filter Bar Default
Initial State of Header Default:

  • Expanded on large screens
  • Collapsed on medium and small screens when the application is configured to load the list report data on app launch
Pin Button With SAP Fiori elements for OData V4, turned on when the list report contains at least one responsive table.
Editing Status Filter Default for draft-enabled applications.

You can hide it.

Input Controls for Filters Default
Adapt Filters UI Element
  • Default: dialog with SAP Fiori elements for OData V2
  • Default: popover with SAP Fiori elements for OData V4

Feature Details


Page-Level View Management

By default, page-level view management is enabled and the header displays a page title.

You can disable it.

Guidelines
If you disable page-level view management, you must display a header title.

For more information, see Header Title.


Share Menu

By default, the header contains the generic Share menu with the global actions Send Email and Save as Tile. It can also 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.

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 options at both application level and page level.

Save as Tile

The tile created opens the list report with the same results shown at the time the tile was saved.

Users can also save a dynamic tile for results shown after the users have filtered for a relative date value, such as today or this year.

    For more information, see:

    Developer Hint
    For more information, refer application developers to:


    Update Mode

    By default, the update mode is manual.

    You can enable live update mode instead.

    For more information, see Live Update / Manual Update.


    Search

    By default, the search is disabled.

    You can enable it.

    The limit for search strings is 1000 characters.

    Guidelines
    Work with the development team to define the searchable properties in the data.

    For more information, see Search.


    Filter Bar

    SAP Fiori elements for OData V2 uses the smart filter bar.

    SAP Fiori elements for OData V4 uses the filter bar.

    With SAP Fiori elements for OData V4, you can also show a Clear button on the filter bar to let users:

    • Remove all filter values

    • Reset the value in the Editing Status filter to All

    Warning
    Put all controls for searching and filtering data in the list report filter bar.

    Do not include the search or filter options that are available in the table header.

    Initial State of Header

    The default behavior is shown below:

    Screen Size

    Application Starts with Data

    Application Starts without Data

    S Collapsed Expanded
    M Collapsed Expanded
    L Expanded Expanded
    XL Expanded Expanded

    Pin Button

    With SAP Fiori elements for OData V4, the Pin  /Unpin   buttons are displayed under the header when a list report contains at least one responsive table,

    The pin option keeps the header collapsed or expanded when the user scrolls.

    The grid table and the analytical tables are not scrollable so the Pin  /Unpin  buttons are not displayed when the list report contains only these types of table.

    For more information see, Pinning the Header Content.


    Editing Status Filter

    By default, the filter is enabled for draft-enabled applications. You can disable it.

    The filter values and corresponding results are as follows:

    • All (Default value):
      • All saved (or active) versions of the documents for which the current user has no drafts
      • All the users own drafts of unsaved changes to existing documents. The version last saved before the user began editing the draft is not shown in the results.
    • All (Hiding Drafts): Only the saved objects.
    • Own DraftDrafts that the current user can display or edit.
    • Locked by Another User: Saved versions that are locked by other users. The current user cannot edit these versions.
    • Unsaved Changes by Another User: Saved versions that were edited by another user but are no longer locked. The current user can edit and overwrite these versions, and the previous draft will be overwritten.
    • No Changes: Saved versions with no corresponding draft.

    For more information, see Draft handling.


    Input Controls for Filters

    You can decide which filter/input controls to use and set the following for them:

    • The properties available as a filter criterion
    • The labels for the filter fields
    • The default filter values
    • Mandatory filters: Marked by an asterisk (*), they always show in the filter bar.
    • Type-ahead for values entered
    • Value help lists
      By default, a dialog conditions tab is displayed for the value help. Remind application developers to define the right value help options.
    Developer Hint
    For information on defining the value help, refer application developers to Field Help.

    You can also:

    • Decide on the selection controls for the filters
    • Restrict the values accepted in the field. By default, the field accepts multiple values.
    Guidelines
    Date Picker and Date / Time Picker

    By default, filter fields for the date picker (sap.m.DatePicker)and date/time picker (sap.m.DateTimePicker) result in a control that opens a dialog for adding multiple dates.

    When your use case requires a date/time picker for a single value, specify this to the the application developers because it requires explicit configuration.

    For more information refer them to: Configuring Filter Fields.

    For more information, see:


    Adapt Filters

    By default, SAP Fiori elements for OData V2 uses the Adapt Filters dialog and SAP Fiori elements for OData V4 uses the Adapt Filters popover.

    You can configure the following:

    • Filters that are initially visible in the expanded filter bar. When you set filters to be visible by default, they are displayed under the Basic group in the dialog.
    • Additional groups for the filters
    • Show input fields: Visible by default. You can hide the Hide value/Show value button.

    Users can add additional fields through views.

    The OK and Cancel buttons are displayed when the application team or the user has chosen manual update mode for the filter bar.

    By default, the Reset button is displayed, you cannot change this.

    For more information, see: Adapt Filters.

    Related Links

    Elements and Controls