Skip to Content
Personal Insights

Fast track to SAP Fiori elements – how I got started

Have you heard about SAP Fiori elements and how it is supposed to really accelerate development of enterprise-ready web applications with a timeless architecture? I recently started on a journey to learn about SAP Fiori elements and if you are also interested this blog should help you to get on a fast track to ramp up on SAP Fiori elements.

1. What exactly is SAP Fiori elements?

SAP Fiori elements is a library of common floorplans based on SAPUI5 that allows developers to create SAP Fiori applications with very little – in some cases even no – additional UI code. SAP Fiori elements generates an SAP Fiori app from an existing OData service with additional metadata using annotations that define attributes and relationships of the data. ~80% of the common UI patterns in the enterprise application space can be covered by the supported page types (aka floorplans).

Using SAP Fiori elements boosts your developer productivity, ensures UX consistency and significantly reduces your apps’ total cost of ownership (TCO) while automatically keeping it up to date with the latest Fiori design guidelines. Essentially the developer selects the relevant floorplan and adds semantic and structural data using metadata annotations. The framework then generates the application screen applying the latest Fiori design guidelines.

I really liked this video series from engineers for engineers to get a good grip on what SAP Fiori elements actually is, but there are also other sources, e.g. Introduction section of Usage guide, Introduction to SAP Fiori Elements in the Fiori Design guidelines or Introduction in SAPUI5 documentation.

2. Can I build my app leveraging SAP Fiori elements?

Checking if the app you want to build can be realized leveraging SAP Fiori elements is actually pretty simple – just answer these questions:

  1. Are you building a web application (i.e. an application running in a browser, not a native app) based on OData services?
  2. Does your target design follow the principle of list + drill-down to detail (=object page) where a list can be a list report, a worklist or an analytical list page? Optionally with a navigation via an overview page?

If your answer was YES to all of these, it is definitely worth your time to take a thorough look at SAP Fiori elements!

3. Benefits and limitations of SAP Fiori elements based apps compared to freestyle apps

In a nutshell, using SAP Fiori elements allows you to lower your costs in terms of development and maintenance efforts while taking care of UX consistency in exchange for full flexibility. Let me emphasize the ‘full’ here: There is still a good degree of flexibility available if you build an SAP Fiori elements-based app by leveraging extension points.

4. A short excursion on annotations

Annotations play a vital role for SAP Fiori elements. I heard about semantic annotations, about capability or ‘UI’ annotations or behavior. A bit of a jungle at first. What helped me was to look at examples of what they do, i.e. describing:

  • the semantics of a field, e.g. ‘this is a phone number’
  • How fields are related to each other, e.g. ‘this is the unit of measure for this value’
  • Behaviors of a field, e.g. whether it is editable or read-only
  • Groupings of fields, i.e. which set of fields should be displayed together

5. How to get hands-on experience?

Now it’s time to try it out. Let’s get our hands dirty…

A bit hidden in the depth of the UI5 documentation you can find instructions on How to build an SAP Fiori elements based app using WebIDE
Note that the SAP Business Application Studio has just been released. It is the next generation of the WebIDE. For details please refer to this blog on its release.

Do try out the developer tutorial for SAP Fiori tools (see below)!

6. The latest and greatest on SAP Fiori elements: SAP Fiori tools!

SAP Fiori tools further eases & accelerates the development of SAP Fiori elements based apps. This collection of productivity tools is available for SAP Business Application Studio as well as for Visual Studio Code (via extensions).

7. What’s next for SAP Fiori elements?

There is a major innovation for SAP Fiori elements based app development on its way: As of today SAP Fiori elements allows you to create apps based on the OData v2 protocol. Later this year (2020) we plan to release a first version of SAP Fiori elements using OData v4. Read Peter’s announcements for more details. We are currently running a beta program, which is now full.

To get a first idea on what you can expect from SAP Fiori tools for SAP Fiori elements floorplans for  OData v4 have a look at the recording of this webinar, which was held as part of the SAP Cloud Platform in the garage webinar series.

As I learn more about SAP Fiori elements, I’ll continue to share my findings with you.

You must be Logged on to comment or reply to a post.
  • Hi Stefanie,

    Very well structured blog .

    I really like the way its presented in the form of Questions and answering the questions.

    It gives me very good starting and insight into the topic fast track to ramp up on SAP Fiori elements.


    Thanks for wonderful blog 🙂