Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert
This blog post written based on new SAP cutting edge technologies, framework, tools to implement Fiori Apps & deliver software quality  out-of-box .I personally reached out to SAP Software experts (Engineering, UX Team) to gather their unique prospective on this subject .I’ve also crawled the most popular SAP Blogs for this topic .So rest assured that you are getting only fresh and up-to date content here. Stay tuned @ SAP

SAP Fiori

SAP Fiori is the design principles, practices and the design style guide.

SAP Fiori (new version Fiori 3) apps can be implemented either by using SAPUI5 or SAP Fiori elements.

Fiori uses SAPUI5 for frontend and it uses OData to get back end data. One code line for all screen sizes like Browser, Mobile .. i.e It will run on any device (Mobile ,Tablet , Desktop)

Official delivered Fiori apps can be found in the Fiori Apps Library Fiori Apps Library

SAP Fiori3 is SAP’s new target design system, which evolves the SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device.

What is SAP User Experience! & SAP’s user experience strategy

UX/UI is essential for promoting a high level of quality and consistency across all pages of web application .UX may require more creativity than UI ,at the end of the day, the design of a website has to be user centric and add value to end user .
In the world of design thinking, design is a three-phase process of “discover, design and deliver.” Other companies use different words and different steps, but in general it is always the same.
In order to complete all three phases of the “Design Thinking" process, organizations require a new set of skills and mindset, including facilitation, coaching, brainstorming and idea generation (Design Thinking).
Design Thinking in 500 Words or less refer combines empathy, creativity and rationality to meet user needs and drive business success

Learn more about how SAP can help augment your team’s staffing and how to build the right skills in your organization.
AppHaus :

UX and UI depend on each other. UX should focus on the end user

UI vs. UX  differences


