SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (2022)

What is SAP Fiori Elements?

SAP Fiori elements is a schema that consists of the most frequently used layout plan presets and is intended to:

  • accelerate appinnovation by decreasing the quantity of frontend code necessary to construct SAP Fiori applications.
  • Ensure UX uniformity and adherence to the most recent SAP Fiori design standards.

SAP Fiori elements are a structure for generating UIs that SAP invented to lessen the quantity of front-end code while working to develop a SAP Fiori app and to maintain the design coherently. To create a SAP Fiori app, SAP Fiori elements utilise metadata comments and predetermined frameworks. The floorplans displayedbelow are now accessible with SAP Fiori elements in the most recently released SAPUI5 (version 1.44).

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (1)

Developing SAP Fiori Apps with SAP Fiori Elements

Now that you have successfullyexploredthe complex floorplans accessible with the newest SAPUI5 release, we'll explain the process of developing SAP Fiori applications with SAP Fiori elements.

In this segment of the blog, we'll go over the entire process of creating a primitiveSAP Fiori overview page in SAP Web IDE and deploying it to your SAP Fiori launch platform. The overview page's data is based purely on the Supplier List OData service. Here is how toget started; simply follow the steps below.

Types of SAP Fiori Element Floorplans

Overview Page

The SAP Fiori overview page app is a floor plan with a UI system that describes rapid admin rights to important company information at a glimpse. This comes in the form of implementable cards on a particular page, allowing developers to customize snap decisions and concentrate on their most crucial functions.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (2)

Cards are containers for app content, and they represent an entry-level view of the most relevant app data for a given topic. The SAP Fiori overview page contains five types of cards, shown in this figure:

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (3)

Each kind of card permits clients to envision data intelligently and proficiently:

1. List: List cards that show things in an upward rundown.

2. Link rundown: Link list cards show things as connections or pictures that can explore an objective or open a spring up window with extra data.

3. Table: Table cards show things in a table arrangement.

4. Stack: The stacked card is an extraordinary kind of card that shows an assortment of single item cards. This sort of card has two interactive regions; the left region explores the parent application, and the right region opens the article stream.

5. Analytic: Analytic cards comprise of two regions: a header region that shows the accumulated upsides of a KPI and a diagram region that shows information in a graphical arrangement.

(Video) SAP Fiori elements: Documentation

List Report Floorplan
The second kind of floorplan is the List Report application, a reusable floorplan format that permits clients to work with huge arrangements of things and follow up on everyone.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (4)

Object Page Floorplan
Object Page (as seen underneath) is one more kind of floorplan layout, which permits clients to show, make, or alter a thing. The Object Page floorplan can be carried out utilizing the pre-fabricated SAP Fiori component.

To Create an Overview Page :

  1. The very first step is to sign in to the SAP Web IDE.
  2. The next step requires you to start creating a new project, and then select the option of New Project from Template.
  3. Thereafter you need to choose the option of SAP Fiori Elementsthat is available in theCategorymenu, then chooseOverview Page Application, and finally tap onthe Next option.

4.After you have done this, then select a suitable Project Name and click on the Next tab.

5.Then choose theService Catalogand thereafter theServer option.

6.In the next step the user needs to choose the OData option on which they want to create their application, and then clickon Next option. In the example given below, the selection has been theSupplier InvoiceOData service.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (5)

7.For the time being, in the window ofAnnotation,simply click Next (see below). An annotation file is a conceptual synopsis of an OData service; in broad sense, an annotation file must be inhabited; in the long term, the usercan build their veryown annotation file but also publish it in this phase itself.

8. Enter the details in the Technical and General fields, the App Title and also in the App Description option and then finally click on Finish option.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (6)

SAP FIORI Training

  • Master Your Craft
  • Lifetime LMS & Faculty Access
  • 24/7 online expert support
  • Real-world & Project Based Learning

Explore Curriculum

(Video) SAP Fiori elements: Frequently Asked Questions

You’ve successfully created an SAP Fiori overview page project from a template. Next, let’s create a card.

If you have followed the steps given above to the teeth then you can assume that you have successfully created the overview page in the SAP Fiori using a template. The next set of steps instruct the user to create a card.

To Create a Card

  1. To begin with you will have to right-click on the project option and then selectNew, and finally click onCard option.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (7)

2.The next step is the data source verification and requires you to click onNext.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (8)

