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.
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.
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.
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.
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.
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.
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.