Fast track to SAP Fiori elements - how I got started

[stefaniehager]

Last updated on 9th of December 2020

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 our flexible programming model, which allows you to include SAPUI5 freestyle coding into SAP Fiori elements based apps.

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. Which features does SAP Fiori elements support?

Check the SAP Fiori elements feature map to find out if the feature you are looking for is supported. And if it is not, maybe there is a valid alternative that is supported by SAP Fiori elements? Keep in mind that enhancing an SAP Fiori elements app with custom SAPUI5 coding provides great flexibility, but increases the total cost of ownership.

7. Is there any tooling that facilitates SAP Fiori elements app creation?

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 the VSC marketplace).

SAP Fiori tools uses wizard-style approaches, e.g. to generate the app based on your OData service and the selected template ensuring a consistent app structure. It also provides step-by-step development instructions via the guided help module. Furthermore it reduces effort and skill level required for creating annotations thanks to the code completion module (aka LSP support). Last but not least it improves code consistency and simplifies app maintenance.

8. Latest news: SAP Fiori elements now support OData V4

Until recently SAP Fiori elements supported the OData v2 protocol, now we also OData v4. Check the announcement for more details.

There is also a great developer tutorial that let's you try the new functionality based on an OData V4 service built on SAP Cloud Application Programming model

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