SAP Fiori Elements

Intro

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.

https://www.youtube.com/embed/6_VuA5QcuHQ?feature=oembed

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:

Usage

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

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

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

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.

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