SAP Fiori vs. SAPUI5: What Is the Difference? (+ Examples)

This is about SAP Fiori vs. SAPUI5.

SAP Fiori are design guidelines and SAPUI5 is a framework for building web applications.

Learn the difference between the two.

Let’s get started!

What Is the Difference Between SAP Fiori and SAPUI5?

Consultants who aren’t too deep into technology get it wrong a lot:

SAP Fiori is NOT the same as SAPUI5!

To be fair, SAP isn’t really known for being precise and organized with its naming conventions. For example, ECC (the one before SAP S/4HANA and after SAP R/3) is sometimes referred to as ERP Central Component and sometimes as Enterprise Core Component.

In addition, SAP has contributed to the confusion regarding SAP Fiori and SAPUI5 by naming its out-of-the-box applications as SAP Fiori apps and by naming the entry point to SAPUI5 applications as the SAP Fiori launchpad.

But SAP Fiori is only the tip of the iceberg of SAP’s new UI (User Interface), because the UI is made of SAPUI5:

What Is SAPUI5?

SAPUI5 stands for SAP User Interface for HTML5—yes, SAP writes it SAPUI5 and not SAP UI5, despite the fact’re two acronyms and not one.

As with all the other SAP acronyms, it has never been:

• SAPR/1
• SAPECC
• SAPS/4HANA
• SAPCRM
• SAPC/4HANA

But always:

• SAP R/1
• SAP ECC
• SAP S/4HANA
• SAP CRM
• SAP C/4HANA

So why?

Can’t help it:

Digression: SAPUI5 or SAP UI5

SAP UI5 seems to be right. Not SAPUI5. The first acronym is the company’s name:

SAP (Systems, Applications, and Products in Data Processing).

The second acronym is the technology:

UI5 (User Interface for HTML5).

So, it’s SAP UI5, right? (leave a comment)

Additionally, SAP UI5 instead of SAPUI5 is not only an opinion but a matter of grammar:

If you combine multiple acronyms, they are supposed to be separated by a space (citing Wikipedia here) and not combined into one new acronym without a space between them.

By the way, the same goes for SAP S/4 HANA:

SAP calls it SAP S/4HANA.

SAP S/4HANA is the newest version of SAP’s ERP flagship product. SAP S/4HANA stands for SAP Business Suite 4 HANA (4th generation of SAP business suites and HANA is SAP’s database technology).

So S/4 and HANA are S/4 + HANA = S/4 HANA and not S/4HANA.

Same for SAP C/4HANA, which stands for Customer 4 HANA (4th generation of SAP CRM business suites and again, HANA is SAP’s database technology).

But maybe a study found it’s cooler to put acronyms together, rather than separate by a space like everybody else. Who knows, huh?

However, if it’s SAP’s choice, let’s go with SAPUI5, SAP S/4HANA, and SAP C/4HANA (uf).

Back to the topic—what is SAPUI5?

SAPUI5 is a Framework to Build Web Applications

SAPUI5 is a framework for building responsive web applications. Responsive means that the web applications adapt their UI to desktop, tablet, and mobile devices. One application to rule them all.

For example, if you visit inui.io (yay) on your PC, you’’ll see a different UI than when you visit inui.io (let’s make it bold one more time) on your mobile phone, but it’s the same web application for both desktop and mobile phone. Wow, so responsive.

The web application detects which device is being used and then adapts its UI accordingly. Hence, the we’s responsive.

An SAPUI5 web application is the client-side or the front-end. The UI and everything that goes with it, like:

• Display of controls: such as buttons, tables, dialogs, and texts
• Logic behind the scenes: for example, the routing between different sites of an application or what happens when you click a certain button
• Requests to the back-end: for instance, a request for some data after a user views a page with a table of products.

On the other hand, the back-end is, for example, an OData service, the application server with an ABAP stack and CDS views, along with a HANA database.

SAPUI5 is made up of:

• HTML
• CSS
• JavaScript.

HTML is the structure of a website, CSS is how it looks, and JavaScript is its logic.

MVC (Model-View-Controller) architecture runs SAPUI5:

