Evaluating SAP Fiori

Now that we understand why UX is so important, let's turn to examine what exactly UX is. There are some variations of the definition, which is understandable and not necessarily problematic. One good starting point for a definition is the International Standards Organization (ISO). ISO 9241 defines user experience as a "user’s perceptions and responses that result from the use and/or anticipated use of a system, product, or service". The perceptions referenced in the ISO definition are influenced by the application being used along with the use in question and the context in which the application is being used.

This definition is a good starting point for SAP’s Consumer-Grade UX – one of the pillars of SAP S/4HANA Cloud’s product strategy. For SAP, consumer-grade UX means enterprise apps that have the "consumer" look and feel that end users want. Consumer-grade UX is personified most clearly in SAP Fiori. SAP Fiori is a design system encompassing all aspects needed for effective UX development. Those aspects include visual elements making up an application, navigation concepts, application provisioning options, and more.

As well as product strategy, SAP Fiori is also an important part of the clean core approach. Recall that in the lesson, Introducing the Clean Core Approach, we mentioned that one of the parts of the clean core approach is the usage of well defined, upgrade-stable interfaces. SAP S/4HANA Cloud data is supplied to an SAP Fiori app through interfaces, specifically remote APIs – the exploration of which we will see in an upcoming lesson.

Both SAP Fiori and SAP Fiori elements apps are built using SAPUI5. SAPUI5 in turn is based on standardized Web-based technologies. SAPUI5 uses HTML5 along with CSS3 and JavaScript. It also leverages two well-known and popular libraries: LESS and jQuery. SAPUI5 has almost 200 standard controls that a developer can use in building UIs. These controls look and behave the same regardless of the application they are used in. So, whether it is the Cash Flow Analyzer app used by those in the finance department, or the Count Physical Inventory app used by a warehouse clerk, the types of elements are the same.

SAP Business Application Studio is a service available on SAP Business Technology Platform (BTP). SAP Business Application Studio is a modern, integrated development environment that can be used to build SAP Fiori apps. Using a set of integrated tools and wizards, the project structure, along with files containing the code, can be generated automatically in just a few clicks of a button. This results in an extraordinary reduction in development time compared to creating all necessary project components from scratch.

SAP Fiori elements can reduce development time even further. When a project team is designing an SAP Fiori app, one of the things they must decide is whether to develop the app freestyle or with SAP Fiori elements . While the SAP Business Application Studio in both cases generates all the required project components, SAP Fiori elements allows you to scale SAP Fiori development by delivering a template- and metadata-based approach to app creation. This reduces the amount of front-end development required (relative to the freestyle approach) to create your application so that you can focus on the required business logic and back-end services.

SAP Fiori elements apps are automatically enterprise-grade. The framework ensures high quality, stable, optimized UI code. It also provides many features out of the box that are expected in the enterprise space, but are typically fairly expensive to implement, such as accessibility, variant management, or edit mode.

SAP Fiori elements categorizes applications by purpose (that is, Analytics, Worklist) into one of several floorplans. The floorplan is chosen by the developer in the SAP Business Application Studio when developing the application. However, unlike a UI5 freestyle generation, the HTML5, CSS, and JavaScript files are not generated. Instead, a series of files containing annotations, which are XML-based, are created. These annotations are evaluated at runtime by the SAPUI5 runtime when the end user launches the application, and the UI is rendered dynamically.

Some of the floorplans available are:

• Analytical List
• Page
• Initial Page
• List Report
• Object Page
• Overview Page
• Wizard
• Worklist

If the project team needs to extend an SAP Fiori elements app for their use case, they always have the option to add custom code to their app. In the Flexible Programming Model, a developer would do that in Freestyle UI5 leveraging the Javascript framework and the UI5 UI Library. 

In addition to the Flexible Programming Model, the developer can utilize an additional approach to further enhance the application with the required functionality. An SAP Fiori element application can be "bound" to an OData service that is implemented in the ABAP platform (specifically, a Core Data Services (CDS) view). Annotations can be placed in the CDS view, which will be evaluated by the UI5 runtime. Along with the capability of placing annotations in the SAP Business Application Studio project, these two options give the developer flexibility in the design of an application. Annotations that are more global in scope can be placed at the ABAP layer (thus avoiding the developer having to repeatedly copy them in multiple apps). More specific annotations (that may vary from app to app, based on end-user requirements) can be placed in each individual application. The potential advantages of this coupling between the ABAP layer and the UX layer becomes more apparent in a later unit when we explore the different types of extensions possible under the SAP S/4HANA Cloud extensibility model.

SAP Business Application Studio has a plethora of test tools to aid developers. XML, JavaScript, and JSON code all benefit from automatic code insertion and completion. All three are syntax checked with integrated tools. Developers are able to launch the SAP Fiori applications they are working on directly from the integrated development environment.

SAP Fiori is based off of the popular "layered" development philosophy. A data layer provides persistence. A service layer provides an implementation of create, read, update, and delete operations (CRUD). The visual layer is implemented based on the popular Model View Controller (MVC) pattern, which most developers are familiar with, and for those who are not, it is easy to learn. Each element of the MVC pattern has a defined set of development objects with specific features that make it up. As a result of this standardization, communication between project team members is easier. Development of apps is more efficient and maintenance of apps is more straightforward.

SAP Fiori applications are assigned to end users via the role concept maintained via transaction PFCG. Transaction code PFCG is well known with SAP Basis administrators and authorization experts, so the learning curve for SAP Fiori is minimal. SAP Fiori apps are assigned to two types of artifacts: Catalogs and Groups. Either or both can be assigned to a role, which in turn is assigned to users through the transaction code PFCG. The ease of the assignment process allows companies to make sure that work requirements are harmonized with compliance and organizational control requirements.

One of the biggest demands from end users today is their preference to use the device of their choice to do their work. Not only do end users use phones, tablets, and desktops, but they expect to be able to begin a process on one device and finish it on another different device. SAP Fiori has adaptability built in its core. An application renders itself based on the type of device that it is being used on. Draft capabilities inherent at the ABAP layer allow end users to temporarily stop application execution and complete it at a later point in their timeline.

In the SAP ERP world, SAP GUI applications could sometimes be composed of a large number of screens, with a correspondingly large number of fields, menus, and buttons. In the SAP Fiori world, those applications are deconstructed into small modular applications, based on the principle of one – a single application for a specific purpose.

No matter which SAP Fiori app an end user is using, and no matter for which purpose they are using it, they experience consistent interaction and visual experience across the entire enterprise.

As mentioned earlier, the end user is where the ultimate value of enterprise software is realized. Because SAP Fiori allows them to simply do their work, their work experience is enriched.

Further learning regarding SAP Fiori can be done with the following learning journeys:

• Learning The Basics Of SAP Fiori
• Developing an SAP Fiori Elements App Based on a CAP OData V4 Service
• Developing SAPUI5 Applications