Archives

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

 

Footer Bar Actions

  

Availability
Finalizing Actions Available
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.
Cancel Default in edit mode only
Enabling / Disabling of 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.

For more information, see:


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:


Cancel

The action is displayed by default in edit mode.


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.

Related Links

Elements and Controls

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability

 

Features in List Report and Object Page

  

Availability
Title Visible by default

You can  hide it.

With SAP Fiori elements for OData V4, you can show the table row count next to the title.
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Show/Hide Details Available in responsive tables
Actions Disabled Before Row Selection Available
Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2
Messages for Critical Actions Available
Messages for Destructive Actions Available
Multiple Views on a Table Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Object Creation with Reference to Another Object Available as a custom create with SAP Fiori elements for OData V4
Mass Edit Available in draft-enabled applications for grid and responsive tables with SAP Fiori elements for OData V2
Hiding Actions in Multiple Content Layout Available
Message Strip for the Table Available, a message strip can display all the messages related to the table in their order of severity.
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Full Screen Mode for Table Display Available, not recommended
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable the icon buttons. When you do, the user must open the Personalization dialog to access the actions.

Table-level variant management is not a prerequisite for personalization.

For more information, see Table Personalization (Overview).



Show / Hide Details

The responsive table toolbar displays the Show Details action when at least one column is hidden from the screen because of limited onscreen space.

After the user clicks Show Details, the the table displays the hidden information in the  pop-in area, and the action changes to Hide Details.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance columns are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

By default in responsive tables:

  • Key fields have the importance set to high in list reports.
  • Other columns have the importance set to none and are handled like columns assigned medium importance.

You can change the level of importance.


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:


Mass Edit

You can enable this feature in a draft-enabled list report for the responsive and grid tables with SAP Fiori elements for OData V2.

Users cannot apply the mass edit to a draft record, including one open in edit mode in the flexible column layout.

By default, the Edit dialog contains all the currently visible fields.

The application development team can adapt the feature by:

  • Changing the fields that display in the Edit dialog. This includes adding a custom field to the dialog.
  • Excluding certain fields from the key user adaptation of the dialog
  • Replacing the standard save action with a custom save flow, with an extension

Note that application developers sometimes call this feature multi edit, not mass edit.

For more information, see Mass Edit.



Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


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.

Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines

Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines

Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:


Multiple Views for a Table

You can display a table with multiple views, for example, each view of the same table can display different columns or prefiltered states.

For a maximum of three views, a segmented button is displayed. For four or more, the select control is displayed.

With SAP Fiori elements for V4, you can also display the row count for each view next to the view name.

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create via the object page feature is enabled. The create action opens the object page in create mode so the user can enter the data. Alternatively, you can enable object creation as described the sections below:

Via a Dialog

The action opens a dialog in modal view so the user can enter the data.

With SAP Fiori elements for OData V2, you can:

  • Include a maximum of eight fields in the dialog
  • Enable filter values saved in the filter bar to prefill fields in the dialog
Warning
When you enable the object creation via a dialog feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode.

Note that when a user clicks Cancel in the create dialog, no draft states are maintained.

With Default Values That Prefill Fields for the New Object

This feature is available with:

  • SAP Fiori elements for OData V2 for applications without draft handling
  • SAP Fiori elements for OData V4

Via a Dialog with a Reference to an Existing Object of the Same Type

With SAP Fiori elements for OData V4, application developers can build a custom create action via a dialog that lets the user create a new object with a reference to an existing object of the same type.

The user:

  1. Clicks the action button.
    You can name the button to suit your use case.
  2. Selects the value of the existing object to reference in the dialog.
  3. Completes the fields for the new object by selecting one or more values to copy from the existing one.
  4. Completes additional fields for the new object in the object page.
Create from existing object
Create from existing object
Developer Hint
For more information, refer application developers to:

Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject. With SAP Fiori elements for OData V2, you can enable filter values saved in the filter bar to prefill fields in the Create dialog.
  • Enable inline create for draft-enabled applications in grid and responsive tables with SAP Fiori elements for V4. See Inline Creation below.
  • Enable default values to prefill the fields for the new object. This feature is available with SAP Fiori elements for OData V4, and with SAP Fiori elements for OData V2 for applications without draft handling.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Action Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type Read Mode for All Tables Edit Mode for Tables with Subobject Pages Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

With SAP Fiori elements for OData V4, in grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.

The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.

You can:

  • Work with the development team to define a custom sort order.
  • Enable default values to prefill the fields for the new object.

For more information, see Add Items.


Prefilling Fields for a New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

Limitations

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button allows user to export the values in the table, including values in custom columns.

For more information see Export to Spreadsheet.


Full Screen Mode for Table Display

You can enable full screen mode for a table. However, it is generally not recommended.

Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.

For more information on the restrictions for this feature, see Maximize/Minimize.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.

Related Links

Elements and Controls

Implementation

SAP Fiori Elements

SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:

  • Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps.
  • Drive UX consistency and compliance with the latest SAP Fiori design guidelines.

The articles in the “SAP Fiori Elements Framework” section of the guidelines cover all the design possibilities based on the current technical capabilities of the SAP Fiori elements framework and the version used to develop your application.

Video: What is SAP Fiori elements?

Versions

Ask your engineering colleagues what SAP Fiori elements version they will use to develop your app because there are differences in the design options that each version supports. The articles in this section of the guidelines indicate when such differences exist.

Each version of SAP Fiori elements supports a different version of OData (Open Data Protocol), as their names indicate:

  • SAP Fiori elements for OData version 2 (V2)
  • SAP Fiori elements for OData version 4 (V4)

Usage

Your ultimate decision about whether or not to use SAP Fiori elements should be based on two factors:

  • Is the floorplan you want to use supported by SAP Fiori elements?
  • Does the SAP Fiori elements floorplan deliver all the features you need to provide to your user? If not, consider building a freestyle application instead.

Please note that the analytical list page and the overview page are only available as SAP Fiori elements.

Supported Floorplans

The following floorplans are available as SAP Fiori elements templates:

List report
List report
Worklist
Worklist
Object page
Object page
Overview page
Overview page
Analytical list page
Analytical list page

Each floorplan can be placed inside the flexible column layout, except the overview page. The overview page must always be implemented as a standalone application that pulls in data from a minimum of two other applications.

Supported Features

Both SAP Fiori elements for OData V2 and for OData V4 offer:

  • Message handling
  • The global edit flow, which includes draft handling
  • Keyboard shortcuts for basic operations
  • Seamless navigation across applications with the:
    • Inner app state that stores the state of the current page when the user leaves it, including such details as filter values, table and chart personalization, and the selected tab or section. The app state restores these details when the user returns.
    • Support of the SAP Fiori Launchpad feature called sap-keep-alive mode.
      With sap-keep-alive mode, the app page is restored to the same state it was in when the user left it, including scroll position and table selection. It also improves the performance of the page reload after back navigation.
      However, ensuring the page reflects changes that the user made in an external application before returning to it requires explicit configuration by the application developers.

Only SAP Fiori elements for OData V2 supports the local edit flow without draft handling.

Developer Hint
For more information, refer application developers to:

Placeholder Texts

Some UI texts provided by the SAP Fiori elements framework are generic placeholders. Always replace them with text that is meaningful to your user – for example:

 

Placeholder Text Replaced Text
List Report Create Object Create Sales Order
Object Page New Object New Sales Order
Overview Page Could not perform action Unable to approve the request
Developer Hint
For more information about placeholder texts in SAP Fiori elements, see Replacing Standard UI Texts.

Extensions

It’s possible to create extensions to deliver features that are not supported by SAP Fiori elements. However, this is not recommended because the associated code will need to be maintained.

Developer Hint
You can create extensions, by adapting the manifest.json of your app, or through annotations or UI adaptation. For more information, see the Extending SAP Fiori Elements-Based Apps.

Related Links

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

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 Displayed in the Header Content Area and the Header Section Default in create and edit modes
Header Content Visible Default, you can hide it.
Header Content Hidden Available
Making Header Fields Editable Available
Highlighting Values Based on Criticality Available
 

Components

  

Availability
Dynamic Page Header Mandatory, it must be configured.
Title Mandatory, you must define it.
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.
Related Apps Menu Button Available

With SAP Fiori elements for OData V4, you can change the button name to Open in…
Display Saved Version/Return to Draft Button Default
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
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.

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

For more information, see:


Display of Header Content

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.

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.
Developer Hint
For more information on the features, refer the development team to:


Making Header Fields Editable

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

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


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.

Display Saved Version / Return to Draft

Always visible, this button lets users toggle between the saved and draft versions of the object page record.


Generic Actions

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

For more information, see Share (Generic).


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.


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:

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


Simple Header Facets

With SAP Fiori elements for OData V2 only, you can use a simple header facet to show simple data points that align horizontally across the header.


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 more information, see Quick View.


Micro Chart Facets

You can display the following microcharts 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

Elements and Controls

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability

 

Features in List Report and Object Page

  

Availability
Title Visible by default

You can  hide it.

With SAP Fiori elements for OData V4, you can show the table row count next to the title.
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Show/Hide Details Available in responsive tables
Actions Disabled Before Row Selection Available
Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2
Messages for Critical Actions Available
Messages for Destructive Actions Available
Multiple Views on a Table Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Object Creation with Reference to Another Object Available as a custom create with SAP Fiori elements for OData V4
Hiding Actions in Multiple Content Layout Available
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Full Screen Mode for Table Display Available, not recommended
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable the icon buttons. When you do, the user must open the Personalization dialog to access the actions.

Table-level variant management is not a prerequisite for personalization.

For more information, see Table Personalization (Overview).



Show / Hide Details

The responsive table toolbar displays the Show Details action when at least one column is hidden from the screen because of limited onscreen space.

After the user clicks Show Details, the the table displays the hidden information in the  pop-in area, and the action changes to Hide Details.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance columns are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

By default in responsive tables:

  • Key fields have the importance set to high in list reports.
  • Other columns have the importance set to none and are handled like columns assigned medium importance.

You can change the level of importance.


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:


Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


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.

Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines

Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines

Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:


Multiple Views for a Table

You can display a table with multiple views, for example, each view of the same table can display different columns or prefiltered states.

For a maximum of three views, a segmented button is displayed. For four or more, the select control is displayed.

With SAP Fiori elements for V4, you can also display the row count for each view next to the view name.

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create via the object page feature is enabled. The create action opens the object page in create mode so the user can enter the data. Alternatively, you can enable object creation as described the sections below:

Via a Dialog

The action opens a dialog in modal view so the user can enter the data.

With SAP Fiori elements for OData V2, you can:

  • Include a maximum of eight fields in the dialog
  • Enable filter values saved in the filter bar to prefill fields in the dialog
Warning
When you enable the object creation via a dialog feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode.

Note that when a user clicks Cancel in the create dialog, no draft states are maintained.

With Default Values That Prefill Fields for the New Object

This feature is available with:

  • SAP Fiori elements for OData V2 for applications without draft handling
  • SAP Fiori elements for OData V4

Via a Dialog with a Reference to an Existing Object of the Same Type

With SAP Fiori elements for OData V4, application developers can build a custom create action via a dialog that lets the user create a new object with a reference to an existing object of the same type.

The user:

  1. Clicks the action button.
    You can name the button to suit your use case.
  2. Selects the value of the existing object to reference in the dialog.
  3. Completes the fields for the new object by selecting one or more values to copy from the existing one.
  4. Completes additional fields for the new object in the object page.
Create from an existing object
Create from an existing object
Developer Hint
For more information, refer application developers to:



Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject. With SAP Fiori elements for OData V2, you can enable filter values saved in the filter bar to prefill fields in the Create dialog.
  • Enable inline create for draft-enabled applications in grid and responsive tables with SAP Fiori elements for V4. See Inline Creation below.
  • Enable default values to prefill the fields for the new object. This feature is available with SAP Fiori elements for OData V4, and with SAP Fiori elements for OData V2 for applications without draft handling.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Action Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type Read Mode for All Tables Edit Mode for Tables with Subobject Pages Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

With SAP Fiori elements for OData V4, in grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.

The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.

You can:

  • Work with the development team to define a custom sort order.
  • Enable default values to prefill the fields for the new object.

For more information, see Add Items.


Prefilling Fields for a New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

Limitations

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button allows user to export the values in the table, including values in custom columns.

For more information see Export to Spreadsheet.


Full Screen Mode for Table Display

You can enable full screen mode for a table. However, it is generally not recommended.

Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.

For more information on the restrictions for this feature, see Maximize/Minimize.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.

Related Links

Elements and Controls

Implementation

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 Variant Management Default, you can turn it off.
Share Menu Default
Manual Update Mode Default
Live Update Mode Available with SAP Fiori elements for OData V2 only
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
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 Variant Management

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

You can disable it.

Guidelines
If you disable page-level variant 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.  
  • Share in SAP Jam, when SAP Jam integration is configured.

For more information, see:


Update Mode

By default, the update mode is manual.

You can enable live update mode instead with SAP Fiori elements for OData V2.

For more information, see Live Update / Manual Update.


Search

By default, the search is disabled.

You can enable it.

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.

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.

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 Draft: Drafts 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

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

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

Implementation

Table Features

