SAP FIORI Introduction and Architecture

SAP FIORI is the new user experience (UX) and design language for SAP software and applications. It provides a prebuilt set of applications that are used in various business functions. FIORI defines some design principles for SAP UX development - Role-Based, Responsiveness, Simple, Seamless Experience, Delightful. 

Design Thinking is a critical pillar of FIORI - it is a way to create a User Interface (UI) such that the product team can double the execution speed, reduce the product defects and, in turn, increase the return of investment. A classic business case example for design thinking is Apple Air Pods; this product solved the major pain point of users like day-to-day operations, ecosystem coupling, and ease of use. 

History

SAP FIORI started in 2013 with the very first FIORI app for casual SAP users and self-service use cases, typically for simple applications helping users to post their leave requests or managers doing approvals. Then in 2016, FIORI 2.0 was introduced with more powerful transactional apps for desktop users.

Since then, SAP extended and enhanced FIORI and moved to iOS and Android as well. Now, SAP FIORI 3.0 is SAP’s new target design, evolving the SAP FIORI design language for all SAP products to support the intelligent SAP business suite fully. FIORI 3.0 also includes machine learning capabilities to help users make their work easier. 

User Experience (UX)

User Experience is everything the customers feels and experiences as they interact with the application. One of the most important things that a developer must realize before designing any UX is that the design is for the consumer and not for yourself. For example, the consumer might be working in a noisy warehouse where speech recognition is not needed or might be using it with gloves on a shop floor where the touch functionality cannot be utilized or using a tablet with limited screen space. 

User Experience (UX) has three major components – Functions, Joy of Use, and Usability, these three components co-exist and work hand in hand for the best user experience. Poor User Experience (UX) leads to decreased adoption, high support cost, wasted development effort, and customer escalations. UX can be divided into two main categories: Enterprise UX and Consumer UX. 

A consumer software application is usually straightforward and does not involve complex cases; however, enterprise applications cover a broader scope and include complex business processes covering multiple functions across frameworks and legacy systems.

SAP has been considering these and has come up with an optimum User Experience (UX) for customers with SAP FIORI. For instance, SAP FIORI apps use the same iconography, terminology, typography, and action placements. This ensures a similar look-and-feel across all products and applications so that users get used to the same and recognize them immediately. Additional details can be seen in SAP's fact sheet Fiori design guidelines.

FIORI Architecture Overview

Below is the technical architecture that helps you understand the tools and technologies used to implement a FIORI application and how they interact with the SAP frontend (SAP FIORI Launchpad) and the SAP backend (SAP S/4HANA).

Let us try to unfold this step by step with SAP FIORI running in a Web Browser (Tablet or Smartphone) or as a native mobile application (iOS or Android) represented by blue boxes. The golden boxes represent the technologies; in this case, we have the SAP FIORI Launchpad, SAP FIORI Elements, SAPUI5, SAP Mobile Cloud Platform, WebDynpro, etc.

These tools access application data from the backend system, using the standard internet protocols HTTP and OData for reading and updating data. The Android and iOS mobile applications get integrated into the backend system via SAP Cloud Platform Mobile Services and access the backend system via OData services. 

The SAP FIORI architecture also integrates classic UI like SAP GUI and Web Dynpro. For S/4HANA, the classic UIs will run in the browser on tablets as well as on the desktop connected to the back end using HTTP. These classic UIs have the FIORI theme applied to them, so that all the applications in the Launchpad have the same look & feel, providing a harmonized appearance across FIORI applications and classic UIs. 

Two adaptation tools are available: UI theme designer and UI5 flexibility. With the UI theme designer, you can quickly and easily change the colors used by FIORI and replace the SAP logo with your company logo. In other words, the UI theme designer allows you to apply your corporate branding to the FIORI theme.

UI5 flexibility enables you to adapt FIORI applications, and admins users can centrally change applications by hiding and rearranging fields. End-users can use UI5 flexibility to personalize their applications (for example, by storing selection variants, or by defining which columns to show in tables). 

Also, SAP Screen Personas are used as a powerful tool for simplifying classic UIs and improving user experience. For example, SAP Screen Personas helps developers build one screen combining the typical SAP GUI selection screen and the resulting application screen.

FIORI Development Tools 

Let us extend the above architecture to understand development tools to be used for custom applications. If there are any requirements beyond the available SAP standard applications, the developer can build a custom FIORI application by using a collection of powerful tools, as explained in this section. 

The SAP Web IDE or SAP Business Application Studio can be used for developing Fiori applications running in a Web browser. The SAP Business Application Studio is the next generation of web-based IDE for building FIORI UIs, supporting the entire lifecycle, and running on the SAP Cloud Platform. SAP FIORI Tools are also available as a plug-in to SAP Business Application Studio, which provides additional benefits for developers leveraging SAP FIORI elements.

For developing native mobile FIORI apps, the SAP Cloud Platform Mobile Services provides a mobile development kit as a plug-in for the SAP Business Application Studio, which helps to code and create native apps for both iOS and Android. Alternatively, Android Developer Studio and XCode can be used for Android and iOS, respectively. 

So far, this has been just about frontend development. But how do we read and write data from/to the SAP backend? Tools like RAP (Restful ABAP Programming Model), CAP (Cloud Application Programming Model), and CDS (Core Data Services) come in handy for this. 

In a nutshell, CDS views allow you to model your application data stored in HANA, and RAP/CAP provides powerful programming models to create OData services for FIORI apps. The next big thing in user experience will be leveraging natural language interaction, i.e., chatbox and integrating these into the overall user experience. SAP Conversational AI is chatbot technology that comes with a continually evolving robot-building platform. Learn how to create your own SAP chatbot with Conversational AI.

Overall, with FIORI basics, architecture and development overview, now you can understand how a mobile app or analytical app can be built, what is the value of a good UX/ design, what are the development tools and how the components can be integrated with SAP backend. 

Also, you should clearly understand the new age FIORI Elements and prospects of learning RAP (Restful ABAP Programming Model) for SAP HANA, CAP (Cloud Application Programming Model) for SAP Cloud Platform and CDS (Core Data Services). These are new backend technologies and are used heavily in the SAP system framework. 

If you are someone who aspires to be a full-stack SAP developer, these cutting-edge technologies would be beneficial along with an in-depth understanding of SAP FIORI.

Please review these online training courses to learn SAP Fiori.