3. After that choose List from the option of list of cards and then click on Next.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (9)

4. Pick the Entity Set which is available in the dropdown menu that appears, and then enter the Title and Subtitle for the card.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (10)

5.Scroll down to see the Card Properties as well as Annotations (see below). Typically, annotations are alreadypre-selected. Pick the card characteristics, then press the Next button.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (11)

6.Clickon Finish option.

7.thereafter right-click on the project and then selectRun option then finally pick theRun Configurations.

(Video) List Report in SAP Fiori | CDS | Annotations | SAP Fiori Elements

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (12)

8.Choose theRun Component.js, then tap onSave and Run.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (13)

9.The user following these steps should now see the list card that you have previously developed created in this particular exercise.

SAP Fiori Elements | A Complete Guide On SAP Fiori Elements (14)

Follow the identical actions to add as much cards to the overview page, but this time add multiple kinds of cards. When your overview page is fully prepared to go, right-click the project and choose Deploy, then choose a destination (e.g., SAPUI5 ABAP Repository or SAP Cloud Platform).

SAP Fiori elements clubs the UX best practices from design and implementation best practices from engineering to provides a seamless and delightful experience for both i.e. the application developers and the business users. Here are some of the best practices with SAP Fiori elements.

<img src="/images/logo.svg" alt="" />

Subscribe to our youtube channel to get new updates..!

Enterprise Readiness
Non-utilitarian prerequisites like execution, availability, security, responsiveness, flexibility and so on may regularly be exceptionally interesting and will consume more worker hours than the practical necessities itself. For custom form applications, the application advancement group is liable for sticking to these non-utilitarian necessities. With evolving times, subjects like Security and openness are presently not simply a decent to have a component yet additionally a limiting to the applications, for instance, the European Accessibility Act. SAP Fiori components deal with this large number of non-useful details so.
your execution group can focus on a much more convoluted business rationale.

UX Consistency
Keeping up with UX consistency between various applications and cross-heave, specifically, could be an extremely comprehensive interaction and could require exceptionally severe cycles and D-Gates. Inability to accomplish a specific level of UX consistency may not just outcome in high client preparing use, yet may likewise bring about lower efficiency from business clients. All of the applications created with SAP Fiori components will continuously be as predictable as could be expected, with practically no work from the application's designing or configuration group.

(Video) SAP® CAP Tutorial #7 Fiori Elements Annotation ObjectPage

Rapid Development

As we probably are aware SAP Fiori components is a metadata-driven UI system, which delivers your UI in view of your application manifest, administration metadata and explanations, as opposed to application designers composing and keeping thousands and Kilos line of code for SAP UI5 custom form applications. This advancement is even heightened more with Web IDE.

So with SAP Fiori components, you can now productise an application not in months or years but rather in long stretches of time.


SAP Fiori Elements isn't inflexible, rather it's truly adaptable and extensible at each layer. It upholds application designer augmentations for an application engineer to consolidate unmistakable business requests. Fiori Elements upholds WYSIWYG based extensibility through the SAP Visual Editor and Key client for clients and merchants. Indeed, even It upholds personalisation for business clients.


Suppose you have fostered a bunch of various applications and businesses returns for certain ideas and changes. With SAP Fiori components, It's very easy and speedy to join these criticisms and changes contrasted with exclusively assembled applications.

Upkeep and Support

Relapses and compromise after redesigns are things of the past with SAP Fiori Elements. As since you don't or have exceptionally less application-explicit code to grow, subsequently you have very little or no work for the upkeep.

With the Diagnostic apparatus, It is as consistent to look for help for SAP Fiori Elements. It gathers all the expected data which will be valuable for the SAP support group to fix your issue. Subsequently, diminish the numerous ping pong between SAP Fiori components backing and application group.

SAP FIORI Training

Weekday / Weekend Batches

See Batch Details

(Video) Beyond SAPUI5 and SAP Fiori Elements | SAP TechEd in 2020


SAP Fiori elements are a blessing for the developers who have a target number of apps to achieve. It helps them to accelerate the entire process by saving time in front-coding and several other design aspects. If you have any queries related to this blog, do write back to us.


How do I learn Fiori elements? ›

Course information
  1. Explain the concept of Fiori Elements.
  2. Explain the concept of annotations of OData services.
  3. Explain the Concept of Smart Control.
  4. Explain Templates for Fiori Elements.
  5. Explore the Development Environment.
  6. Explore the basic process of building Fiori Elements Application.
  7. Use the CDS View and SADL.
  8. Use SADL.