The SAP Fiori elements templates support the features and settings for a table detailed below.

For design information see the table guidelines, starting with Table Overview, and the links within this article.

Feature Availability

 

Table Settings

  

Availability
Column Heading Labels You set these.
Clear All With SAP Fiori elements for OData V2, when the selection of multiple rows is enabled, the clear all checkbox is displayed by default for:

  • Grid tables, analytical tables and tree tables in both list reports and object pages
  • Responsive tables in a list report

With SAP Fiori elements for OData V4, when the selection of multiple rows is enabled, the clear all checkbox is displayed, for all tables, except a responsive table in an object page with anchor bar mode.

You can change the default.
Select All With SAP Fiori elements for OData V2, when the selection of multiple rows is enabled for a responsive table, the select all checkbox is displayed by default in an object page.

With SAP Fiori elements for OData V4, when the selection of multiple rows is enabled for a responsive table, the select all checkbox is displayed by default in an object page with anchor bar mode.

You can change the default.
Sticky Column Header Behavior Default, you can turn it off.
Column Width The default width depends on the column contents. You can change it.
Column Importance In a responsive table, by default, all columns have an importance of none, except for list report columns for key fields. These have high importance.

You can change the level of importance.
Labels for Multiple Fields in a Column Available in responsive tables with SAP Fiori elements for OData V4
Ascending Sort Order on a Column Default, you can change it.
Grouping Available in responsive and analytical tables
Number of Table Rows Displayed at Once Work with the development team to find the best compromise between optimal user experience and optimal technical performance.
No Data Found Text Default, replace the generic placeholder text with text that’s meaningful to the user.
 

List Report and Analytical Page Only

  

Availability
Number of Table Levels Expanded at Initial Load Default, you can change the number for the tree table and analytical table.
 

Object Page Only

  

Availability
Message Strip for Rows with Errors Default

Table Settings


Clear All / Select All

When the selection of multiple rows is enabled for a table, both versions of SAP Fiori elements:

  • Display by default either the Clear All or Select All  checkbox in the header of the selection column, as detailed in the next sections
  • Allow you to set which checkbox displays for all the tables on an object page, or for specific tables only

When the Select All action is hidden, the user can still select a range of multiple items, by selecting an item, pressing Shift, and selecting others.

For  grid tables, analytical tables and tree tables, the default limit for rows the user can select at once is 200. You can change the limit. We recommend you consult the application team on how a change would impact performance.

SAP Fiori elements for OData V2 Defaults

When the selection of multiple rows (or multiselect) is enabled, the selection column header displays by default:

  • The Clear All checkbox for:
    • Grid tables, analytical tables and tree tables in both list reports and object pages
    • Responsive tables in a list report
  • The Select All  checkbox for a responsive table in an object page

You can change the default.

SAP Fiori elements for OData V4

When the selection of multiple rows (or multi mode) is enabled, the selection column header displays by default the Clear All checkbox for all tables but a responsive table in an object page with anchor bar mode. In this case, the responsive table displays the Select All  checkbox because the user can scroll to all the section content.

You can change the default.

Warning
For an optimal user experience only display the Select All checkbox for a small number of items because:

  • When the user clicks Select All, all the items or rows load from the backend. Loading many items can require multiple requests to the system and, consequently, take time.
  • When a responsive table contains so many rows that they cannot all be displayed onscreen, many users expect the Select All to select all the rows in the table. In fact, it selects all the rows currently displayed on the interface.

Guidelines
When the object page is in tab bar mode, we recommend enabling the Clear All action when the selection of multiple rows is enabled.

Column Width

The default column width varies according to the column contents:

  • Text: can range from 3 to 20 rem
  • Image: 5 rem
  • Rating or progress indicator: 6.875 rem
  • Chart: 20 rem

You can can change the width.

Developer Hint
For more information, refer the development team to Setting the Default Column Width.

Column Importance in Responsive Tables

By default:

  • Key fields have high importance in list reports.
  • Other columns have the importance of none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance colums are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

When at least one column is hidden, the table toolbar displays the Show Details button so usesrs can view the previously hidden columns in the table pop-in area. After the user clicks Show Details to display the column, the action changes to Hide Details.

For more information, see:


Labels for Multiple Fields in a Column

By default, with SAP Fiori elements for OData V4, when a column contains a field group with more than one field, the labels for those fields are not displayed.

You can enable the display of a label for each field. The field group label then is displayed as the column title in the header.


Sort Order

By default, the sort order for a column is ascending.

You can:

  • Set the default sort order to descending.
  • Define other, customized sort orders.

For more information, see the sort guidelines according to table type:


Number of Table Rows Displayed at Once

By default, a responsive table loads the following number of rows at once:

  • 20 rows in a list report.
  • 10 rows in an object page with multiple sections.

When more rows exist, the users can click the More button at the end of the table to view additional rows.

With SAP Fiori elements for OData V2, you can change the default number.

For an object page that includes one section and one subsection, the responsive table loads 20 rows and the user can scroll to view additional ones.

Guidelines
Work with the development team to find the best compromise between optimal user experience and optimal technical performance.

Grouping

Grouping is available in responsive and analytical tables.

You can define the format of the grouping headers.

For more information, see:



No Data Found Text

By default, the following text is displayed when no data is found.

  • When the user has not applied filters, the text is “No data found.”
  • When the user has applied filters from the personalization dialog, the text is: “No data found. Try adjusting the search or filter parameters.”
Guidelines
Replace the generic text with text that’s meaningful to the user.

List Report and Analytical Page Only

Initial Expansion of Table Levels

By default, on initial load, the following expandable tables are expanded to this number of levels:

  • Responsive table: 1 level
  • Tree table: 1 level
  • Analytical table: 0 levels

You can change the default value for the tree table and analytical tables.

Developer Hint
For more information, refer the development team to Initial Expansion Level for Tables in List Reports & Analytical List Pages.

Object Page Only

Message Strip for Rows with Errors

When table rows contain errors, a message strip is displayed above the table. It contains a Filter Items link that lets users see only the rows with errors. After the users click the link, a Clear Filter link replaces it.


Related Links

Elements and Controls

Implementation

Terminology for SAP Fiori Elements

To help you better communicate with application developers, this article presents:

  • Development terms () and what you, as a designer, need to understand about them
  • Design terms ( ) that may be unfamiliar to application developers and ways to present design requirements that are meaningful to application developers
  • Terms that both application developers and designers use ( ), but for different concepts, which sometimes results in misunderstanding

 

 

Term

  

Explanation

Action Placement

 Action placement is an important focus in design. You place the action as close to the information that it acts upon so users find them where they need them.

 However, because the SAP Fiori elements framework determines where the action is displayed, application developers do not specify the placement with annotations.

For example, they may not be familiar with what you mean by a “finalizing action” in a list report. To implement this type of action, they use the annotation property determining=true.

Below, you can find additional examples of the differences between designer terminology for actions and how the application developers implement them.

 

Design Terminology Application Development Annotations
A finalizing action that leaves the current state or navigates away from the page. Determining = true
An action in a table row or line item that:

  • Affects an individual table row or line item.
  • Triggers functionality or toggle states.
 Inline = true
A table action that:

  • Affects the table.
  • Is displayed in the table toolbar
 Determining = false

False is the default value for the property.
A global action in the toolbar header that

  • Changes a state or mode
  • Opens other related apps or tools
 Not applicable. Implementation requires an extension.

 

Asynchronous Actions
  

 Actions that the backend can execute sometime after the users initially trigger it.

Users can continue to work on the UI without any interruption to their flow.

Also see: Synchronous Actions

Annotations
  

 Application developers configure the required controls and their behavior with annotations that provide information about the application data.

For example, annotations and their properties control the:

  • Display and position of columns in a table
  • Sort order for the table rows
  • Measures, dimensions, and sort order in a chart
  • Enablement of a navigation button always or only after the user has selected an item

Application developers can also configure the required controls and their behavior through the manifest file.

App States
  

 App states include the:

  • Inner app (iApp) state for navigating within the application
  • External app (xApp) state for navigating from one app to another

IApp State

When a user navigates within an application, the iApp state stores all the information to retrieve for a specific URL when the user returns to it, for example:

  • Filters applied
  • Visible table columns
  • Sort orders applied

The user can return to the URL via

  • A refresh
  • Back navigation
  • A tile created with Save as Tile
  • A link shared with Send email

XApp State

When a user navigates from one source app to another target app, the xApp state stores all the information from the source app to pass the target app, for example:

  • Filter values
  • Values of the fields in the selected rows
  • Page context
  • Sort order of the table in the source app
  • Other aspects of the presentation

Also see: Navigation

Content Switches

Icon tab bar
Segmented button
Select control

 These design terms may not be meaningful to developers because they don’t specify the UI control that lets the user switch among views in a list report.

Instead, the SAP Fiori elements framework automatically renders the switch control based on the number of business objects shown in the views and the number of views:

Content Switch Number of Business Objects Number of Views Example
Segmented button 1 3 maximum Business object: sales orders

Each view shows the sales orders prefiltered according to a different status: draft, estimated, ordered, packed, delivered, completed
Select control 1 4 or more Business object: sales orders

Each view shows the sales orders prefiltered according to a different status: draft, estimated, ordered, packed, delivered, completed
Icon tab bar More than 1 More than 1 Business objects: customers, deliveries, invoices, payments

The list report shows a customer overview where each view shows the deliveries, invoices and payments.

For more information, see List Report – Content Area.

Entity
  

 An entity in a data model corresponds to a business object in an application.

For example, for a sales order processing application, the sales order is an entity and the sales order item is its child entity in the data model.

This parent-child association in the data model lets users navigate from the sales order to the sales order item in the application interface.

Facet
 

 As a designer, you use the word facet for a UI element specific to the object page header.

  Developers use the word facet more generically to describe a unit for building for the object page so don’t be surprised to hear application developers speaking about “facets” for parts of the object page outside of the header.

For example, they use the annotation ReferenceFacet for what designers call a subsection and CollectionFacet for a section that contains all the subsections.

When you talk to application developers about a “facet,” specify where you want it to display.

Column in a Table

   Application developers probably know this term, but may not connect it with the annotations required for columns.

To configure a table, application developers use the LineItem annotation and the datafield property, where each property displays as a column in the table.

For more information, you can refer them to Defining Line Items.

Manifest
  

 The main configuration file for an application where application developers define settings for the application and the interface behavior.

For example, in the manifest, an application developer can configure:

  • A filter field to be displayed on the UI as both a compact filter field in the filter bar and a visual filter.
  • A table to allow the selection of one or more table rows.

Application developers can also configure the required controls and their behavior through annotations.

Navigation: Internal, External, Outbound, Inbound
  
  • Internal navigation

Navigation within an app — for example, from a list report to an object page to a subobject page: The application uses an inner app (iApp) state to store the page state and context and restore the same page state and context:

    • After users navigate away from the page and, then, return to it with a back navigation.
    • When users go to the page from a tile created with Save as Tile or from a link shared with Send email.
  • External navigation

Navigation across applications — for example, from Managing Sales Orders to Managing Deliveries — uses the external app (xApp) state to pass the context from the source app to the target app.

Just as an outbound train leaves the station and an inbound train arrives at the station:

    • Outbound navigation is when the user leaves an analytical list page, list report or object page in the current app for another app.
    • Inbound navigation is when the user arrives at the analytical list page, list report, or object page in the current app from another app.

OData Services
  

 OData (Open Data Protocol) is a standard protocol used by the backend to communicate with the user interface.

OData services deliver one or more functionalities or capabilities on the backend system, such as the retrieval of data or execution of a series of actions. The code for the services can be reused for various purposes by different client applications.

SAP Fiori elements support different versions of OData, as their names indicate:

  • SAP Fiori elements for OData version 2 (V2)
  • SAP Fiori elements for OData version 4 (V4)

Paginator Buttons
  

 Known by designers as paging buttons ( ) in the object page header toolbar, they let users navigate to the previous or next object page shown in the list report.

For more information, see: Header Toolbar

Section

  This designer term may not be meaningful to some application developers because they do not use it in their annotations.

Instead, to build an object page section, application developers use different types of facet annotations. They start with a facet, add a reference facet, and add other controls for a form, table, or chart.

For more information, you can refer them to Defining and Adapting Sections.

Semantic Key Field
  

 This field is the unique identifier for an object used by the search to find the object.

SideEffects
  

 When a user edits an object, changes to the object can impact other object properties.

For example, in an employee record, changing the value for City in the employee address makes the value in the State or Region field invalid.

Smart Controls and Control Library
  

 These UI controls can read both the data from the backend and the annotations on that data.

Consequently, they take the annotations into account in their rendering and behavior.

For example, a smart field isn’t displayed on the UI if it’s marked with the annotation to hide it, UI.Hidden.

SAP Fiori elements for OData V2 uses smart controls.

SAP Fiori elements for OData V4 uses a different control library.

Synchronous Actions
  

 An action that the backend executes immediately after the users trigger it and, thus, blocks them from performing other actions on the interface until the execution is complete.

Also see: Asynchronous Actions

textArrangement
  

 An annotation property that controls the display of text associated with an ID field, such as country and country code. It can set the display of:

  • Only the text: Germany
  • First the text, then the ID: Germany (001)
  • First the ID, then the text: 001 (Germany)

