Very often associated with SAP Fiori, SAP UI5 is however an entity of SAP in its own right. This framework allows you to easily create applications thanks to a collection of libraries containing numerous interfaces, icons and other demonstration applications…
12/04/2023
Don't confuse SAP Fiori and SAP UI5 anymore
7 minutes read
Table of contents
A project ? A question?
Leave us your contact information and one of our experts will contact you shortly
If you have been using SAP for several years, you may have experienced the version of SAP ERP with spartan screens and an incredible number of menus that forced you to spend hours performing tasks that were simple at first glance.
Fortunately, SAP has listened to the various complaints and has been offering SAP Fiori for some years now, which runs under the SAP UI5 Framework. Moreover, we see many publications that do not hesitate to mention the SAP Fiori UI5 technology.
In this article, we have decided to highlight SAP UI5 which is unfairly known and confused with other SAP innovations
What is SAP UI5?
SAP UI5 is the acronym of SAP User Interface 5 even if today it has been replaced by SAP Open User Interface 5 which is the improved version of the first one. It is a programming framework based on Java that facilitates the development of HTLM5 web applications.
Simply put, SAPUI5 is a collection of libraries that developers can use to create desktop and mobile applications that run in a browser.
With SAP’s SAPUI5 JavaScript toolkit, developers can create SAP web applications using HTML5 web development standards.
SAP constantly builds not only the APIs (Application Program Interface) but also provides pre-built and ready-to-use user interface elements, icons, fonts, examples, etc., such as:
- Over 200 UI elements with different variants that are responsive by design are device and browser independent. They have compact and comfortable behavior
- Over 600 icons in the SAP font library can be used without having to worry about intellectual property issues. Combine them with different colors and developers won’t have to run behind UX designers to provide icons and images
- Icons that are part of the SAP font can be sized and colored according to project and client needs
- Demo applications to help understand how things work
- Tons of tutorials Developer guides help material supported by a very robust and proven SAP developer network community.
Out-of-the-box components save development time, reducing time-to-market and development and maintenance costs.
The Origins of SAP UI5
At the end of the 2010s, a group of experts was brought together with a specific objective: to develop a new User Interface technology to replace SAP at the time. Indeed, the German firm was facing many criticisms:
- A general lack of extensibility
- The impossibility of using new CSS or browser-related features
- An inseparable relationship with the backend
The impossibility to develop in a language other than ABAP or JAVA. This penalized the new companies bought by SAP which developed in different languages.
The first objective of the project named Project Phoenix was to create a flexible, extensible, modern, and above all backend independent user interface technology.
They finally proposed a framework very similar to the one proposed today that they called Open UI5. When a few years later, SAP added additional libraries, and it took the name we know today, SAP UI5.
What are the Principles to be Respected by SAP UI5 Applications?
Role-oriented applications: SAP UI5 applications are developed for end users. Thus, the latter can only have access to the corresponding data and their role. The application must do the same. To do this, the transactions will be divided into several small applications corresponding to specific tasks for a particular role.
Responsive applications: regardless of the platform, device, or system used, the user experience is important if not paramount for these applications. They must be intuitive, easy to use, and offer the best possible experience.
Simple applications: we talk about the 1-1-3 rule:
- One user
- One use
- 3 screens maximum.
If it is impossible to reduce it to 3 screens, it will have to be broken down into several applications.
Consistent applications: if all the applications are going to be different, they must have the same operating principles. Thus, a user who knows how to use one application should know how to use all the others
What is the Difference between SAP UI5 and SAP Fiori ?
These two terms are often used (wrongly) to designate the same thing, i.e. SAP’s new intuitive interface with its various tiles. However, there is a difference between these two terms.
What is SAP Fiori?
SAP Fiori is a user design or approach developed by SAP. It is like a guide that indicates how programs should run and function.
Thus, the objective of SAP Fiori is to offer easy-to-use and intuitive SAP applications so that training on them is short and daily work is more productive. Saving time and simplicity of use are the keywords of SAP Fiori.
SAP has implemented this user experience in over 1100 applications available in the application library. All applications that follow these design guidelines are FIORI applications.
The applications are lightweight, device and browser-independent, and work “out of the box” with SAP and/or HANA DB. Note that FIORI is an alternative to SAPGUI.
SAP Fiori VS SAP UI5
In concrete terms, SAP UI5 is the programming language for FIORI applications. Therefore, it is not possible to develop a Fiori application without using SAP UI5. It is therefore the technology that will allow the development of responsive and intuitive applications.
Therefore, it is possible to have SAP UI5 applications that are not Fiori applications.
The Architecture of SAP UI5
The SAP UI5 architecture is composed of three main layers:
- At the top, we find the presentation where the different UI5 components are composed of mobiles, tablets, and other computers
- Then we find the client application which is composed of the library which includes among others SAP.common for texts and buttons or SAP.m for mobile devices
- Finally, we have the server with SAP Netweaver, the backend…
It uses a Model-View-Controller (MVC) architecture, which separates the application logic into three main components: the model, the view, and the controller.
The model represents the data and the business logic of the application. It can be a simple JavaScript object or a more complex object that uses the OData protocol to communicate with a back-end system.
The view is responsible for displaying the data from the model to the user. In SAP UI5, the view is represented by an XML document that defines the layout and structure of the UI elements.
The controller is the glue that binds the model and the view together. It contains the application logic that updates the model and updates the view when the model changes.
The framework also provides a number of built-in UI controls, such as buttons, tables, and forms, which can be used to build the user interface.
These controls are called “controls” in SAPUI5 and these are reusable across the application.
One other important thing is that SAP UI5 is built on top of OpenUI5, an open-source version of SAP UI5. This means that the architecture and concepts used in SAP UI5 are also applicable to OpenUI5, so developers can use the same skills and knowledge to develop web applications using both frameworks.
Why are SAP UI5 Applications Perfect for all your Business Processes?
A user-friendly design
SAP UI5 offers built-in UI controls and libraries that can be used to create user interfaces that are both functional and visually appealing.
Cross-platform compatibility
SAP UI5 applications can run on a variety of platforms, including desktop computers and mobile devices, making it easy to reach a wide range of users.
Large community
SAP UI5 is a widely used framework and has a large community of developers who share knowledge and resources, making it easy to find help and solutions when needed.
Integration with SAP ecosystem
If you are using SAP as your ERP and you are looking for a way to connect your web application with your ERP, SAP UI5 is the perfect choice. The framework is tightly integrated with the SAP ecosystem, which allows developers to easily access data and functionality from SAP systems.
Reusability
The reusable controls in SAP UI5 allow developers to write the code once and use it multiple times, which helps to improve the productivity and maintainability of the application.
Accessibility
SAP UI5 provides accessibility support by following Web Content Accessibility Guidelines (WCAG) which helps to improve the application for users with disabilities.
Discovers more VASPP articles
Design Thinking in Service of User Experience: Best Practices to Adopt
Explore the fundamental principles of design thinking and learn how this user-centered approach can help your company innovate and creatively solve problems. Discover the key
SAP Fiori : Guide & Features
SAP Fiori, often associated with SAP UI5 and UX Design, is a technology allowing to modernize SAP screens, making them simpler and more ergonomic for
Which Project Methodology to Choose?
Choosing the right project methodology is often crucial to achieve the objectives. Waterfall or AGILE, it implies a preliminary reflection to obtain satisfactory results Waterfall