What are SAP Fiori elements? ›

SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to: Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps. Drive UX consistency and compliance with the latest SAP Fiori design guidelines.

How long does it take to learn SAP Fiori? ›

Over the course of four weeks, with a time commitment of 3-4 hours per week participants get an overview of Fiori, followed by sessions on designing Fiori apps, then developing Fiori apps, managing Fiori, and then have the opportunity to take an exam to verify they have internalised the course content.

What does the SAP Fiori elements feature map enable you to do? ›

SAP Fiori elements provides standardized floorplans, allowing developers to create consistent applications in a very efficient manner. Using SAP Fiori elements can save you time and money during the implementation and maintenance phases of your project.

What are SAP Fiori design guidelines? ›

SAP Fiori sets the standard for enterprise user experience by removing unnecessary complexity. We put users in control of their business tasks by giving them only what they really need. This core goal is reflected in five design principles: role-based, adaptive, coherent, simple, and delightful.

What are the types of apps available in SAP Fiori choose 3 correct answers? ›

There are three types of apps in SAP Fiori: transactional apps, analytical apps, and factsheet apps.

What does the SAP Fiori Rule 1 1 3 mean? ›

SAP advocate a design principle known as 1-1-3 (“one one three”). This means each screen should be designed with a single user (or role) in mind, a single task that this user wants to accomplish, and a maximum of three levels of navigation to perform this task.

What is the difference between SAP and Fiori? ›

The Difference between SAPUI5 and SAP Fiori

As a result, SAP Fiori aims to provide a consistent, simple, intuitive, and responsive user experience for all SAP applications. SAP UI5 is a technology for developing responsive web applications. SAP UI5 is, in other words, the coding language for SAP Fiori.

How do I learn Fiori and ui5? ›

Learn how to build Fiori app from scratch with VS Code - YouTube

How do you become a Fiori developer? ›

  1. 1) Study the SAP Fiori design guidelines. ...
  2. 2) Get to know the sap. ...
  3. 3) Understand components and routing. ...
  4. 4) Embrace MVC and declarative views. ...
  5. 5) Start using the WebIDE. ...
  6. 6) Set up your local development environment now. ...
  7. 7) Make Northwind your new friend. ...
  8. 8) Learn how to wield Chrome Developer Tools & the UI5 Support Tool.
2 Mar 2015

What language does SAP Fiori use? ›

Supported Languages
LanguageSAP Fiori ClientCustom SAP Fiori Client
English (en)1.0 and laterSDK 3.0 SP04 and later
French (fr)1.4 and laterSDK 3.0 SP09 and later
German (de)1.4 and laterSDK 3.0 SP09 and later
Hungarian (hu)1.8 and laterSDK 3.0 SP14 and later
10 more rows

How do I start Fiori? ›

Go to the User tab, enter the user details that you want to use, to access the Launchpad and save. To Add the Catalog to a group in Launchpad, login to Launchpad and select the Tile Catalog. Select the catalog you have created and click on '+' sign to add to a group.


1. Fiori Elements Webinar
(Cadaxo GmbH)
2. Using SAP Fiori elements: Extending SAP Fiori elements Applications
(SAP UX Engineering)
3. Deep Dive on SAP Fiori elements and SAP Fiori Tools. SAP Fiori-side Chat - Episode 03
(SAP Design)
4. [NO COPY PASTE] Fiori Elements with annotations | Smart Filter | Overview Page Fiori App
(Anubhav Oberoy (Official))
5. Getting Started with SAP Fiori elements: Understanding OData and Annotations
(SAP UX Engineering)
6. Creating Multiple Views with SAP Fiori Elements
(New York Channel)

Top Articles

Latest Posts

Article information

Author: Roderick King

Last Updated: 01/09/2023

Views: 6247

Rating: 4 / 5 (71 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Roderick King

Birthday: 1997-10-09

Address: 3782 Madge Knoll, East Dudley, MA 63913

Phone: +2521695290067

Job: Customer Sales Coordinator

Hobby: Gunsmithing, Embroidery, Parkour, Kitesurfing, Rock climbing, Sand art, Beekeeping

Introduction: My name is Roderick King, I am a cute, splendid, excited, perfect, gentle, funny, vivacious person who loves writing and wants to share my knowledge and understanding with you.