SAP Fiori Elements

SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:

  • Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps.
  • Drive UX consistency and compliance with the latest SAP Fiori design guidelines.

The articles in the “SAP Fiori Elements Framework” section of the guidelines cover all the design possibilities based on the current technical capabilities of the SAP Fiori elements framework and the version used to develop your application.

Video: What is SAP Fiori elements?

Versions

Ask your engineering colleagues what SAP Fiori elements version they will use to develop your app because there are differences in the design options that each version supports. The articles in this section of the guidelines indicate when such differences exist.

Each version of SAP Fiori elements supports a different version of OData (Open Data Protocol), as their names indicate:

  • SAP Fiori elements for OData version 2 (V2)
  • SAP Fiori elements for OData version 4 (V4)

Usage

Your ultimate decision about whether or not to use SAP Fiori elements should be based on two factors:

  • Is the floorplan you want to use supported by SAP Fiori elements?
  • Does the SAP Fiori elements floorplan deliver all the features you need to provide to your user? If not, consider building a freestyle application instead.

Please note that the analytical list page and the overview page are only available as SAP Fiori elements.

Supported Floorplans

The following floorplans are available as SAP Fiori elements templates:

List report
List report
Worklist
Worklist
Object page
Object page
Overview page
Overview page
Analytical list page
Analytical list page

Each floorplan can be placed inside the flexible column layout, except the overview page. The overview page must always be implemented as a standalone application that pulls in data from a minimum of two other applications.

Supported Features

Both SAP Fiori elements for OData V2 and for OData V4 offer the global edit flow, which includes draft handling. SAP Fiori elements for OData V2 also supports the local edit flow without draft handling.

The SAP Fiori elements framework also incorporates message handling.

Placeholder Texts

Some UI texts provided by the SAP Fiori elements framework are generic placeholders. Always replace them with text that is meaningful to your user – for example:

 

Placeholder Text Replaced Text
List Report Create Object Create Sales Order
Object Page New Object New Sales Order
Overview Page Could not perform action Unable to approve the request
Developer Hint
For more information about placeholder texts in SAP Fiori elements, see Replacing Standard UI Texts.

Extensions

It’s possible to create extensions to deliver features that are not supported by SAP Fiori elements. However, this is not recommended because the associated code will need to be maintained.

Developer Hint
You can create extensions, by adapting the manifest.json of your app, or through annotations or UI adaptation. For more information, see the Extending SAP Fiori Elements-Based Apps.

Related Links

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

SAP Fiori Elements

SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:

  • Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps.
  • Drive UX consistency and compliance with the latest SAP Fiori design guidelines.

The articles in the ‘SAP Fiori Elements Framework’ section of the guidelines cover all the design possibilities based on the current technical capabilities of the SAP Fiori elements framework and the version used to develop your application.

Video: What is SAP Fiori elements?

Versions

Ask your engineering colleagues what SAP Fiori elements version they will use to develop your app because there are differences in the design options that each version supports. The articles in this section of the guidelines indicate when such differences exist.

Each version of SAP Fiori elements supports a different version of OData (Open Data Protocol), as their names indicate:

  • SAP Fiori elements for OData version 2 (V2)
  • SAP Fiori elements for OData version 4 (V4)

Usage

Your ultimate decision about whether or not to use SAP Fiori elements should be based on two factors:

  • Is the floorplan you want to use supported by SAP Fiori elements?
  • Does the SAP Fiori elements floorplan deliver all the features you need to provide to your user? If not, consider building a freestyle application instead.

Please note that the analytical list page and the overview page are only available as SAP Fiori elements.

Supported Floorplans

The following floorplans are available as SAP Fiori elements templates:

List report
List report
Worklist
Worklist
Object page
Object page
Overview page
Overview page
Analytical list page
Analytical list page

Each floorplan can be placed inside the flexible column layout, except the overview page. The overview page must always be implemented as a standalone application that pulls in data from a minimum of two other applications.

Supported Features

Both SAP Fiori elements for OData V2 and for OData V4 offer the global edit flow, which includes draft handling. SAP Fiori elements for OData V2 also supports the local edit flow without draft handling.

The SAP Fiori elements framework also incorporates message handling.

Placeholder Texts

Some UI texts provided by the SAP Fiori elements framework are generic placeholders. Always replace them with text that is meaningful to your user – for example:

 

Placeholder Text Replaced Text
List Report Create Object Create Sales Order
Object Page New Object New Sales Order
Overview Page Could not perform action Unable to approve the request

Extensions

It’s possible to create extensions to deliver features that are not supported by SAP Fiori elements. However, this is not recommended because the associated code will need to be maintained.

Developer Hint
You can create extensions, by adapting the manifest.json of your app, or through annotations or UI adaptation. For more information, see the Extending SAP Fiori Elements-Based Apps.

Related Links

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Table Features

The SAP Fiori elements templates support the features and settings for a table detailed below.

For design information see the table guidelines, starting with Table Overview, and the links within this article.

Feature Availability

 

Table Settings

  

Availability
Column Heading Labels You set these.
Sticky Column Header Behavior Default, you can turn it off.
Column Width The default width depends on the column contents. You can change it.
Column Importance in Responsive Tables By default, all columns have an importance of none, except for list report columns for key fields. These have high importance.

You can change the level of importance.
Number of Table Rows Displayed at Once Work with the development team to find the best compromise between optimal user experience and optimal technical performance.
Ascending Sort Order on a Column Default, you can change it.
Grouping Available in responsive and analytical tables
No Data Found Text Default, replace the generic placeholder text with text that’s meaningful to the user.
 

List Report and Analytical Page Only

  

Availability
Number of Table Levels Expanded at Initial Load Default, you can change the number for the tree table and analytical table.
 

Object Page Only

  

Availability
Message Strip for Rows with Errors Default

Table Settings


Column Width

The default column width varies according to the column contents:

  • Text: can range from 3 to 20 rem
  • Image: 5 rem
  • Rating or progress indicator: 6.875 rem
  • Chart: 20 rem

You can can change the width.

Developer Hint
For more information, refer the development team to Setting the Default Column Width.

Column Importance in Responsive Tables

By default:

  • Key fields have high importance in list reports.
  • Other columns have the importance of none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance colums are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

When at least one column is hidden, the table toolbar displays the Show Details button so usesrs can view the previously hidden columns in the table pop-in area. After the user clicks Show Details to display the column, the action changes to Hide Details.

For more information, see:


Number of Table Rows Displayed at Once

By default, a responsive table loads the following number of rows at once:

  • 20 rows in a list report.
  • 10 rows in an object page with multiple sections.

When more rows exist, the users can click the More button at the end of the table to view additional rows.

With SAP Fiori elements for OData V2, you can change the default number.

For an object page that includes one section and one subsection, the responsive table loads 20 rows and the user can scroll to view additional ones.

Guidelines
Work with the development team to find the best compromise between optimal user experience and optimal technical performance.

Sort Order

By default, the sort order for a column is ascending.

You can:

  • Set the default sort order to descending.
  • Define other, customized sort orders.

For more information, see the sort guidelines according to table type:


Grouping

Grouping is available in responsive and analytical tables.

You can define the format of the grouping headers.

For more information, see:


No Data Found Text

By default, the following text is displayed when no data is found.

  • When the user has not applied filters, the text is “No data found.”
  • When the user has applied filters from the personalization dialog, the text is: “No data found. Try adjusting the search or filter parameters.”
Guidelines
Replace the generic text with text that’s meaningful to the user.

List Report and Analytical Page Only


Initial Expansion of Table Levels

By default, on initial load, the following expandable tables are expanded to this number of levels:

  • Responsive table: 1 level
  • Tree table: 1 level
  • Analytical table: 0 levels

You can change the default value for the tree table and analytical tables.

Developer Hint
For more information, refer the development team to Initial Expansion Level for Tables in List Reports & Analytical List Pages.

Object Page Only


Message Strip for Rows with Errors

When table rows contain errors, a message strip is displayed above the table. It contains a Filter Items link that lets users see only the rows with errors. After the users click the link, a Clear Filter link replaces it.


Related Links

Elements and Controls

Implementation

List

With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:

With both list item types:

  • A chevron icon lets users navigate to the item.
  • A navigation row indicator highlights the list item that the user has navigated to.
  • You can assign semantic coloring of red, green, or orange to the data points, such as price, based on their values. 

Related Links

Elements and Controls

Implementation

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 Displayed in the Header Content Area and the Header Section Default in create and edit modes
Header Content Visible Default, you can hide it.
Header Content Hidden Available
Making Header Fields Editable Available
Highlighting Values Based on Criticality Available
 

Components

  

Availability
Dynamic Page Header Mandatory, it must be configured.
Title Mandatory, you must define it.
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.
Related Apps Menu Button Available

With SAP Fiori elements for OData V4, you can change the button name to Open in…
Display Saved Version/Return to Draft Button Available
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
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.

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

For more information, see:


Display of Header Content

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.

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.
Developer Hint
For more information on the features, refer the development team to:


Making Header Fields Editable

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

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


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.

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.

For more information, see Share (Generic).


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.


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:

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


Simple Header Facets

With SAP Fiori elements for OData V2 only, you can use a simple header facet to show simple data points that align horizontally across the header.


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 more information, see Quick View.


Micro Chart Facets

You can display the following microcharts 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

Elements and Controls

Implementation

Worklist

With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.

The worklist features and settings that differ from those in the list report are detailed below.

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


Feature Availability

 

Worklist-Specific Features

  

Availability
Variant Management Not Enabled Default,  you must assign a header title.
Page-Level Variant Management Available
Header Title Mandatory, if you do not enable page-level variant management.
Filter Bar Unavailable
Table Title Default: The title contains the row count.
Table Behavior Default: Fixed layout and growing mode when the user scrolls.
Search Available in table toolbar
Personalization Actions Enabled: Sort, Filter, Group, and Column Settings Default, accessible via the Settings  icon
 Export to Spreadsheet Available

Related Links

Elements and Controls

Implementation

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

 

Footer Bar Actions

  

Availability
Finalizing Actions Available
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
Apply Available, for the subobject page in draft-enabled applications only
Message Popover Button Default, visible only when messages are present.
Cancel Default in edit mode only
Enabling / Disabling of 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.

For more information, see:


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.


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:


Cancel

The action is displayed by default in edit mode.


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.

Related Links

Elements and Controls

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability
 

Features in List Report and Object Page

  

Availability
Title Visible by default

You can  hide it.

With SAP Fiori elements for OData V4, you can show the table row count next to the title.
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Select All Action Available
Show/Hide Details Available in responsive tables
Actions Disabled Before Row Selection Available
Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2
Messages for Critical Actions Available
Messages for Destructive Actions Available
Multiple Views on a Table Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Hide Draft Values / Show Draft Values Available, with SAP Fiori elements for OData V2 only.
Hiding Actions in Multiple Content Layout Available
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Full Screen Mode for Table Display Available, not recommended
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable the icon buttons. When you do, the user must open the Personalization dialog to access the actions.

Table-level variant management is not a prerequisite for personalization.

For more information, see Table Personalization (Overview).


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:


Select All

By default, Select All is hidden with SAP Fiori elements for OData V2. You can display it.

By default, Select All is displayed with SAP Fiori elements for OData V4 when you enable multiple item selection.

When the Select All button is hidden:

  • The user can select a range of multiple items, by selecting an item, pressing Shift, and selecting others. When the user selects more items than currently appear onscreen, additional items are loaded from the backend up to a specified limit. The default value for the limit is 200.
  • The Undo Selection button appears for the table, instead of the Select All, and allows the user to clear the selected items.

For a responsive table, enabling the multiple item selection is a prerequisite to enabling the Select All button.

For an analytical table, grid table, or tree table, ask the development team to use the Multi-Selection Plugin.

Warning
To ensure a positive user perception of performance, only display the Select All button for a small number of items.

When the user clicks Select All, all the items or rows load from the backend. Loading many items onscreen can require multiple requests to the system and, consequently, take time.

Developer Hint
For more information, see Enabling Multiple Selection in Tables.

Show / Hide Details

The responsive table toolbar displays the Show Details action when at least one column is hidden from the screen because of limited onscreen space.

After the user clicks Show Details, the the table displays the hidden information in the  pop-in area, and the action changes to Hide Details.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance colums are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

By default in responsive tables:

  • Key fields have the importance set to high in list reports.
  • Other columns have the importance set to none and are handled like columns assigned medium importance.

You can change the level of importance.


Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


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.

Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines

Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:


Multiple Views for a Table

You can display a table with multiple views, for example, each view of the same table can display different columns or prefiltered states.

For a maximum of three views, a segmented button is displayed. For four or more, the select control is displayed.

With SAP Fiori elements for V4, you can also display the row count for each view next to the view name.

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create via the object page feature is enabled. The create action opens the object page in create mode so the user can enter the data.

You can:

  • Enable the object creation via a dialog with 8 fields maximum. The action opens a dialog in modal view so the user can enter the data. With SAP Fiori elements for OData V2, you can enable filter values saved in the filter bar to prefill fields in the Create dialog.
  • Enable default values to prefill the fields for the new object. This feature is available with SAP Fiori elements for OData V2 for applications without draft handling, and with SAP Fiori elements for OData V4.
