What is SAP UI5 and FIORI?

Introduction to SAP UI5 / Fiori

Business users are now used to the speed and simplicity of consumer apps over the internet and expect the same simplicity from SAP business software. In the current world, web or mobile business applications are prevalent, it is no longer possible for a business to grow without a proper web presence or mobile app. These applications increase user engagement and drive revenue generation. Over the past years, web and mobile applications have become a necessity for any business to help showcase their abilities. 

With this advancement, SAP has started moving into web and mobile application development. SAP initially started designing suitable pages to display business objects using Web Dynpro, or a Module Pool exposed to ITS screens. However, with the latest advancements, it has started using open source technologies like HTML, CSS, JavaScript, bundled as the SAP UI5 toolkit, to build high-end and more responsive SAP applications. 

The SAP Web IDE (Integrated Development Environment) is used for the creation and modification of SAPUI5 code. SAP Web IDE, as the name suggests, is a web-based tool and does not require any installation. SAP is also focusing on the best user experience (UX), called the SAP FIORI design so that the users can use the application quickly and interact with an SAP system. 

What is the difference between SAP UI5 and FIORI?

Any developer who starts to learn about SAPUI5 applications and SAP FIORI has this question on her mind. Is SAP UI5 and FIORI the same? Are these UI development tools or programming languages by SAP? Do we use both in our development? What exactly is the difference between UI5 and Fiori?

This gets very overwhelming for a developer who is just starting to work with these new terminologies. Thus, before getting into the difference of SAP UI5 and FIORI, let's try to unfold each term one-by-one.

SAP UI5

SAP User Interface for HTML 5 is a client-side framework (collection of libraries) based on MVC (model-view-controller) architecture that developers can use to build desktop and mobile applications that run in a browser. It uses open standards like HTML5, CSS, and JavaScript to develop enterprise-grade applications.

SAP FIORI

FIORI, an Italian term refers to "flowers." SAP Fiori is a new user experience (UX) for SAP software and applications and provides a prebuilt set of applications used in various business functions. FIORI defines five design principles for SAP UX development: Role-Based, Responsiveness, Simple, Seamless Experience, Delightful.

Now according to the definition, we understand that UI5 is a toolkit, and FIORI is a set of standards. Let's further understand the difference with a real-life example: consider ten different people are assigned the task of building a sofa using a standard tool set.

Each person would use their creative ideas and come up with ten different types/shapes of the sofa. Here, there are no standard sizes or shapes, even when they are using the same tools. This is what FIORI does - it defines specific rules to build a product. In simple words, SAP UI5 is a framework used to build web applications, while FIORI establishes the guidelines for the same.

Prerequisites for learning UI5 / Fiori

Basic understanding of SAP functionality and knowledge of HTML/CSS/JavaScript for interacting with the frontend are the prerequisites to understating SAP UI5/FIORI. Also, basic object-oriented programming knowledge would be beneficial to understand the use of JavaScript.

HTML/CSS give the UI5 application a visual appearance and a better user experience for the consumer, while JavaScript helps in defining logic for the components. For instance, a button on a screen is built using HTML, its appearance and style is defined using CSS, and the operation this button would perform is defined using JavaScript.

How to learn SAP UI5 / Fiori?

Our course Introduction to SAP OpenUI5 Apps starts by introducing you to the SAP Web IDE used to build UI5 applications and its setup. There are two types of Web IDE tools available: SAP Web IDE Personal Edition and SAP Web IDE Full-Stack. Additionally, for ease of understanding, the course is divided into four stages: Design, Develop, Integrate, Deploy.

Design – In this section, you learn the core concepts and best practices to design an app. It includes understanding MVC (Model View Controller) architecture, Types of View (JS, XML, JSON, HTML), Types for Models (JSON, XML, Resource, OData), JavaScript Controller, the syntax to create a UI5 Control, scaffolding template (way to define any JS file in UI5), and control hierarchy.

Most importantly, the course introduces you to the SAP SDK (software development kit) in which SAP has provided several controls, associations, and aggregation that can be used in a typical application. 

Develop – In this section, you start using the UI5 framework and implement the MVC architecture. As of now, most of the applications, including standard SAP, are build using OData/Resource/JSON, XML View, and a JavaScript controller. OData models help integrate data with the SAP database; the Resource model helps with internationalization, and the JSON model is used to create and store local data in the application. 

This section also introduces you to the UI5 hook methods in the controller (onInit, onExit, onBeforeRendering, onAfterRendering), binding (Expression Binding, Aggregation Binding, Element Binding), and Formatters. Additionally, you learn navigation techniques like Route Matched handler and how this can be configured in "Manifest.json" files.  

Integrate – Once you have developed the outline of your applications and added controls, it's time to integrate your app with the backend system and perform CRUD operations. CRUD stands for Create, Read, Update, Delete. This is the standard OData way to communicate with the UI5 application. It includes configuring the OData Model as the default and receiving data from SAP only when the SAP UI5 application requests it. 

To get started with OData and build your first OData service, you can take this course: Create, Test, Debug & Analyze Your First SAP OData Service. It introduces the theory and terminology required for understanding OData, then takes a practical step-by-step learning approach to create an OData project. 

Deploy – The final step is to deploy and deliver the end-to-end real-time app using the Fiori Launchpad Designer (transaction code /N/UI2/FLPD_CONF). Here, you learn about the Launchpad basic terms like Catalog, Groups, Roles. The Fiori Launchpad is a single-entry point for all FIORI applications (standard and custom) based on a user's security authorization. 

Who should learn SAP UI5/FIORI?

SAP UI5/FIORI is best for consultants with ABAP background (backend or server-side developer) and basic knowledge on HTML/CSS/JavaScript. Also, consultants working on web-based technologies (frontend or client-side developer) and wanting to move to SAP will find this a worthwhile topic. Consultants with ABAP background have an added advantage as they could use their SAP knowledge to design, develop, integrate, and deploy complete applications from the backend to frontend.