Blogs • 15 Jul 2021

Fiori elements: What, How and When?

Fiori elements, What, How and When?

WHAT?

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.
 

HOW?

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

  • Where will you run the app? Just like SAPUI5, Fiori elements applications are web applications running in a browser. E.g., native iOS or Android Fiori elements applications do not exist.
  • How will you connect to the backend data? In order to use Fiori elements, the data protocol must be OData v2 or OData v4. Other data sources are not supported.
  • Offline usage of the app is not supported.

 

WHEN?

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.

Fiori

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:

  • Is the page type you want to use supported by an SAP Fiori elements “floorplan”; does this match the expected layout, type and number of objects displayed to the user?
  • Does the floorplan that fit your needs support all the features you want?

The available floorplans are:

  • List report lists of business objects.
  • Object page, to manage individual business objects.
  • Overview Page, a dashboard for business relevant data.
  • Analytical list page, for graphical breakdowns of business data.
  • Worklist, a list of messages (success, warning, error, information)

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 on https://experience.sap.com/fiori-design-web/smart-templates/#supported-floorplans.

The following decision tree can be used to base your SAP Fiori elements vs. Freestyle SAPUI5 app on:

Fiori elements

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!
 

Sources