Warning
When you enable the object creation via a dialog feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode.

Note that when a user clicks Cancel in the create dialog, no draft states are maintained.



Hide Draft Values / Show Draft Values

With SAP Fiori elements for OData V2, you can display this button to allow users to choose between a display of only saved records or of all records. The button is displayed only when the Editing Status filter in the list report filter bar is set to All.

By default, the list report displays active (saved) records, draft (unsaved) records, and draft changes to active records.

Note that this feature is enabled at the application level and also displays the Display Saved Version / Return to Draft button in the object page header.

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 also exists, the Return to Draft button shows. 
  • From a list report with Show Draft Values selected, the object page opens in edit mode for drafts with the Display Saved Version button displayed.

When the user navigates back to the list report, it displays with the previously selected state.


Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject. With SAP Fiori elements for OData V2, you can enable filter values saved in the filter bar to prefill fields in the Create dialog.
  • Enable inline create for draft-enabled applications in grid and responsive tables with SAP Fiori elements for V4. See Inline Creation below.
  • Enable default values to prefill the fields for the new object. This feature is available with SAP Fiori elements for OData V4, and with SAP Fiori elements for OData V2 for applications without draft handling.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Action Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type Read Mode for All Tables Edit Mode for Tables with Subobject Pages Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

With SAP Fiori elements for OData V4, in grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.

The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.

You can:

  • Work with the development team to define a custom sort order.
  • Enable default values to prefill the fields for the new object.

For more information, see Add Items.


Prefilling Fields for a New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

Limitations

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button allows user to export the values in the table, including values in custom columns.

For more information see Export to Spreadsheet.


Full Screen Mode for Table Display

You can enable full screen mode for a table. However, it is generally not recommended.

Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.

For more information on the restrictions for this feature, see Maximize/Minimize.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.


 

 

Related Links

Elements and Controls

Implementation

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

 

Footer Bar Actions

  

Availability
Finalizing Actions Available
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
Apply Available, for the subobject page in draft-enabled applications only
Message Popover Button Default, visible only when messages are present.
Cancel Default in edit mode only
Enabling / Disabling of 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.

For more information, see:


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.


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.

For more information, see:


Cancel

The action is displayed by default in edit mode.


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.

Related Links

Elements and Controls

Implementation

Worklist

With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.

The worklist features and settings that differ from those in the list report are detailed below.

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


Feature Availability

 

Worklist-Specific Features

  

Availability
Variant Management Not Enabled Default,  you must assign a header title.
Page-Level Variant Management Available
Header Title Mandatory, if you do not enable page-level variant management.
Filter Bar Unavailable
Table Title Default: The title contains the row count.
Table Behavior Default: Fixed layout and growing mode when the user scrolls.
Search Available in table toolbar
Personalization Actions Enabled: Sort, Filter, Group, and Column Settings Default
 Export to Spreadsheet Available

Related Links

Elements and Controls

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability
 

Features in List Report and Object Page

  

Availability
Title Visible by default

You can  hide it.

With SAP Fiori elements for OData V4, you can show the table row count next to the title.
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Select All Action Available
Show/Hide Details Available in responsive tables
Actions Disabled Before Row Selection Available
Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2
Messages for Critical Actions Available
Messages for Destructive Actions Available
Multiple Views on a Table Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Hide Draft Values / Show Draft Values Available, with SAP Fiori elements for OData V2 only.
Hiding Actions in Multiple Content Layout Available
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Full Screen Mode for Table Display Available, not recommended
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable the icon buttons. When you do, the user must open the Personalization dialog to access the actions.

Table-level variant management is not a prerequisite for personalization.

For more information, see Table Personalization (Overview).


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:



Select All

By default, Select All is hidden with SAP Fiori elements for OData V2. You can display it.

By default, Select All is displayed with SAP Fiori elements for OData V4 when you enable multiple item selection.

When the Select All button is hidden:

  • The user can select a range of multiple items, by selecting an item, pressing Shift, and selecting others. When the user selects more items than currently appear onscreen, additional items are loaded from the backend up to a specified limit. The default value for the limit is 200.
  • The Undo Selection button appears for the table, instead of the Select All, and allows the user to clear the selected items.

For a responsive table, enabling the multiple item selection is a prerequisite to enabling the Select All button.

For an analytical table, grid table, or tree table, ask the development team to use the Multi-Selection Plugin.

Warning
To ensure a positive user perception of performance, only display the Select All button for a small number of items.

When the user clicks Select All, all the items or rows load from the backend. Loading many items onscreen can require multiple requests to the system and, consequently, take time.

Developer Hint
For more information, see Enabling Multiple Selection in Tables.

Show / Hide Details

The responsive table toolbar displays the Show Details action when at least one column is hidden from the screen because of limited onscreen space.

After the user clicks Show Details, the the table displays the hidden information in the  pop-in area, and the action changes to Hide Details.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance colums are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

By default in responsive tables:

  • Key fields have the importance set to high in list reports.
  • Other columns have the importance set to none and are handled like columns assigned medium importance.

You can change the level of importance.


Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


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.

Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines

Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:

Multiple Views for a Table

You can display a table with multiple views, for example, each view of the same table can display different columns or prefiltered states.

For a maximum of three views, a segmented button is displayed. For four or more, the select control is displayed.

With SAP Fiori elements for V4, you can also display the row count for each view next to the view name.

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create via the object page feature is enabled. The create action opens the object page in create mode so the user can enter the data.

You can Enable the object creation via a dialog with 8 fields maximum. The action opens a dialog in modal view so the user can enter the data.

With SAP Fiori elements for OData V2, you can prefill fields in the Create dialog with filter values saved in the filter bar.

Warning
When you enable the object creation via a dialog feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode.

Note that when a user clicks Cancel in the create dialog, no draft states are maintained.


Hide Draft Values / Show Draft Values

With SAP Fiori elements for OData V2, you can display this button to allow users to choose between a display of only saved records or of all records. The button is displayed only when the Editing Status filter in the list report filter bar is set to All.

By default, the list report displays active (saved) records, draft (unsaved) records, and draft changes to active records.

Note that this feature is enabled at the application level and also displays the Display Saved Version / Return to Draft button in the object page header.

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 also exists, the Return to Draft button shows. 
  • From a list report with Show Draft Values selected, the object page opens in edit mode for drafts with the Display Saved Version button displayed.

When the user navigates back to the list report, it displays with the previously selected state.


Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum in an application that is not draft-enabled. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject.
  • Enable inline create for draft-enabled applications in grid and responsive tables only. See Inline Creation below.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Action Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type Read Mode for All Tables Edit Mode for Tables with Subobject Pages Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

In grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.

The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.

You can work with the development team to define a custom sort order.

For more information, see Add Items.


Prefilling Fields for a New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

Limitations

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button allows user to export the values in the table, including values in custom columns.

For more information see Export to Spreadsheet.


Full Screen Mode for Table Display

You can enable full screen mode for a table. However, it is generally not recommended.

Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.

For more information on the restrictions for this feature, see Maximize/Minimize.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.

Related Links

Elements and Controls

Implementation

List

With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:

With both list item types:

  • The information or data points appear across the screen from left to right in the order of importance assigned to each. By default, no importance is assigned and the information or data point is handled like it has medium importance. You can set the level of importance.
  • You can assign semantic coloring of red, green, or orange to the data points, such as price, based on their values. 

Related Links

Elements and Controls

Implementation

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
Header Content Displayed in the Header Content Area and the Header Section Default in create and edit modes
Header Content Visible Default, you can hide it.
Header Content Hidden Available
Making Header Fields Editable Available
Highlighting Values Based on Criticality Available
 

Components

  

Availability
Dynamic Page Header Mandatory, it must be configured.
Title Mandatory, you must define it.
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.
Related Apps Menu Button Available

With SAP Fiori elements for OData V4, you can change the button name to Open in…
Display Saved Version/Return to Draft Button Available
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
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.

Behavior and Interaction


Collapsed/Expanded State

  • On the initial load of the object page, the header is expanded.
  • When the user scrolls down the page, the header collapses.

For more information, see:


Display of Header Content

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.

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.
Developer Hint
For more information on the features, refer the development team to:


Making Header Fields Editable

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

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


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.

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.

For more information, see Share (Generic).


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.


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:

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


Simple Header Facets

With SAP Fiori elements for OData V2 only, you can use a simple header facet to show simple data points that align horizontally across the header.


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 more information, see Quick View.


Micro Chart Facets

You can display the following microcharts 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

Elements and Controls

Implementation

Table Features

The SAP Fiori elements templates support the features and settings for a table detailed below.

For design information see the table guidelines, starting with Table Overview, and the links within this article.

Feature Availability

 

Table Settings

  

Availability
Column Heading Labels You set these.
Sticky Column Header Behavior Default, you can turn it off.
Column Width The default width depends on the column contents. You can change it.
Column Importance in Responsive Tables By default, all columns have an importance of none, except for list report columns for key fields. These have high importance.

You can change the level of importance.
Number of Table Rows Displayed at Once Work with the development team to find the best compromise between optimal user experience and optimal technical performance.
Ascending Sort Order on a Column Default, you can change it.
Grouping Available in responsive and analytical tables
No Data Found Text Default, replace the generic placeholder text with text that’s meaningful to the user.
 

List Report and Analytical Page Only

  

Availability
Number of Table Levels Expanded at Initial Load Default, you can change the number for the tree table and analytical table.

Table Settings


Column Width

The default column width varies according to the column contents:

  • Text: can range from 3 to 20 rem
  • Image: 5 rem
  • Rating or progress indicator: 6.875 rem
  • Chart: 20 rem

You can can change the width.

Developer Hint
For more information, refer the development team to Setting the Default Column Width.

Column Importance in Responsive Tables

By default:

  • Key fields have high importance in list reports.
  • Other columns have the importance of none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance colums are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

When at least one column is hidden, the table toolbar displays the Show Details button so usesrs can view the previously hidden columns in the table pop-in area. After the user clicks Show Details to display the column, the action changes to Hide Details.

For more information, see:


Number of Table Rows Displayed at Once

By default, a responsive table loads the following number of rows at once:

  • 20 rows in a list report.
  • 10 rows in an object page with multiple sections.

When more rows exist, the users can click the More button at the end of the table to view additional rows.

With SAP Fiori elements for OData V2, you can change the default number.

For an object page that includes one section and one subsection, the responsive table loads 20 rows and the user can scroll to view additional ones.

Guidelines
Work with the development team to find the best compromise between optimal user experience and optimal technical performance.

Sort Order

By default, the sort order for a column is ascending.

You can:

  • Set the default sort order to descending.
  • Define other, customized sort orders.

For more information, see the sort guidelines according to table type:


Grouping

Grouping is available in responsive and analytical tables.

You can define the format of the grouping headers.

For more information, see:


No Data Found Text

By default, the following text is displayed when no data is found.

  • When the user has not applied filters, the text is “No data found.”
  • When the user has applied filters from the personalization dialog, the text is: “No data found. Try adjusting the search or filter parameters.”
Guidelines
Replace the generic text with text that’s meaningful to the user.

List Report and Analytical Page Only


Initial Expansion of Table Levels

By default, on initial load, the following expandable tables are expanded to this number of levels:

  • Responsive table: 1 level
  • Tree table: 1 level
  • Analytical table: 0 levels

You can change the default value for the tree table and analytical tables.

Developer Hint
For more information, refer the development team to Initial Expansion Level for Tables in List Reports & Analytical List Pages.

Related Links

Elements and Controls

Implementation

Analytical List Page / Overview Page

Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates. Consequently, you can find the information for all the design possibilities supported by those templates in the ‘Layouts, Floorplans, and Frameworks’ section of these guidelines:

Object Page – Overview

The SAP Fiori elements object page template supports the features and settings for the overall object page behavior 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

 

 

Features

  

Availability
Unsaved Changes Message Default for the main object page in draft-enabled applications.

  • With SAP Fiori elements for OData V4, you cannot turn it off.
  • With SAP Fiori elements for OData V2, you can turn it off.

Feature Details

Unsaved Changes Message

By default, this message is displayed for the main object page in draft-enabled applications.

  • With SAP Fiori elements for OData V4, you cannot turn it off.
  • With SAP Fiori elements for OData V2, you can turn it off.

In draft-enabled applications, the message is displayed when users attempt to navigate away from a draft in the main object page. It prompts the users with options to:

  • Confirm the discard.
  • Save the draft.
  • Cancel the navigation action.

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 Variant Management Default, you can turn it off.
Share Menu Default
Manual Update Mode Default
Live Update Mode Available with SAP Fiori elements for OData V2 only
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
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 Variant Management

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

You can disable it.

Guidelines
If you disable page-level variant 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.  
  • Share in SAP Jam, when SAP Jam integration is configured.

For more information, see:


Update Mode

By default, the update mode is manual.

You can enable live update mode instead with SAP Fiori elements for OData V2.

For more information, see Live Update / Manual Update.


Search

By default, the search is disabled.

You can enable it.

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.

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.

The filter values and corresponding results are as follows:

  • All (Default value): All results, except duplicates.