SAP Fiori UX represents a personalized, responsive and simple user experience across devices and deployment options.” (


UI5 is a technology whereas Fiori is a methodology. UI5 offers framework, development tool kit for html 5 , contains lot of predefined JavaScript libraries based on MVC pattern. By using this framework developer can easily build web application. ... UI5 uses web technologies like HTML, CSS and JavaScript.

margot.wollny   wrote a nice blog post about

The evolution for UI5 hasn’t stopped yet & what UI5 had set out to do for 2020

SAP Fiori elements

From my personal experience ,SAP Fiori elements works for around 80% of SAP use cases, this is because SAP Fiori elements handles UI development, connect to OData Service. SAP Fiori elements provide a framework for the most common application patterns based on SAPUI5. As a developer, all you need to do is write require CDS annotations.

SAP Fiori elements ensure design consistency and auto compliance (no extra development effort) with the latest design guidelines, while reducing the amount of frontend code needed to build SAP Fiori apps. SAP Fiori elements have proven savings in front-end development of up to 80% more than before.

The application team selects the relevant floorplan then framework generates the application screens.  SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns & reduction in development effort.

As I said Fiori Apps can be implemented either using SAPUI5 code or Fiori Elements.

Fiori Elements + CAP(Cloud Application Programming )  is advanced programming model ( Free style app development )

You can read my other blog to know advantages of CAP

SAP Fiori elements relies on SAPUI5. They are the same development technology; one focuses on flexibility and the other on efficiency.SAP expect most customers to use a mix of the two SAPUI5-based approaches, depending the specific needs of the app and business needs. 

Below table illustrates the implementing Fiori apps using SAPUI5 code  vs FE


SAPUI5 Programming (Code) SAP Fiori Elements (FE)

Flexible programming model

Application developers has to write lot of UI5 Code so project development & maintenance cost will be higher.

SAPUI5 code will be auto generated based on CDS View annotations & metdata using FE Framework

No need to write SAPUI5 Code , No JavaScript coding.
 SAPUI5 application code. Metadata-driven

Write custom code (UI5,HTML,JQuery.. etc) to build Controls,

Models , jQuery/Ajax code to Invoke REST API’s, OData Services


Declarative programming

Automate many tedious tasks

Minimizes boilerplate code

Generate UI, Service invocation automatically

Provides Out of box features

Require you to consider both the SAPUI5 technical guidelines and the SAP Fiori design guidelines to deliver the application.

Possible deviation from Fiori guidelines

Provide flexibility for customization but lose Fiori advantages.

SAP Fiori elements fulfill all of  UX , Fiori guidelines out of box .

with this FE cannot break SAP Fiori standards , UX Guidelines

If standard UX /Fiori team changes design & upgrade Fiori  new guidelines then FE team leverage framework.
Need to write additional code toolbar or change behavior  in a responsive table

By default, Responsiveness & Adaptiveness  (Run Multiple devices)

As FE strictly follow Fiori3 Guidelines

Rework to migrate to new version

Default Forward compatibility ( Fiori new version guidelines)

No additional effort required
Code Effort will be more & Development Cost also Reduce coding time & development effort drastically
When code is huge maintenance cost also will be more Very minimal maintenance cost
Possible code refactor & revamp cod for better performance optimizations Best possible performance from the very beginning.
Custom code + more development effort

Support UI Adaptation, Floor Plans, List Report & Object Page



Customization Possible



Customization (Work in progress)

Example: Dynamic list of option depending of another dynamic field


  1. We can navigate to Fiori3 elements APP  to SAPUI5 custom app

  2. Implement Custom Pages

  3. In Object Page : Custom sections are supported

* Double check the detailed documentation
Open to implement any fancy feature request Complex logic not always possible with Fiori elements as of now
Opensource/Third party library integration possible Not supported as of now

Support’s ODataV2 & OData V4


*Use ODataV4 Model has improved performance over ODataV2 Model

But please visit ODataV4 Model documentation and ensure that all required features are available

Support’s ODataV2 & OData V4


Use ODataV4 Model has improved performance over ODataV2 Model


Note:  Any(!) SAPUI5 usage has out-of-the-box capabilities of SAPUI5 like accessibility, responsiveness, adaptiveness, Fiori Design and much more. Now the choice is based on your business/end user requirements. Please be aware that before choosing SAP Fiori Elements or Free style SAPUI5  or UI-web components or any technology check that all required features are in place before developing application as per end user requirement. Double check the detailed documentation of the features as certain part of feature may be missing or any deviation.


More details

SAP Fiori Elements  

The SAP Fiori elements framework supports the dynamic page layout for all available floorplans. In addition, the flexible column layout is supported for all available floorplans except the overview page, which is not allowed within the flexible column layout.

One of the big benefits of SAP Fiori elements is the reduction in development effort. This is especially important for features like draft handling or the flexible column layout.

SAP Fiori elements use the global edit flow, which includes draft handling, or the local edit flow without draft handling. SAP Fiori elements also offer message handling.

If you need these features in your app, you should go with SAP Fiori elements.

SAP Fiori Elements  Supported Floorplans and Layouts The following floorplans are available as SAP Fiori elements:

For an overview of all available floorplans and layouts, see Overview – Layouts, Floorplans, and Frameworks.

For more information on when to use SAP Fiori elements, see the usage guide.

If you want to learn more about SAP Fiori elements please go to

Watch the first episode: Getting Started with SAP Fiori elements: Introduction

Read : Introduction to SAP Fiori Elements


SAP Fiori Design Guideline :

Slack Channel : SAP Fiori Elements

SAP Fiori tools :

SAP Fiori  Elements Community :

SAPUI5 technical guidelines for SAP Fiori elements, Developing Apps with SAP Fiori Elements :


Few Videos

  1. Introducing Fiori elements

  2. Introducing Overview pages

  3. Introducing List Report and Object pages

  4. Introducing Analytical List Report pages

  5. Understanding Odata and annotations

  6. Turning OData into Applications

  7. Creating Overview pages

  8. Creating List Report and Object pages

  9. Creating Analytical List Report pages

  10. Introducing Worklist pages

  11. Creating Worklist pages

SAP Business Application Studio

The SAP Fiori tools extensions can be used locally in Microsoft Visual Studio Code (VSCode) or SAP Business Application Studio (AppStudio).

"SAP Business Application Studio (AppStudio) is a powerful and new development environment i.e next generation of SAP Web IDE available as a cloud service on SAP’s Multi-Cloud environment (Cloud Foundry) and provides desktop-like experience similar to leading IDEs VSCode,.. etc with command line, integrated debugging and optimized code editors. At the heart of AppStudio are the Dev Spaces, which are like isolated virtual machines in the cloud containing tailored tools and pre-installed runtimes per business scenario, such as: SAP Fiori, SAP S/4 HANA extensions ,Java Code Editor ,build and deploy the application as multitarget applications (MTA).and more.In SAP Business Application Studio, the developer is provided with one or more Development Spaces. As a developer, you can chose which tools will be installed on your dev space by selecting the suitable extension pack...

Refer this blog post for more details


Setup  :

References :

Basic Steps: Please follow wizard & setup your development environment & Fiori App creation


Click on Create Dev Space ,then Choose Dev Space plugin/extension support for your project .

Please note that Fiori Elements Template in SBAS is not available yet to customers .It is coming soon


Select View Menu --> Find Command --> Type SAP

Disclaimer :This is the current state of planning and may be changed by SAP and customers can get new features .As the product evolves*, additional SAP scenarios and technologies ,extensions  will be added in AppStudio


Though this blog post main motivation is SAP Fiori Elements FE

I also would like to share other options available ,if you are not fan of metadata-driven development (i.e SAP Fiori Elements) and comfortable with HTML tags and frame works like Angular,React,Vue then read more about UI5 ​​Web Components which helps you in create enterprise-grade Web applications more easily

UI5 ​​Web Components 

In short  : "Open Source , reusable UI controls just like regular HTML tags  ,which follow SAP Fiori Design Guidelines and incorporate the Fiori 3 design  work with any web framework"


Motivation behind implementing UI Web Components

  • UI5 controls are proprietary and as of today are tightly coupled to the UI5 framework. Other frameworks are not able to use them without pulling the UI5 framework.

  • At the beginning of 2019, SAP released the UI5 ​​Web Components.They are part of the “UI5 Evolution” project ,Open source is a key part of SAP’s technology strategy and make it possible to work with any web framework.

  • News :


  • The UI5 Web Components library enables developers to create enterprise-grade Web applications more easily

  • UI5 Web Components are built by SAP’s UI5 org

  • The new UI5 Web Components from SAP allow developers to take advantage of the features offered by OpenUI5

  • Fully functional UI controls, usable just like regular HTML tags

  • So they work with any web framework that uses HTML tags.    For instance UI5 Web Components can be consumed and used by these three frameworks:

  1.  Angular

  2.  React

  3.  Vue

It can be used in any (also future) framework because what they all do in the end is: working with HTML

  • The components are not however built on top of UI5, but are standalone elements i.e UI5 Web Components are built independent of the UI5 framework.

  • UI5 Web Components and UI5 controls are two different concepts.

  • However you can also use UI5 Web Components in UI5 app (standard UI5 controls)

working example UI controls with UI Web Components showcase


  • They implemented in accordance with the SAP Fiori Design Guidelines and incorporate the SAP Fiori design i.e Out of box provides SAP Fiori design user interfaces ,reusable UI controls which consumed in any technology of your choice (Angular,React,Vue)


To learn more about UI5 Web Components


Home Page

Playground / Documentation :

You can try samples in any of your favorite editor . For instance SAP WebIDE , code sandbox 

GitHub Projects          

The sample applications to show-case the usage with React, Angular and Vue are online on -> Try out the demo apps


A nice blogs about UI5 with UI5 Web Components

  • Contributing to UI5 Web Components  : You are welcome to contribute code to the UI5 Web Components in order to fix bugs or to implement new features.


Report issue :

To learn more about SAP’s open source projects, visit


If would like compare Side by Side: SAPUI5 vs. React & Angular2

Source  :


Thank you SAP . CAP + Fiori Elements has boost me as a full-stack engineer .With the help of Fiori Elements + CAP , I am able to build modern web apps  a fully out of box CRUD + Query enabled OData API that serves a Fiori Elements UI in a really short time! i.e save time and development costs and I can also profit from enterprise ready features such as authentication and internationalization...

Developing Apps with SAP Fiori Elements

Stay curious :

Fiori elements floor plans with OData V4 and CAPM - Coming soon


If there’s anything else (please let me know) I’ll add it to this blog post as and when it appears or occurs to me.


Stay tuned @ SAP :

Visit the SAP News Center. Follow SAP on Twitter at @sapnews.


Happy Coding!