SAP UI5 vs. SAP Fiori – What Is the Difference?


Especially functional consultants who are not that deep into the technology part of SAP often get it wrong. SAP UI5 is not equal to SAP Fiori.

To be fair, SAP is not very well known for being precise and organized in its naming conventions. For example, its ERP version ECC (the one before S/4): sometimes, SAP references it as ERP Central Component and sometimes as Enterprise Core Component.

SAP has done its part in the confusion regarding SAP UI5 and SAP Fiori by naming its out-of-the-box SAP UI5 applications SAP Fiori apps and by naming the entry point for end-users for SAP UI5 applications the SAP Fiori launchpad.

But SAP Fiori is just the tip of the iceberg of SAP’s new generation of responsive applications, because those applications are actually made of SAP UI5.


SAP UI5 stands for SAP User Interface 5. Actually, SAP writes it SAPUI5 and not SAP UI5, but SAP and UI5 are two acronyms and not one. As with all other SAP acronyms prefixed with SAP, it has never been SAPR/1, SAPECC, or SAPCRM but always SAP R/1, SAP ECC, and SAP CRM.

Digression: SAP UI5 or SAPUI5

SAP UI5 appears to be right – not SAPUI5. The first acronym is the company itself: SAP (Systems, Applications, and Products in Data Processing). The second acronym is the technology User Interface 5: UI5. Hence, it should be SAP UI5.

Plus, that it should be SAP UI5 instead of SAPUI5 is not only an opinion but a matter of grammar. If multiple acronyms get combined, then they are supposed to be separated by a space and not merged into one new acronym without a space between the combined acronyms.

By the way, the same should go for SAP S/4 HANA: SAP calls it SAP S/4HANA. S/4 is the newest version of SAP’s ERP called S/4, and HANA is SAP’s database technology.

S/4 and HANA come down to S/4 + HANA = S/4 HANA and not S/4HANA. Same for C/4HANA. But maybe some study found that it gives +1 coolness if acronyms are melted together, instead of being separated by a space as everyone else does it.

SAP UI5 is a Framework for Web Applications

SAP UI5 is a framework to build responsive web applications. Responsive means that the web applications adapt their user interface to desktop, tablets, and mobile phone devices.

SAP UI5 XML code example
SAP UI5 is a framework to build web applications.

For example, if you visit on your PC, you will see a different user interface than when you visit on your mobile phone, but it is one and the same web application for both desktop and mobile phone views.

The web application detects which device is used and then adapts its user interface accordingly. Hence, the web application is responsive.

In the context of SAP UI5, web applications means the client-side or the front-end. Therefore, the user interface and all that belongs to the user interface, including sending requests to the back-end, such as a request for some data as a set of products, or the logic behind the scenes for the user interface, such as the routing between different sites of an application.

In contrast, the back-end is the OData service on its own, the application server with the ABAP stack and CDS views, and the database.

SAP UI5 is composed of HTML, CSS, and JavaScript. In a nutshell, HTML is the structure of a website, CSS is how the website looks, and JavaScript is the logic behind the scenes of a website.

SAP UI5 uses the MVC (Model-View-Controller) architecture. MVC architecture means separating the representation of information (model) from the user interaction (view) and somehow gluing both together (controller). That gives an application an internal structure and supports development.

SAP UI5 separates the front-end development from back-end development. For example, if you have an existing functional OData service, then you do not need to touch the back-end to develop a SAP UI5 application for that service.

The most popular frameworks for responsive front-ends for web applications are:

SAP Fiori

SAP Fiori means design guidelines. SAP Fiori is not a technology by all means. It determines what a user interface is supposed to look and feel like. It is a collection of rules for how the user experience of an SAP application is supposed to be – how an SAP application is supposed to appear.

SAP Fiori design guideline example
SAP Fiori is design guidelines for how an SAP application is supposed to look like.

The overall aim of SAP Fiori is a consistent user interface for all SAP applications – one that is simple to operate and intuitive. It is not only to provide the user the same experience across all SAP applications and therefore not need to adapt but also to save time by not clicking around in unnecessarily complex and unintuitive user interfaces.

Plus, SAP Fiori likes to give business application users the feeling of not being stuck in the year 1990 when operating an application.

SAP’s Netweaver GUI might be okay for administrators and developers, even today, but certainly not for end-users. Business applications should be nice to look at, as well. That is part of a positive user experience, too.

Therefore, one design to rule them all. SAP Fiori is kind of the fashion police in SAP. By the way, the Fiori in SAP Fiori is Italian and means flower…beautiful.

Difference between SAP UI5 and SAP Fiori

SAP UI5 is the technology to build web applications. SAP Fiori says how the applications are supposed to look. SAP UI5 is technology, and SAP Fiori is design guidelines.

You can build an SAP UI5 application without SAP Fiori, but you cannot build an SAP Fiori application without SAP UI5 – at least not a full-fledged SAP Fiori application.

For example, the technologically outdated SAP CRM Web UI got an SAP Fiori upgrade in so far as it got a new theme that kind of looks like an SAP Fiori user interface.

Therefore, instead of SAP Fiori apps, why not just SAP apps? And for the SAP Fiori launchpad, just SAP launchpad. Where is the need for the Fiori, except to cause confusion in terms of the separation of SAP UI5 and SAP Fiori?

Only the merger of SAP Fiori and SAP UI5 creates SAP apps, whereby SAP UI5 does most of the work. Currently, it is kind of unfair for SAP UI5 to not get its fair share of appreciation.

SAP UI5 and SAP Fiori are like a zipper – you can see both when separated, but they do not make full sense until they are merged together.

If there would be no SAP Fiori, then there would be better frameworks to build the front-end for SAP web applications than SAP UI5, such as AngularJS (which SAP uses for its e-commerce).

However, that changes more and more based on SAP UI5 smart controls that can be controlled through CDS views and therefore give SAP UI5 its SAP edge.

And if there would be no SAP UI5, then there would be no SAP Fiori. q.e.d.


Get A COMPLETE SAP Modules Overview infographic (free)

Plus, receive for free SAP tips & insights and all future infographics that are only shared with the private newsletter subscribers. 

Complete SAP modules/components overview infographic.
Latest Poll
Essential Ressources

8 Comments. Leave new

Christopher Thomas
February 11, 2020 00:57

That’s a very clear explanation of the differences between SAP UI5 and Fiori and also the dependencies.

Very useful overview, thank you.


Thank you for this detail and clarifying this for all of us! Greatly appreciated!


Loving the explanations as they are concise and highlight the key points!!!
Keep it up!


Hi, there. Considering i am not a developer, i found this blog quite useful. could you also try to extend this one to explain different between UI5 and SAPUI5 (and when to use each)


    Great, that you found it useful, Chan. Do you mean the difference between SAPUI5 and OpenUI5? UI5 is the generic term for both SAPUI5 and OpenUI5. OpenUI5 is the open source version of SAPUI5. OpenUI5 is identical to SAPUI5 except that OpenUI5 doesn’t have some controls that SAPUI5 has. For example, smart controls.


Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.