Note that users see their own drafts of unsaved changes, but not the corresponding active version of the document.

  • Own Draft: Drafts that the current user can display or edit.
  • Locked by Another User: Active versions that are locked by other users. The current user cannot edit these versions.
  • Unsaved Changes by Another User: Active versions that were edited by other users but are no longer locked. The current user can edit and overwrite these versions, and the previous draft will be overwritten.
  • No Changes: Active versions that have 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

You can also decide on the selection controls for the filters.

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

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

Implementation

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
Header Content Displayed in the Header Content Area and the Header Section Default in create and edit modes
Header Content Visible Default, you can hide it.
Header Content Hidden Available
Making Header Fields Editable Available
Highlighting Values Based on Criticality Available
 

Components

  

Availability
Dynamic Page Header Mandatory, it must be configured.
Title Mandatory, you must define it.
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.
Related Apps Menu Button Available

With SAP Fiori elements for OData V4, you can change the button name to Open in…
Display Saved Version/Return to Draft Button Available
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
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.

Behavior and Interaction


Collapsed/Expanded State

  • On the initial load of the object page, the header is expanded.
  • When the user scrolls down the page, the header collapses.

For more information, see:


Display of Header Content

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.

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.
Developer Hint
For more information on the features, refer the development team to:


Making Header Fields Editable

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, the title area displays the text: (Unnamed Object).

Guidelines
Tell the developers which property to use as the title.

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


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.

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.

For more information, see Share (Generic).


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.


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:

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


Simple Header Facets

With SAP Fiori elements for OData V2 only, you can use a simple header facet to show simple data points that align horizontally across the header.


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 more information, see Quick View.


Micro Chart Facets

You can display the following microcharts 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

Elements and Controls

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability
 

Features in List Report and Object Page

  

Availability
Title Visible by default

You can  hide it.

With SAP Fiori elements for OData V4, you can show the table row count next to the title.
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Select All Action Available
Show/Hide Details Available in responsive tables
Actions Disabled Before Row Selection Available
Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2
Messages for Critical Actions Available
Messages for Destructive Actions Available
Multiple Views on a Table Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Hide Draft Values / Show Draft Values Available, with SAP Fiori elements for OData V2 only.
Hiding Actions in Multiple Content Layout Available
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Full Screen Mode for Table Display Available, not recommended
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable the icon buttons. When you do, the user must open the Personalization dialog to access the actions.

Table-level variant management is not a prerequisite for personalization.

For more information, see Table Personalization (Overview).


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:



Select All

By default, Select All is hidden with SAP Fiori elements for OData V2. You can display it.

By default, Select All is displayed with SAP Fiori elements for OData V4 when you enable multiple item selection.

When the Select All button is hidden:

  • The user can select a range of multiple items, by selecting an item, pressing Shift, and selecting others. When the user selects more items than currently appear onscreen, additional items are loaded from the backend up to a specified limit. The default value for the limit is 200.
  • The Undo Selection button appears for the table, instead of the Select All, and allows the user to clear the selected items.

For a responsive table, enabling the multiple item selection is a prerequisite to enabling the Select All button.

For an analytical table, grid table, or tree table, ask the development team to use the Multi-Selection Plugin.

Warning
To ensure a positive user perception of performance, only display the Select All button for a small number of items.

When the user clicks Select All, all the items or rows load from the backend. Loading many items onscreen can require multiple requests to the system and, consequently, take time.

Developer Hint
For more information, see Enabling Multiple Selection in Tables.

Show / Hide Details

The responsive table toolbar displays the Show Details action when at least one column is hidden from the screen because of limited onscreen space.

After the user clicks Show Details, the the table displays the hidden information in the  pop-in area, and the action changes to Hide Details.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance colums are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

By default in responsive tables:

  • Key fields have the importance set to high in list reports.
  • Other columns have the importance set to none and are handled like columns assigned medium importance.

You can change the level of importance.


Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


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.

Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines

Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:

Multiple Views for a Table

You can display a table with multiple views, for example, each view of the same table can display different columns or prefiltered states.

For a maximum of three views, a segmented button is displayed. For four or more, the select control is displayed.

With SAP Fiori elements for V4, you can also display the row count for each view next to the view name.

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create via the object page feature is enabled. The create action opens the object page in create mode so the user can enter the data.

You can enable the object creation via a dialog with 8 fields maximum. The action opens a dialog in modal view so the user can enter the data.

With SAP Fiori elements for OData V2, you can prefill fields in the Create dialog with filter values saved in the filter bar.

Warning
When you enable the object creation via a dialog feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode.

Note that when a user clicks Cancel in the create dialog, no draft states are maintained.


Hide Draft Values / Show Draft Values

With SAP Fiori elements for OData V2, you can display this button to allow users to choose between a display of only saved records or of all records. The button is displayed only when the Editing Status filter in the list report filter bar is set to All.

By default, the list report displays active (saved) records, draft (unsaved) records, and draft changes to active records.

Note that this feature is enabled at the application level and also displays the Display Saved Version / Return to Draft button in the object page header.

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 also exists, the Return to Draft button shows. 
  • From a list report with Show Draft Values selected, the object page opens in edit mode for drafts with the Display Saved Version button displayed.

When the user navigates back to the list report, it displays with the previously selected state.


Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum in an application that is not draft-enabled. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject.
  • Enable inline create for draft-enabled applications in grid and responsive tables only. See Inline Creation below.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Action Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type Read Mode for All Tables Edit Mode for Tables with Subobject Pages Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

In grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.

The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.

You can work with the development team to define a custom sort order.

For more information, see Add Items.


Prefilling Fields for a New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

Limitations

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button allows user to export the values in the table, including values in custom columns.

For more information see Export to Spreadsheet.


Full Screen Mode for Table Display

You can enable full screen mode for a table. However, it is generally not recommended.

Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.

For more information on the restrictions for this feature, see Maximize/Minimize.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.


 

 

Related Links

Elements and Controls

Implementation

Table Features

The SAP Fiori elements templates support the features and settings for a table detailed below.

For design information see the table guidelines, starting with Table Overview, and the links within this article.

Feature Availability

 

Table Settings

  

Availability
Column Heading Labels You set these.
Sticky Column Header Behavior Default, you can turn it off.
Column Width The default width depends on the column contents. You can change it.
Column Importance in Responsive Tables By default, all columns have an importance of none, except for list report columns for key fields. These have high importance.

You can change the level of importance.
Number of Table Rows Displayed at Once Work with the development team to find the best compromise between optimal user experience and optimal technical performance.
Ascending Sort Order on a Column Default, you can change it.
Grouping Available in responsive and analytical tables
No Data Found Text Default, replace the generic placeholder text with text that’s meaningful to the user.
 

List Report and Analytical Page Only

  

Availability
Number of Table Levels Expanded at Initial Load Default, you can change the number for the tree table and analytical table.

Table Settings


Column Width

The default column width varies according to the column contents:

  • Text: can range from 3 to 20 rem
  • Image: 5 rem
  • Rating or progress indicator: 6.875 rem
  • Chart: 20 rem

You can can change the width.

Developer Hint
For more information, refer the development team to Setting the Default Column Width.

Column Importance in Responsive Tables

By default:

  • Key fields have high importance in list reports.
  • Other columns have the importance of none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned to a column determines whether or not the table displays its values onscreen when screen space is limited:

  • The values from high importance colums are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • The values in columns with low importance are first to be hidden.

When at least one column is hidden, the table toolbar displays the Show Details button so usesrs can view the previously hidden columns in the table pop-in area. After the user clicks Show Details to display the column, the action changes to Hide Details.

For more information, see:


Number of Table Rows Displayed at Once

By default, a responsive table loads the following number of rows at once:

  • 20 rows in a list report.
  • 10 rows in an object page with multiple sections.

When more rows exist, the users can click the More button at the end of the table to view additional rows.

With SAP Fiori elements for OData V2, you can change the default number.

For an object page that includes one section and one subsection, the responsive table loads 20 rows and the user can scroll to view additional ones.

Guidelines
Work with the development team to find the best compromise between optimal user experience and optimal technical performance.

Sort Order

By default, the sort order for a column is ascending.

You can:

  • Set the default sort order to descending.
  • Define other, customized sort orders.

For more information, see the sort guidelines according to table type:


Grouping

Grouping is available in responsive and analytical tables.

You can define the format of the grouping headers.

For more information, see:


No Data Found Text

By default, the following text is displayed when no data is found.

  • When the user has not applied filters, the text is “No data found.”
  • When the user has applied filters from the personalization dialog, the text is: “No data found. Try adjusting the search or filter parameters.”
Guidelines
Replace the generic text with text that’s meaningful to the user.

List Report and Analytical Page Only


Initial Expansion of Table Levels

By default, on initial load, the following expandable tables are expanded to this number of levels:

  • Responsive table: 1 level
  • Tree table: 1 level
  • Analytical table: 0 levels

You can change the default value for the tree table and analytical tables.

Developer Hint
For more information, refer the development team to Initial Expansion Level for Tables in List Reports & Analytical List Pages.

Related Links

Elements and Controls

Implementation

List

With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:

In both types of list items:

  • The information or data points appear across the screen from left to right in the order of importance assigned to each. By default, no importance is assigned and the information or data point is handled like it has medium importance. You can set the level of importance.
  • You can assign semantic coloring of red, green, or orange to the data points, such as price, based on their values. 

Related Links

Elements and Controls

Implementation

Object Page – Overview

The SAP Fiori elements object page template supports the features and settings for the overall object page behavior 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

 

 

Features

  

Availability
Unsaved Changes Message For the main object page in draft-enabled applications:

  • Default with SAP Fiori elements for OData V4. You cannot turn it off.
  • Available with SAP Fiori elements for OData V2.

Feature Details

Unsaved Changes Message

With SAP Fiori elements for OData V4, this message appears by default. You cannot turn it off.

With SAP Fiori elements for OData V2, you can enable the message.

In draft-enabled applications, the message is displayed when users attempt to navigate away from a draft in the main object page. It prompts them to confirm the discard or to:

  • Save the draft.
  • Cancel the navigation action.

Table Types

The SAP Fiori elements templates support the features and settings for the different table types detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability

Table Type

Responsive Table (Default)

Analytical

Grid

Tree

SAP Fiori Elements for OData Version

V2 & V4

 V2 & V4

 V2 Only

V2 Only

Support of Table Type according to SAP Fiori Elements Template
List Report / Worklist    SAP Fiori elements for OData V4

 SAP Fiori elements for OData V2: read only

    
Object Page / Form Page    SAP Fiori elements for OData V2

 SAP Fiori elements for OData V4: read only

    
Analytical List Page: Available only for SAP Fiori elements for OData V2  Read only  Read only  Read only  Read only
Overview Page  Read only         
Devices
Desktop         
Tablet         
Phone          
Responsiveness
(hide column, popin support)		          
Density Mode

See Content Density.

 See Analytical Table: Compact, Cozy, Condensed. See Grid Table: Compact, Cozy, Condensed. See Tree Table: Types.
Condensed density         
Cozy density         
Summarized cell           
Hierarchical data           
Large number of rows (> 200)         
Grouping         
Freeze columns         
Horizontal scrolling         
Merge duplicates         
Supported Inline Controls All Limited 
See Inline Controls for Non-Responsive Tables below.		 Limited
See Inline Controls for Non-Responsive Tables below.		 Limited
See Inline Controls for Non-Responsive Tables below.
Row-based         
Column-based         

Inline Controls for Non-Responsive Tables

These inline controls are supported for grid, analytical, and tree tables:

  • Text
  • Label
  • ObjectStatus
  • Icon
  • Button
  • Input
  • DatePicker
  • Select
  • ComboBox
  • MultiComboBox
  • CheckBox
  • Link
  • Currency
  • RatingIndicator
  • ProgressIndicator

Also, the following when they are of a responsive or very small size:

  • StackedBarMicroChart
  • ComparisonMicroChart
  • BulletMicroChart

Related Links

Elements and Controls

Implementation

Table Features

The SAP Fiori elements templates support the features and settings for a table detailed below.

For design information see the table guidelines, starting with Table Overview, and the links within this article.

Feature Availability

 

Table Settings

  

Availability
Column Heading Labels You set these.
Sticky Column Header Behavior Default, you can turn it off.
Column Width The default width depends on the column contents. You can change it.
Column Importance in Responsive Tables By default, all columns have an importance of none, except for list report columns for key fields. These have high importance.

You can change the level of importance.
Number of Table Rows Displayed at Once Work with the development team to find the best compromise between optimal user experience and optimal technical performance.
Ascending Sort Order on a Column Default, you can change it.
Grouping Available in responsive and analytical tables
No Data Found Text Default, replace the generic placeholder text with text that’s meaningful to the user.
 

List Report and Analytical Page Only

  

Availability
Number of Table Levels Expanded at Initial Load Default, you can change the number for the tree table and analytical table.

Table Settings


Column Width

The default column width varies according to the column contents:

  • Text: can range from 3 to 20 rem
  • Image: 5 rem
  • Rating or progress indicator: 6.875 rem
  • Chart: 20 rem

You can can change the width.

Developer Hint
For more information, refer the development team to Setting the Default Column Width.

Column Importance in Responsive Tables

By default:

  • Key fields have high importance in list reports.
  • Other columns have the importance of none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned determines whether a column is displayed in all screen sizes, and in the pop-in area for a responsive table when screen space is limited.

