Usage Scenario
Your company is planning to develop a set of cloud-based applications. These applications should be accessible on all device types such as mobile phones, tablets, and laptops. The look and feel of these applications should be similar on these devices to reduce learning time for end-users. Therefore, you need an efficient way to design the UI of these applications. SAP Fiori Elements provides multiple generic templates to do so.
Advantages of Using SAP Fiori Elements
SAP Fiori itself represents the design philosophy behind SAP applications. This philosophy defines the core principles that should drive modern user interfaces. Based on these principles, SAP Fiori Elements provides a set of several common page types — comparable to several templates — that give developers a head start in developing applications that connect to data in SAP back-end systems. SAP Fiori builds on SAPUI5, SAP's HTML5 development toolkit.
The main idea behind SAP Fiori elements is to generate an SAP Fiori app at runtime from an existing OData service. OData is the industry standard for exchanging business data via RESTful HTTPS APIs.
Each OData service comes with a metadata document that describes the service. The metadata document is also extendable by developers. SAP entities exposing the OData services can be enriched with additional metadata, called "annotations" to define new attributes and relationships of the data. Based on these annotations, SAP Fiori elements will dynamically generate the app at runtime.
In addition to the content of the pages, SAP Fiori elements manages the logic and behavior of the application. For example, there is no longer the need to write UI code to manage navigation between pages or apps, to apply a filter to the content of a table, or to edit and save an object. This means that standard apps require very little UI development, and occasionally no additional UI code at all.
When your app differs slightly from the standard page specification, it is possible to use annotations to achieve exactly the look or functionality you want. If you want a fully custom app, sometimes called a freestyle app, using your own designs, layouts or workflows, you can do this with SAPUI5, but not with SAP Fiori elements.
When to Use SAP Fiori Elements
When it comes to decision-making, you or your team can choose between two options:
- Develop the application with SAP Fiori Elements.
- Start with SAP UI5 freestyle development.
In case your business requires a working app as quickly as possible, and you want to do as little coding as possible, SAP Fiori elements might be the right choice for you. The different template wizards will guide you through the creation of the app. During the creation, you have to decide with which page type you want to work with. SAP Fiori elements offers the following page types or floorplans:
List Report: choose this when you need to work with a large set of items.
Worklist: use this to take action on work items.
Object page: use to display details about an object.
Overview page: to provide an entry-level view of content.
Analytical list page: provide multiple angles of data for analyses.
Summary
You are now familiar with the fundamentals of SAP Fiori elements. You understand when to use SAP Fiori elements and when to start a SAPUI5 freestyle development project. If you want to dive deeper into this topic, consider the further reading section.