UI5 and SAP Fiori: An Introduction

The UI5 or SAP Fiori are another block next to SAP Screen Personas. Together, these technologies form the cornerstones of the SAP UX strategy.

First, it’s important to know that UI5 is a JavaScript framework. Thus, the tool offers an extensive collection of pre-made UI elements. But there are two different versions. “OpenUI5” comes as a free version, whereas “SAPUI5” is subject to charge. That is why they differed in their content. For example, only SAPUI5 offers a chart library.

SAP Fiori: A Design Approach

SAP Fiori is not a technology, but a design approach. This approach consists of five principles:

  • With the “role based” focus, SAP wants to ensure that the applications are 100 percent adapted to business requirements.

  • By “delightful” means that the applications simplify the daily work of the users and that users will be enthusiastic about the user experience.

  • Coherent” refers to the soft transition from one application to the next. The landscape should feel like a single piece and offer each business unit an identical experience.

  • Simple“: The applications should be simple and intuitive.

  • Adaptive” – regardless of which device the programs are called on, they should automatically adapt optimally to the environment.

SAP Fiori Elements and Freestyle

Here it is worth taking a look at the SAP Fiori Reference Library, because SAP already offers a large number of pre-made Fiori apps. Basically, two approaches can be distinguished in custom development: First, Fiori Elements offers templates, which you only have to enrich with your data. On the other hand, the Fiori Freestyle is an individual alternative if the Fiori Elements do not offer the right template. The developer enjoys the highest degree of freedom, but the implementation is also more complex.

The Fiori Elements also consist of five core elements:

  • The Analytical Page is primarily composed of diagrams. Data can be viewed from different perspectives.

  • The List Report Floorplan mainly represents lists and is so to speak the successor of the ALV. It offers many possibilities in sorting and grouping the data.

  • The Object Page Floorplan is not only the detail view of an object, but also allows you to create, edit, and delete business objects.

  • The Overview Page provides an overview, as the name already implies. Among other things, it serves as an introduction to a business role.

  • The Worklist Floorplan shows a collection of items. For example, it can be used as an entry point for the user to handle these elements and thus represents workloads.