Importance

Screen Sizes Where the Column Is Displayed

When the Column Moves into the Pop-In Area
Low Large First, starting with the right-most column
None (Default) Large and Medium After low importance columns
Medium Large and Medium After low importance columns
High All Last

 

When at least one column is hidden from the screen based on its importance, the table toolbar displays the Show Details action. After the user clicks Show Details to display the column, the action changes to Hide Details.

For more information, see:


Number of Table Rows Displayed at Once

By default, a table:

  • In a list report displays 20 rows at once
  • In an object page displays 10 rows or 20 rows according to certain conditions
Guidelines
Work with the development team to find the best compromise between optimal user experience and optimal technical performance.

Sort Order

By default, the sort order for a column is ascending.

You can:

  • Set the default sort order to descending.
  • Define other, customized sort orders.

For more information, see the sort guidelines according to table type:


Grouping

Grouping is available in responsive and analytical tables.

You can define the format of the grouping headers.

For more information, see:


No Data Found Text

By default, the following text is displayed when no data is found.

  • When the user has not applied filters, the text is “No data found.”
  • When the user has applied filters from the personalization dialog, the text is: “No data found. Try adjusting the search or filter parameters.”
Guidelines
Replace the generic text with text that’s meaningful to the user.

List Report and Analytical Page Only


Initial Expansion of Table Levels

By default, on initial load, the following expandable tables are expanded to this number of levels:

  • Responsive table: 1 level
  • Tree table: 1 level
  • Analytical table: 0 levels

You can change the default value for the tree table and analytical tables.

Developer Hint
For more information, refer the development team to Initial Expansion Level for Tables in List Reports & Analytical List Pages.

Related Links

Elements and Controls

Implementation

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 Variant Management Default, you can turn it off.
Share Menu Default
Manual Update Mode Default
Live Update Mode Available with SAP Fiori elements for OData V2 only
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
Editing Status Filter Default for draft-enabled applications
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 Variant Management

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

You can disable it.

Guidelines
If you disable page-level variant 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.  
  • Share in SAP Jam, when SAP Jam integration is configured.

For more information, see:


Update Mode

By default, the update mode is manual.

You can enable live update mode instead with SAP Fiori elements for OData V2.

For more information, see Live Update / Manual Update.


Search

By default, the search is disabled.

You can enable it.

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.

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

Editing Status Filter

By default, the filter is enabled for draft-enabled applications.

The filter values and corresponding results are as follows:

  • All (Default value): All results, except duplicates.

Note that users see their own drafts of unsaved changes, but not the corresponding active version of the document.

  • Own Draft: Drafts that the current user can display or edit.
  • Locked by Another User: Active versions that are locked by other users. The current user cannot edit these versions.
  • Unsaved Changes by Another User: Active versions that were edited by other users but are no longer locked. The current user can edit and overwrite these versions, and the previous draft will be overwritten.
  • No Changes: Active versions that have 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

You can also decide on the selection controls for the filters.

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

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

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability
 

Features in List Report and Object Page

  

Availability
Title Mandatory
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Select All Action Available
Show/Hide Details Available in responsive tables
Actions Disabled Before Row Selection Available
Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2
Messages for Critical Actions Available
Messages for Destructive Actions Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Hide Draft Values / Show Draft Values Available, with SAP Fiori elements for OData V2 only.
Hiding Actions in Multiple Content Layout Available
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Full Screen Mode for Table Display Available, not recommended
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable the icon buttons. When you do, the user must open the Personalization dialog to access the actions.

Table-level variant management is not a prerequisite for personalization.

For more information, see Table Personalization (Overview).


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:



Select All

By default, Select All is hidden with SAP Fiori elements for OData V2. You can display it.

By default, Select All is displayed with SAP Fiori elements for OData V4 when you enable multiple item selection.

When the Select All button is hidden:

  • The user can select a range of multiple items, by selecting an item, pressing Shift, and selecting others. When the user selects more items than currently appear onscreen, additional items are loaded from the backend up to a specified limit. The default value for the limit is 200.
  • The Undo Selection button appears for the table, instead of the Select All, and allows the user to clear the selected items.

For a responsive table, enabling the multiple item selection is a prerequisite to enabling the Select All button.

For an analytical table, grid table, or tree table, ask the development team to use the Multi-Selection Plugin.

Warning
To ensure a positive user perception of performance, only display the Select All button for a small number of items.

When the user clicks Select All, all the items or rows load from the backend. Loading many items onscreen can require multiple requests to the system and, consequently, take time.

Developer Hint
For more information, see Enabling Multiple Selection in Tables.

Show / Hide Details

The table toolbar displays the Show Details action when at least one column is hidden from the screen based on its importance. After the user clicks Show Details to display the column, the action changes to Hide Details.

By default in responsive tables:

  • Key fields have the importance set to high in list reports.
  • Other columns have the importance set to none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned determines whether a column is displayed in all screen sizes, and in the pop-in area for a responsive table when screen space is limited.

 

Importance Screen Sizes Where the Column Is Displayed When the Column Moves into the Pop-In Area
Low Large First, starting with the right-most column
None (Default) Large and Medium After low importance columns
Medium Large and Medium After low importance columns
High All Last

Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


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.

Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. You do this by providing text that’s more meaningful to the user to the develoment team. The development team updates the text in the application’s internationalization (i18n) file for the object type.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create action via the object page is enabled. The action opens the object page in create mode so the user can enter the data.

You can enable the object creation via a dialog for objects that have 8 fields maximum. The action opens a dialog in modal view so the user can enter the data.

This feature is supported only for:

  • List reports with the single content layout
  • Main object creation from the list report page
Warning
When you enable this feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode. Also, Draft states are not maintained.

Hide Draft Values / Show Draft Values

With SAP Fiori elements for OData V2, you can display this button to allow users to choose between a display of only saved records or of all records. The button is displayed only when the Editing Status filter in the list report filter bar is set to All.

By default, the list report displays active (saved) records, draft (unsaved) records, and draft changes to active records.

Note that this feature is enabled at the application level and also displays the Display Saved Version / Return to Draft button in the object page header.

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 also exists, the Return to Draft button shows. 
  • From a list report with Show Draft Values selected, the object page opens in edit mode for drafts with the Display Saved Version button displayed.

When the user navigates back to the list report, it displays with the previously selected state.


Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum in an application that is not draft-enabled. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject.
  • Enable inline create for draft-enabled applications in grid and responsive tables only. See Inline Creation below.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Action Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type Read Mode for All Tables Edit Mode for Tables with Subobject Pages Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

In grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.

The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.

You can work with the development team to define a custom sort order.

For more information, see Add Items.


Prefilling Fields for a New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

Limitations

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button allows user to export the values in the table, including values in custom columns.

For more information see Export to Spreadsheet.


Full Screen Mode for Table Display

You can enable full screen mode for a table. However, it is generally not recommended.

Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.

For more information on the restrictions for this feature, see Maximize/Minimize.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.

Related Links

Elements and Controls

Implementation

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
Header Content Displayed in the Header Content Area and the Header Section Default in create and edit modes
Header Content Visible Default, you can hide it.
Header Content Hidden Available
Making Header Fields Editable Available
Highlighting Values Based on Criticality Available
 

Components

  

Availability
Dynamic Page Header Mandatory, it must be configured.
Title Mandatory, you must define it.
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.
Related Apps Menu Button Available
Display Saved Version/Return to Draft Button Available with SAP Fiori elements for OData V2 only
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
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

Behavior and Interaction


Collapsed/Expanded State

  • On the initial load of the object page, the header is expanded.
  • When the user scrolls down the page, the header collapses.

For more information, see:


Display of Header Content

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.

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.
Developer Hint
For more information on the features, refer the development team to:


Making Header Fields Editable

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

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


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.


Display Saved Version / Return to Draft

With SAP Fiori elements for OData V2, 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.

For more information, see Share (Generic).


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.


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:

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


Simple Header Facets

With SAP Fiori elements for OData V2 only, you can use a simple header facet to show simple data points that align horizontally across the header.


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 more information, see Quick View.


Micro Chart Facets

You can display the following microcharts 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

Elements and Controls

Implementation

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

 

Footer Bar Actions

  

Availability
Finalizing Actions Available
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
Apply Available, for the subobject page in draft-enabled applications only
Message Popover Button Default, visible only when messages are present.
Cancel Default in edit mode only
Enabling / Disabling of 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.

For more information, see:


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.


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.

For more information, see:


Cancel

The action is displayed by default in edit mode.


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.

Related Links

Elements and Controls

Implementation

Table Types

The SAP Fiori elements templates support the features and settings for the different table types detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability

Table Type

Responsive Table (Default)

Analytical

Grid

Tree

SAP Fiori Elements for OData Version

V2 & V4

 V2 & V4

 V2

V2
Devices
Desktop         
Tablet         
Phone          
Responsive
(hide column, popin support)		          
Density Mode

See Content Density.

 See Analytical Table: Compact, Cozy, Condensed. See Grid Table: Compact, Cozy, Condensed. See Tree Table: Types.
Condensed density         
Cozy density         
Summarized cell           
Hierarchical data           
Large number of rows (> 200)         
Grouping         
Freeze columns         
Horizontal scrolling         
Merge duplicates         
Supported Inline Controls All Limited 
See Inline Controls for Non-Responsive Tables below.		 Limited
See Inline Controls for Non-Responsive Tables below.		 Limited
See Inline Controls for Non-Responsive Tables below.
Row-based         
Column-based         

Inline Controls for Non-Responsive Tables

These inline controls are supported for grid, analytical, and tree tables:

  • Text
  • Label
  • ObjectStatus
  • Icon
  • Button
  • Input
  • DatePicker
  • Select
  • ComboBox
  • MultiComboBox
  • CheckBox
  • Link
  • Currency
  • RatingIndicator
  • ProgressIndicator

Also, the following when they are of a responsive or very small size:

  • StackedBarMicroChart
  • ComparisonMicroChart
  • BulletMicroChart

Related Links

Elements and Controls

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability
 

Features in List Report and Object Page

  

Availability
Title Mandatory
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Select All Action Available
Show/Hide Details Available in responsive tables
Actions Disabled Before Row Selection Available
Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4

Requires an extension with SAP Fiori elements for OData V2
Messages for Critical Actions Available
Messages for Destructive Actions Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Hide Draft Values / Show Draft Values Available, with SAP Fiori elements for OData V2 only.
Hiding Actions in Multiple Content Layout Available
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Full Screen Mode for Table Display Available, not recommended
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable them. When you do, the user must open the Personalization dialog to access the actions.

For more information, see Table Personalization (Overview).


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:



Select All

By default, Select All is hidden with SAP Fiori elements for OData V2. You can display it.

By default, Select All is displayed with SAP Fiori elements for OData V4 when you enable multiple item selection.

When the Select All button is hidden:

  • The user can select a range of multiple items, by selecting an item, pressing Shift, and selecting others. When the user selects more items than currently appear onscreen, additional items are loaded from the backend up to a specified limit. The default value for the limit is 200.
  • The Undo Selection button appears for the table, instead of the Select All, and allows the user to clear the selected items.

For a responsive table, enabling the multiple item selection is a prerequisite to enabling the Select All button.

For an analytical table, grid table, or tree table, ask the development team to use the Multi-Selection Plugin.

Warning
To ensure a positive user perception of performance, only display the Select All button for a small number of items.

When the user clicks Select All, all the items or rows load from the backend. Loading many items onscreen can require multiple requests to the system and, consequently, take time.

Developer Hint
For more information, see Enabling Multiple Selection in Tables.

Show / Hide Details

The table toolbar displays the Show Details action when at least one column is hidden from the screen based on its importance. After the user clicks Show Details to display the column, the action changes to Hide Details.

By default in responsive tables:

  • Key fields have the importance set to high in list reports.
  • Other columns have the importance set to none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned determines whether a column is displayed in all screen sizes, and in the pop-in area for a responsive table when screen space is limited.

Importance

Screen Sizes Where the Column Is Displayed

When the Column Moves into the Pop-In Area
Low Large First, starting with the right-most column
None (Default) Large and Medium After low importance columns
Medium
High All Last

Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


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.

Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. You do this by providing text that’s more meaningful to the user to the develoment team. The development team updates the text in the application’s internationalization (i18n) file for the object type.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create action via the object page is enabled. The action opens the object page in create mode so the user can enter the data.

You can enable the object creation via a dialog for objects that have 8 fields maximum. The action opens a dialog in modal view so the user can enter the data.

This feature is supported only for:

  • List reports with the single content layout
  • Main object creation from the list report page
Warning
When you enable this feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode. Also, Draft states are not maintained.

Hide Draft Values / Show Draft Values

With SAP Fiori elements for OData V2, you can display this button to allow users to choose between a display of only saved records or of all records. The button is displayed only when the Editing Status filter in the list report filter bar is set to All.

By default, the list report displays active (saved) records, draft (unsaved) records, and draft changes to active records.

Note that this feature is enabled at the application level and also displays the Display Saved Version / Return to Draft button in the object page header.

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 also exists, the Return to Draft button shows. 
  • From a list report with Show Draft Values selected, the object page opens in edit mode for drafts with the Display Saved Version button displayed.

