Overview

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.

SAP Fiori Design Guidelines → SAP Fiori ElementsSAP OData Vocabularies

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.

Developing Apps with SAP Fiori Elements

SAP Fiori elements provides designs for UI patterns and predefined templates for common application use cases. App developers can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations that don't need JavaScript UI coding. The resulting app uses predefined views and controllers that are provided centrally. This means no application-specific view instances are required. The SAPUI5 runtime interprets metadata and annotations of the underlying OData service and uses the corresponding views for the SAP Fiori app at startup.

SAPUI5 SDK

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

List Report

Fiori Elements List Report

Object Page

Fiori Elements Object Page

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.

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.

Extending SAP Fiori Elements-Based Apps