SAP Fiori elements is a low code framework on top of SAPUI5, that comprises the most commonly used application page types most commonly referred to as “floorplans” in SAP Fiori elements. It is designed to speed up development and to drive UX consistency and compliance with the latest SAP Fiori design guidelines.
The main idea behind SAP Fiori elements is to generate an SAP Fiori app at runtime from an existing OData API with additional metadata (annotations that define attributes and relationships of the data).
Not only the content of the pages of the application is generated by SAP Fiori elements, also the logic and behavior. This results in very little UI development: navigation, filtering, editing, saving, … is all taken care of. That way, the amount of frontend code needed to build SAP Fiori apps is drastically reduced.
Since SAP Fiori elements is built on top of SAPUI5, the look and feel of your applications will be consistent with these. Also, the project structure (code) of the project will be very familiar if you know SAPUI5. There are a couple of key differences with the setup of a custom SAPUI5 application such as the lack of custom controls, controllers and views, and the addition of the annotation file.
Most if not all of the developments in an SAP Fiori elements application are done by adding annotations either directly to the data in the backend, or by adding/overwriting these annotations in the annotation file locally in the project.
For ease of use, SAP offers the “SAP Fiori tools”. Using these, you can easily make a new Fiori elements application or edit the annotation file by using “guided developments”. They allow the developer to walk through the steps required to implement a specific functionality in the application, generating a code snippet that can be easily applied to the code. The SAP Fiori tools are standardly available in the Business Application Studio or by installing the extension for VS Code. Technical Requirements
Just like any technology, there are some technical requirements for your application to be able to use SAP Fiori elements:
Why not just make a custom “freestyle” SAPUI5 application, that does not use Fiori elements? In freestyle apps, you have complete control and flexibility over your app: layout, flow, menu, colors, fonts, etc. Of course, there are tradeoffs between flexibility and development efforts. In SAP Fiori elements, the template provides the UI code, so that the data goes exactly where it should.
Source
If the application calls for features that are not available by default in Fiori elements, it is possible to extend the application with extensions. Extensions can be custom controls, custom logic behind buttons, … But where should we draw the line and consider building a freestyle application instead?
The ultimate driver of this decision should be based on two factors:
The available floorplans are:
Each floorplan can be placed inside a flexible column layout, except for the overview page. The overview page must always be implemented as a standalone application that pulls in data from other applications. More information on floorplans and their supported features can be found here.
The following decision tree can be used to base your SAP Fiori elements vs. Freestyle SAPUI5 app on:
Around 75% of all new Fiori apps in SAP S/4HANA suit one of these floorplans and have been developed using SAP Fiori elements. This is a good indicator of the enterprise readiness of Fiori elements. We hope this blogpost will convince you to consider SAP Fiori elements as an option for your future Fiori developments.
YEAH!
Get inspired by our cases, news and the latest SAP insights.