When the user navigates back to the list report, it displays with the previously selected state.


Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum in an application that is not draft-enabled. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject.
  • Enable inline create for draft-enabled applications in grid and responsive tables only. See Inline Creation below.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Action Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type

Read Mode for All Tables

Edit Mode for Tables with Subobject Pages

Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

In grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.

The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.

You can work with the development team to define a custom sort order.

For more information, see Add Items.


Prefilling Fields for a New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

Limitations

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button triggers the export of the values in the table.

For more information see Export to Spreadsheet.


Full Screen Mode for Table Display

You can enable full screen mode for a table. However, it is generally not recommended.

Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.

For more information on the restrictions for this feature, see Maximize/Minimize.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.

Related Links

Elements and Controls

Implementation

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
Header Content Displayed in the Header Content Area and the Header Section Default in create and edit modes
Header Content Visible Default, you can hide it.
Header Content Hidden Available
Making Header Fields Editable Available
Highlighting Values Based on Criticality Available
 

Components

  

Availability
Dynamic Page Header Mandatory, it must be configured.
Title Mandatory, you must define it.
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.
Related Apps Menu Button Available
Display Saved Version/Return to Draft Button Available with SAP Fiori elements for OData V2 only
Generic Actions Default: Share is turned on.
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

Application-specific actions display to the left of the Edit and Delete buttons. Generic actions display to the right.

 Default

Within the application-specific action and generic action groups, you can order the actions relative to each other.
 

Additional Content (Optional)

  

Availability
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 with SAP Fiori elements for OData V2 only
Header Field Group Available
Rating Indicator Facets Available
Progress Indicator Facet Available
Key Value Facet Available

Behavior and Interaction


Collapsed/Expanded State

  • On the initial load of the object page, the header is expanded.
  • When the user scrolls down the page, the header collapses.

For more information, see:


Display of Header Content

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.

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.
Developer Hint
For more information on the features, refer the development team to:


Making Header Fields Editable

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

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


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.


Display Saved Version / Return to Draft

With SAP Fiori elements for OData V2, 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 more information, see Share (Generic).


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.


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

By default, the header toolbar displays application-specific actions to the left of the Edit and Delete buttons and generic actions to the right.

You can:

  • Specify the order of application-specific actions relative to each other.
  • Assign generic buttons a high importance so they display to the left of the Edit and Delete buttons after the application-specific actions.

For more information, see:

Additional Content


Simple Header Facets

With SAP Fiori elements for OData V2 only, you can use a simple header facet to show simple data points that align horizontally across the header.


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 more information, see Quick View.


Micro Chart Facets

You can display the following microcharts 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

With SAP Fiori elements for OData V2 only, 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

Elements and Controls

Implementation

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

 

Footer Bar Actions

  

Availability
Finalizing Actions Available
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
Apply Available, for the subobject page in draft-enabled applications only
Message Popover Button Default, visible only when messages are present.
Cancel Default in edit mode only
Enabling / Disabling of 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.

For more information, see:


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.


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. Now, the results of the Apply action are similar when the subobject page is open in flexible column layout. It 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.

For more information, see:


Cancel

The action is displayed by default in edit mode.


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.

Related Links

Elements and Controls

Implementation

Table Features

The SAP Fiori elements templates support the features and settings for a table detailed below.

For design information see the table guidelines, starting with Table Overview, and the links within this article.

Feature Availability

 

Table Settings

  

Availability
Column Heading Labels You set these.
Sticky Column Header Behavior Default, you can turn it off.
Column Width The default width depends on the column contents. You can change it.
Column Importance in Responsive Tables By default, all columns have an importance of none, except for list report columns for key fields. These have high importance.

You can change the level of importance.
Number of Table Rows Displayed at Once Work with the development team to find the best compromise between optimal user experience and optimal technical performance.
Ascending Sort Order on a Column Default, you can change it.
Grouping Available in responsive and analytical tables
No Data Found Text Default, replace the generic placeholder text with text that’s meaningful to the user.
 

List Report and Analytical Page Only

  

Availability
Number of Table Levels Expanded at Initial Load Default, you can change the number for the tree table and analytical table.

Table Settings


Column Width

The default column width varies according to the column contents:

  • Text: can range from 3 to 20 rem
  • Image: 5 rem
  • Rating or progress indicator: 6.875 rem
  • Chart: 20 rem

You can can change the width.

Developer Hint
For more information, refer the development team to Setting the Default Column Width.

Column Importance in Responsive Tables

By default:

  • Key fields have high importance in list reports.
  • Other columns have the importance of none and are handled like columns assigned medium importance.

You can change the level of importance.

The importance assigned determines whether a column is displayed in all screen sizes, and in the pop-in area for a responsive table when screen space is limited.

Importance

Screen Sizes Where the Column Is Displayed

When the Column Moves into the Pop-In Area
Low Large First, starting with the right-most column
None (Default) Large and Medium After low importance columns
Medium Large and Medium After low importance columns
High All Last

 

When at least one column is hidden from the screen based on its importance, the table toolbar displays the Show Details action. After the user clicks Show Details to display the column, the action changes to Hide Details.

For more information, see:


Number of Table Rows Displayed at Once

By default, a table:

  • In a list report displays 20 rows at once
  • In an object page displays 10 rows or 20 rows according to certain conditions
Guidelines
Work with the development team to find the best compromise between optimal user experience and optimal technical performance.

Sort Order

By default, the sort order for a column is ascending.

You can:

  • Set the default sort order to descending.
  • Define other, customized sort orders.

For more information, see the sort guidelines according to table type:


Grouping

Grouping is available in responsive and analytical tables.

You can define the format of the grouping headers.

For more information, see:


No Data Found Text

By default, the following text is displayed when no data is found.

  • When the user has not applied filters, the text is “No data found.”
  • When the user has applied filters from the personalization dialog, the text is: “No data found. Try adjusting the search or filter parameters.”
Guidelines
Replace the generic text with text that’s meaningful to the user.

List Report and Analytical Page Only


Initial Expansion of Table Levels

By default, on initial load, the following expandable tables are expanded to this number of levels:

  • Responsive table: 1 level
  • Tree table: 1 level
  • Analytical table: 0 levels

You can change the default value for the tree table and analytical tables.

Developer Hint
For more information, refer the development team to Initial Expansion Level for Tables in List Reports & Analytical List Pages.

Related Links

Elements and Controls

Implementation

Table Types

The SAP Fiori elements templates support the features and settings for the different table types detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability

Table Type

Responsive Table (Default)

Analytical

Grid

Tree

SAP Fiori Elements for OData Version

V2 & V4

 V2 & V4

 V2

V2
Devices
Desktop         
Tablet         
Phone          
Responsive
(hide column, popin support)		          
Density Mode

See Content Density.

 See Analytical Table: Compact, Cozy, Condensed. See Grid Table: Compact, Cozy, Condensed. See Tree Table: Types.
Condensed density         
Cozy density         
Summarized cell           
Hierarchical data           
Large number of rows (> 200)         
Grouping         
Freeze columns         
Horizontal scrolling         
Merge duplicates         
Supported Inline Controls All Limited 
See Inline Controls for Non-Responsive Tables below.		 Limited
See Inline Controls for Non-Responsive Tables below.		 Limited
See Inline Controls for Non-Responsive Tables below.
Row-based         
Column-based         

Inline Controls for Non-Responsive Tables

These inline controls are supported for grid, analytical, and tree tables:

  • Text
  • Label
  • ObjectStatus
  • Icon
  • Button
  • Input
  • DatePicker
  • Select
  • ComboBox
  • MultiComboBox
  • CheckBox
  • Link
  • Currency
  • RatingIndicator
  • ProgressIndicator

Also, the following when they are of a responsive or very small size:

  • StackedBarMicroChart
  • ComparisonMicroChart
  • BulletMicroChart

Related Links

Elements and Controls

Implementation

Analytical List Page / Overview Page

Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates. Consequently, you can find the information for all the design possibilities supported by those templates in the ‘Layouts, Floorplans, and Frameworks’ section of these guidelines:

  • Overview page: Both SAP Fiori elements for OData V2 and SAP Fiori elements for OData V4 support the overview page.
  • Analytical list page: Only SAP Fiori elements for OData V2 currently supports the analytical list page.

Worklist

With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.

The worklist features and settings that differ from those in the list report are detailed below.

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


Feature Availability

 

Worklist-Specific Features

  

Availability
Variant Management Not Enabled Default,  you must assign a header title.
Page-Level Variant Management Available
Header Title Mandatory, if you do not enable page-level variant management.
Filter Bar  Unavailable
Table Title  Default: The title contains the row count.
Table Behavior  Default: Fixed layout and growing mode when the user scrolls.
Search  Available in table toolbar
Personalization Actions Enabled: Sort, Filter, Group, and Column Settings  Default
 Export to Spreadsheet Available

Related Links

Elements and Controls

Implementation

Table Features

The SAP Fiori elements templates support the features and settings for a table detailed below.

For design information see the table guidelines, starting with Table Overview, and the links within this article.

Feature Availability

Table Settings

Availability
Column Heading Labels You set these.
Sticky Column Header Behavior Default, you can turn it off.
Column Importance Default: low, except for key fields

You can change the importance level.
Number of Table Rows Displayed at Once Work with the development team to find the best compromise between optimal user experience and optimal technical performance.
Ascending Sort Order on a Column Default, you can change it.
Grouping Available in responsive and analytical tables
No Data Found Text Default, replace the generic placeholder text with text that’s meaningful to the user.
 

List Report and Analytical Page Only
Number of Table Levels Expanded at Initial Load Default, you can change the number for the tree table and analytical table.

Table Settings


Column Importance

By default, all columns have low importance, except for key fields. You can change the level of importance.

The importance assigned determines whether a column is displayed in all screen sizes, and in the pop-in area for a responsive table when it is displayed in limited screen space.

  • High displays the column:
    • On all screen sizes
    • In the pop-in area for a responsive table
  • Medium displays the column:
    • On large and medium screens
    • In the pop-in area for a responsive table
  • Low displays the column on large screens only.

When columns are not displayed on the device screen, the table toolbar displays the Show Details button for users who want to display the hidden columns. After they click the button, it changes to a Hide Details button.

For more information, see:


Number of Table Rows Displayed at Once

By default, a table:

  • In a list report displays 20 rows at once
  • In an object page displays 10 rows or 20 rows according to certain conditions
Guidelines
Work with the development team to find the best compromise between optimal user experience and optimal technical performance.

Sort Order

By default, the sort order for a column is ascending.

You can:

  • Set the default sort order to descending.
  • Define other, customized sort orders.

For more information, see the sort guidelines according to table type:


Grouping

Grouping is available in responsive and analytical tables.

You can define the format of the grouping headers.

For more information, see:


No Data Found Text

By default, the following text is displayed when no data is found.

  • When the user has not applied filters, the text is “No data found.”
  • When the user has applied filters from the personalization dialog, the text is: “No data found. Try adjusting the search or filter parameters.”
Guidelines
Replace the generic text with text that’s meaningful to the user.

List Report and Analytical Page Only


Initial Expansion of Table Levels

By default, on initial load, the following expandable tables are expanded to this number of levels:

  • Responsive table: 1 level
  • Tree table: 1 level
  • Analytical table: 0 levels

You can change the default value for the tree table and analytical tables.

For more information, you can refer the development team to Initial Expansion Level for Tables in List Reports & Analytical List Pages.


Related Links

Elements and Controls

Implementation

Table Toolbar

The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability
 

Features in List Report and Object Page

  

Availability
Title Mandatory
Table Personalization Actions Default, you can turn them off.
Application-Specific Actions Available
Select All Action Available
Action Disabled Before Row Selection Available
Messages for Critical Actions Available
Messages for Destructive Actions Available
 

List Report-Specific Features

  

Availability
Toolbar Sticky Behavior Default, you can turn it off.
Standard Actions: Create, Delete, and Export to Spreadsheet Default, you can turn them off.
Object Creation via an Object Page Default, you can change it.
Object Creation via a Dialog Available in certain conditions
Hide Draft Values / Show Draft Values Available, with SAP Fiori elements for OData V2 only.
Hiding Actions in Multiple Content Layout Available
 

Object Page-Specific Features

  

Availability
Search Available, when the data allows it.
Edit Default, when the data allows it.
Delete Default, when the data allows it.
Subobject Creation via Subobject Page Default, you can change it.
Subobject Creation via Dialog Available for applications that are not draft-enabled in certain conditions
Create Not Visible In certain conditions
Inline Creation Available, in draft-enabled applications for grid and responsive tables
Prefilling Fields for New Object Creation Available, in draft-enabled applications
Copy and Paste from Microsoft Excel Available, in draft-enabled applications for grid and responsive tables, in certain conditions
Export to Spreadsheet Available

Default, when the copy and paste from Microsoft Excel feature is enabled.
Segmented Button for Switching Table Views Default for a table with a maximum of three views
Select Control for Switching Table Views Default for a table with four or more views

Features in List Report and Object Page

The information below relates to table toolbar actions and settings in both the list report and object page floorplans.


Table Personalization Actions

By default, Sort, Group and Order actions are enabled.

These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.