MVC structure lets you separate the presentation of information (model) from the interaction with the user (view) and somehow connect it all together (controller). That gives an application structure and helps with development efficiency, including maintaining it.

SAPUI5 separates the front-end development from back-end development. For example, if you have an existing functional OData service, you can develop an SAPUI5 application for that service without touching the back-end—just put the SAPUI5 application on top of the OData service.

The most popular frameworks for building web applications are:

• AngularJS (fun fact: SAP uses SAPUI5 instead of AngularJS for the SAP Commerce Cloud)
• Vue.js
• React

Now let’s check out SAP Fiori:

What Is SAP Fiori?

SAP Fiori is design guidelines.

SAP Fiori isn’t a technology at all. It just determines how a UI looks and feels. 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.

The goal of SAP Fiori is to build an intuitive, simple-to-use UI for all SAP applications. It is not only to provide the user a consistent experience across all SAP applications and hence not need to adjust, but also to save time by not clicking around in unnecessarily complex and unintuitive user interfaces.

SAP Fiori gives users a sense of not being stuck in 1990 when using an SAP application. The SAP GUI is great for admins and developers, but not so much for end-users—have a look:

Business applications should look good, too. That’s part of a positive user experience.

Therefore, one design to rule them all: SAP Fiori is kind of the fashion police in SAP. By the way, Fiori is Italian and means flower. That’s why you see pictures of flowers on SAP Fiori—so pretty.

SAP tries to make each SAP user interface look and feel like SAP Fiori. While SAPUI5 is the most commonly-used user interface technology for SAP S/4HANA and some SAP extensions, other SAP applications use other UI technologies such as:

• SAP Commerce Cloud: AngularJS
• SAP Sales Cloud: ABSL (Advanced Business Script Language)
• SAP S/4HANA for Customer Managment: SAP CRM Web Client UI

SAP makes those UIs kinda look like SAPUI5 applications, but they’re not.

SAP Fiori is based on five key principles:

• Role-based: The user only sees what they need to know.
• Adaptive: Achieves seamless user experience on all devices (mobile, tablet, and desktop).
• Coherent: Same look and feel across different apps.
• Simple: Focuses on delivering a simple, intuitive user experience—1-1-3 (one user, one use case, and three screens).
• Delightful: It’s beautiful and makes the user feel good.

The Difference between SAPUI5 and SAP Fiori

It’s pretty simple:

SAPUI5 is the technology to build SAP web applications.

SAP Fiori is how SAP applications are supposed to look.

SAPUI5 is technology, and SAP Fiori is design guidelines.

You can build an SAPUI5 application without SAP Fiori, but not an SAP Fiori application (besides native iOS or Android apps, but that’s another story). At least not a full-fledged SAP Fiori application.

For instance, the outdated SAP CRM Web Client got an SAP Fiori upgrade, so it got a new theme that’s kind of like SAP Fiori. The C/4HANA landscape tries to incorporate the SAP Fiori guidelines as well—b’s no SAPUI5.

So why not just call them SAP Apps instead of SAP Fiori apps?

And for the SAP Fiori Launchpad, let’s just call it SAP Launchpad. Where’s the point of the Fiori other than causing confusion over the separation of SAPUI5 and SAP Fiori?

SAP apps are only created by combining SAP Fiori and SAPUI5, with SAPUI5 doing the heavy lifting. SAPUI5 isn’t getting its fair share of appreciation at the moment.

SAPUI5 and SAP Fiori are like a zipper—you can see both when separated, but they do not make full sens’re merged together.

If SAP didn’t make SAP Fiori, there would be better frameworks to build SAP web apps than SAPUI5, like AngularJS (which SAP uses for its SAP Commerce Cloud).

However, that’s changing more and more based on SAPUI5 smart controls that can be controlled through CDS views and give SAPUI5 its SAP edge.

On the other hand, there’s SAP Fiori Elements: SAP Fiori Elements are out-of-the-box SAPUI5 applications that include SAPUI5 smart controls—again (uf), why SAP Fiori Elements and not SAPUI5 Elements? Leave a comment about what you think.

By the way, here are the most important t-codes for SAP Fiori, SAPUI5, and OData services.