For specific use cases, you can disable them. When you do, the user must open the Personalization dialog to access the actions.

For more information, see Table Personalization (Overview).


Application-Specific Actions

You can define these actions and the text displayed on the buttons.

If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.

For more information, see:



Select All

By default, Select All is hidden with SAP Fiori elements for OData V2. You can display it.

By default, Select All is displayed with SAP Fiori elements for OData V4 when you enable multiple item selection.

When the Select All button is hidden:

  • The user can select a range of multiple items, by selecting an item, pressing SHIFT, and selecting others. When the user selects more items than currently appear onscreen, additional items are loaded from the backend up to a specified limit. The default value for the limit is 200.
  • The Undo Selection button appears for the table, instead of the Select All, and allows the user to clear the selected items.

For a responsive table, enabling the multiple item selection is a prerequisite to enabling the Select All button.

For an analytical table, grid table, or tree table, ask the development team to use the Multi-Selection Plugin.

Warning
To ensure a positive user perception of performance, only display the Select All button for a small number of items.

When the user clicks Select All, all the items or rows load from the backend. Loading many items onscreen can require multiple requests to the system and, consequently, take time.

Developer Hint
For more information, see Enabling Multiple Selection in Tables.


Actions Disabled Until the User Selects a Row

You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.

Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.

For more information, see UI Element States.


Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to ensure the user wants to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. Provide the new text to the development team. Then, the development team updates it in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text                          “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see:


Messages for Destructive Actions

By default, a message is displayed for confirmation of an action that will delete or destroy important data.

Guidelines
Overwrite the default message text so it’s meaningful to the users, as shown in the example below. You do this by providing text that’s more meaningful to the user to the develoment team. The development team updates the text in the application’s internationalization (i18n) file for the object type.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text The default message reuses the title and the description defined for the object in the table.

  • In flexible column layout: Delete object <title> <description>?

    For example, “Delete object 12345 (Sales Order)?”

  • In full screen mode: Delete object <title>?

    For example, “Delete object 12345?”

 “Do you really want to perform this action?
Replacement Text “Are you sure you really want to delete this product?” “Are you sure you really want to delete this product?”

For more information, see:

List Report-Specific Features

The information below relates only to table toolbar actions and settings in the list report floorplan.


Standard Actions

By default, Create, Delete, and Export to Spreadsheet are enabled.

You can disable them.

You can also enable or disable the Delete button based on conditions specified in the backend.

Example

You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.

Guidelines
In a responsive table, if you put a Delete button in the toolbar, do not enable the inline Delete for table rows.

Create Object Actions

By default, the create action via the object page is enabled. The action opens the object page in create mode so the user can enter the data.

You can enable the object creation via a dialog for objects that have 8 fields maximum. The action opens a dialog in modal view so the user can enter the data.

This feature is supported only for:

  • List reports with the single content layout
  • Main object creation from the list report page
Warning
When you enable this feature, users cannot navigate to an object page in create mode. Instead, they can navigate to the object page in display mode and switch to edit mode. Also, Draft states are not maintained.

Hide Draft Values / Show Draft Values

With SAP Fiori elements for OData V2, you can display this button to allow users to choose between a display of only saved records or of all records. The button is displayed only when the Editing Status filter in the list report filter bar is set to All.

By default, the list report displays active (saved) records, draft (unsaved) records, and draft changes to active records.

Note that this feature is enabled at the application level and also displays the Display Saved Version / Return to Draft button in the object page header.

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 also exists, the Return to Draft button shows. 
  • From a list report with Show Draft Values selected, the object page opens in edit mode for drafts with the Display Saved Version button displayed.

When the user navigates back to the list report, it displays with the previously selected state.


Hiding Actions in Multiple Content Layout

You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.

For more information, see:

Object Page-Specific Features

The information below relates only to table toolbar actions and settings in the object page floorplan.


Search

You can enable a search on the table.

For more information, see Search.


Edit

By default, Edit is displayed when the business object shown in the table is editable.


Delete

By default, Delete is displayed in edit mode when the business object shown in the table is deletable.

You can enable or disable the Delete action to allow users to delete only in certain conditions.

For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.

When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.

Warning
In a responsive table, if you put a Delete action in the toolbar, do not enable the inline Delete for table rows.

Subobject Creation

By default:

  • Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
  • The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.

You can:

  • Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
  • Enable creation of a subobject via a dialog with 8 fields maximum in an application that is not draft-enabled. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject.
  • Enable inline create for draft-enabled applications in grid and responsive tables only. See Inline Creation below.
Guidelines
Replace the default dialog title or subobject page title “New Item” to reflect the name of the subobject and to provide a name for unnamed objects that’s meaningful to the user.

For more information, see:


Create Visibility

Whether or not the Create action is visible in the table toolbar depends on:

  • The object page mode.
  • Whether the flow is global or local.
  • Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.

 

Flow Type

Read Mode for All Tables

Edit Mode for Tables with Subobject Pages

Edit Mode for Tables with Inline Edit

Global Flow for Draft-Enabled

Applications with Fiori Elements for OData V2
  • Navigation indicators   are visible (if required).
  • Create button is not visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are visible (if required).
  • Create button is visible.

Local Flow for Non-Draft Enabled Applications
  • Navigation indicators   are visible (if required).
  • Create button is visible.
  • Navigation indicators   are not visible.
  • Create button is not visible.
 Not Supported.

Inline Creation

In grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled.

The Create action is displayed in edit mode.

The inline create action creates a new row in the table and users enter the data for the new subobject in the row.

When a new entry is created, the row is highlighted in blue. The highlighting disappears once the data is saved.

By default, the new entry is displayed at the top of the table. You can work with the development team to define a custom sort order.

For more information, see Add Items.


Prefilling Fields for New Object

You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.

The new object must be the main object on the object page.

You determine both the fields to prefill and the default values for the fields.


Copy and Paste from Microsoft Excel

By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:

  • Draft-handling for the application.
  • Inline creation for the object page table.

After users copy data from Microsoft Excel, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (CTRL+ V for Microsoft Windows, CMD + V for MacOS).

See below Limitations of Copy and Paste from Microsoft Excel.

Limitations of Copy and Paste from Excel

  • Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
  • If there are validation errors, a dialog displays an error message so the user can take remedial action.
  • The greater the number of records copied, the longer the paste operation takes.
  • The order of the of the data copied from Microsoft Excel can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
  • Users cannot paste data into custom columns of tables.
  • This feature is not supported for custom tables.

Export to Spreadsheet

By default, Export to Spreadsheet is enabled with the copy and paste from Microsoft Excel feature above.

You can enable the button independently of the copy and paste from Microsoft Excel.

The Export to Spreadsheet button triggers the export of the values in the table.

For more information see Export to Spreadsheet.


Content Switch for Table Views

By default, the number of views that you set for the table determines the UI control for the content switch for table views.

By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.

Related Links

Elements and Controls

Implementation

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

 

Footer Bar Actions

  

Availability
Finalizing Actions Available
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
Apply Available, for the subobject page in draft-enabled applications only
Message Popover Button Default, visible only when messages are present.
Cancel Default in edit mode only
Enabling / Disabling of 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.

For more information, see:


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.


Apply

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

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


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.

For more information, see:


Cancel

The action is displayed by default in edit mode.


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.

Related Links

Elements and Controls

Implementation

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
Header Content Displayed in the Header Content Area and the Header Section Default in create and edit modes
Header Content Visible Default, you can hide it.
Header Content Hidden Available
Making Header Fields Editable Available
Highlighting Values Based on Criticality Available
 

Components

  

Availability
Dynamic Page Header Mandatory, it must be configured.
Title Mandatory, you must define it.
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.
Related Apps Menu Button Available
Display Saved Version/Return to Draft Button Available with SAP Fiori elements for OData V2 only
Generic Actions Default: Share is turned on.
Application-Specific Actions Available,  they must be configured.
Order of Toolbar Actions

Application-specific actions display to the left of the Edit and Delete buttons. Generic actions display to the right.

 Default

Within the application-specific action and generic action groups, you can order the actions relative to each other.
 

Additional Content (Optional)

  

Availability
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 with SAP Fiori elements for OData V2 only
Header Field Group Available
Rating Indicator Facets Available
Progress Indicator Facet Available
Key Value Facet Available

Behavior and Interaction


Collapsed/Expanded State

  • On the initial load of the object page, the header is expanded.
  • When the user scrolls down the page, the header collapses.

For more information, see:


Display of Header Content

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.

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.
Developer Hint
For more information on the features, refer the development team to:


Making Header Fields Editable

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

Breadcrumbs

A breadcrumb is 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.
  • 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:


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.


Display Saved Version / Return to Draft

With SAP Fiori elements for OData V2, 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 more information, see Share (Generic).


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.


Order of Toolbar Actions

By default, the header toolbar displays application-specific actions to the left of the Edit and Delete buttons and generic actions to the right.

You can:

  • Specify the order of application-specific actions relative to each other.
  • Assign generic buttons a high importance so they display to the left of the Edit and Delete buttons after the application-specific actions.

For more information, see:

Additional Content


Simple Header Facets

With SAP Fiori elements for OData V2 only, you can use a simple header facet to show simple data points that align horizontally across the header.


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 more information, see Quick View.


Micro Chart Facets

You can display the following microcharts 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

With SAP Fiori elements for OData V2 only, 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

Elements and Controls

Implementation

SAP Fiori Elements – Overview

SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:

  • Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps.
  • Drive UX consistency and compliance with the latest SAP Fiori design guidelines.

The articles in the ‘SAP Fiori Elements’ section of the guidelines cover all the design possibilities based on the current technical capabilities of the SAP Fiori elements framework and the version used to develop your application.

Versions

Ask your engineering colleagues what SAP Fiori elements version they will use to develop your app because there are differences in the design options that each version supports. The articles in this section of the guidelines indicate when such differences exist.

Each version of SAP Fiori elements supports a different version of OData (Open Data Protocol), as their names indicate:

  • SAP Fiori elements for OData version 2 (V2)
  • SAP Fiori elements for OData version 4 (V4)

Usage

Your ultimate decision about whether or not to use SAP Fiori elements should be based on two factors:

  • Is the floorplan you want to use supported by SAP Fiori elements?
  • Does the SAP Fiori elements floorplan deliver all the features you need to provide to your user? If not, consider building a freestyle application instead.

Please note that the analytical list page and the overview page are only available as SAP Fiori elements.

Supported Floorplans

The following floorplans are available as SAP Fiori elements templates:

List report
List report
Worklist
Worklist
Object page
Object page
Overview page
Overview page
Analytical list page
Analytical list page

Each floorplan can be placed inside the flexible column layout, except the overview page. The overview page must always be implemented as a standalone application that pulls in data from a minimum of two other applications.

Supported Features

Both SAP Fiori elements for OData V2 and for OData V4 offer the global edit flow, which includes draft handling. In addition, SAP Fiori elements for OData V2 supports the local edit flow without draft handling.

The SAP Fiori elements framework also incorporates message handling.

Placeholder Texts

Some UI texts provided by the SAP Fiori elements framework are generic placeholders. Always replace them with text that is meaningful to your user – for example:

 

Placeholder Text Replaced Text
List Report Create Object Create Sales Order
Object Page New Object New Sales Order
Overview Page Could not perform action Unable to approve the request

Extensions

It’s possible to create extensions to deliver features that are not supported by SAP Fiori elements. However, this is not recommended because the associated code will need to be maintained.

Developer Hint
You can create extensions, by adapting the manifest.json of your app, or through annotations or UI adaptation. For more information, see the Extending SAP Fiori Elements-Based Apps.

Related Links

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

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 Variant Management Default, you can turn it off.
Share Menu Default with SAP Fiori elements for OData V2 only
Manual Update Mode Default
Live Update Mode Available with SAP Fiori elements for OData V2 only
Search Available
Filter Bar Default
Initial State of Filter Bar Default: expanded

When the list report data is loaded: collapsed
Editing Status Filter Default for draft-enabled applications
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 Variant Management

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

You can disable it.

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

For more information, see Header title.


Share Menu

By default, with SAP Fiori elements for OData V2, the header contains:

  • The generic Share menu with the global actions Send Email and Save as Tile.  
  • Share in SAP Jam, when SAP Jam integration is configured.

For more information, see:


Update Mode

By default, the update mode is manual.

You can enable live update mode instead with SAP Fiori elements for OData V2.

For more information, see Live Update / Manual Update.


Search

By default, the search is disabled.

You can enable it.

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.

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 Filter Bar

Collapsed when:

  • Default page-level variant management is enabled.
  • A variant is set both as the default and to apply automatically.

Editing Status Filter

By default, the filter is enabled for draft-enabled applications.

The filter values and corresponding results are as follows:

  • All (Default value): All results, except duplicates.

Note that users see their own drafts of unsaved changes, but not the corresponding active version of the document.

  • Own Draft: Drafts that the current user can display or edit.
  • Locked by Another User: Active versions that are locked by other users. The current user cannot edit these versions.
  • Unsaved Changes by Another User: Active versions that were edited by other users but are no longer locked. The current user can edit and overwrite these versions, and the previous draft will be overwritten.
  • No Changes: Active versions that have 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

You can also decide on the selection controls for the filters.

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

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

Implementation