Fiori in S/4HANA

  • Sanket Kulkarni


In early 2007, the first-generation iPhone was launched by Apple with much fanfare. Who would have thought that over the intervening years, the smartphone market would explode and we would be able to order groceries from the comfort of our homes? Whole marketplaces have moved to online and you can pretty much do business on the phone. As consumers moved toward slick UIs offered by a multitude of mobile apps at a much faster pace, enterprise applications such as monolith ERPs took much longer to adapt.

In early 2007, the first-generation iPhone was launched by Apple with much fanfare. Who would have thought that over the intervening years, the smartphone market would explode and we would be able to order groceries from the comfort of our homes? Whole marketplaces have moved to online and you can pretty much do business on the phone. As consumers moved toward slick UIs offered by a multitude of mobile apps at a much faster pace, enterprise applications such as monolith ERPs took much longer to adapt.

The UI revolution has affected significantly the way companies do business, manufacture and track goods, ship products, and reach out to customers. With mobility becoming the default option for many, customers and employees alike, the need to have a mobile-centric UI was obvious. Not just the back-end ERP has to be mobile-enabled; any other IT applications in the landscape are now expected to follow the same UI design principles.

It has led to business-centric mobile-enabled devices like smartphones, tablets, and even smartwatches, as well as applications (or apps). Such applications inherently work across multiple types of devices seamlessly and are expected to provide the same user experience whether someone is accessing the application on a smartphone or a tablet. Such applications are also designed for access from anywhere and on any mobile-enabled devices.

For example, perhaps your sales representative is having a meeting at a customer’s location and needs real-time information on the next available delivery dates. In this case, he can always pull up his tablet and access a Fiori application on sales order delivery. He can quickly pull up all the details in front of the customer and can close the sale on the go.

The mobility trend has also been recognized by SAP and it led to complete revamp of the traditional SAP GUI. Old SAP front-end applications were designed with one transaction for multiple roles. It led to exposing all data and functions associated with that transaction to all the users with requisite access. On top of that, there were multiple entry points for the user, so there was an inconsistency in the UI across applications.

If you take a simple transaction such as Sales Order Creation (VA01) in the traditional SAP GUI, you can see so many fields to populate and so many screens to be navigated. The overall look was very clumsy and it often took a long time to create one sales order that was complete in all aspects.

Starting with Business Suite on HANA, new SAP UX technologies (SAP Fiori being just one of them) were introduced. As SAP S/4HANA matures, offerings under Fiori have been expanded with more than 7,000 ready-to-use apps along with easy customizations.

Key Changes

The following are some of the key changes SAP introduced with Fiori.
  • Role-based applications : This means there are apps for each role, thus exposing only relevant data and functions for that specific role. For example, the role Internal Sales Representative - SAP_BR_INTERNAL_SALES_REP will give you access for tracking sales orders as well as other Fiori apps related to managing sales contracts and inquiries.

  • Single entry point for the user : This means a consistent UX following common design principles across all devices: smartphones, tablets, and even smartwatches. Taking the same example as before, Internal Sales Representative will have access to the My Sales Overview app, a dashboard for all sales-related activities such as handling sales quotations, analyzing sales order fulfillment performance, and so on. She can also dive deep into the details of specific problem areas, by clicking on individual cards as shown in Figure 9-1.

Figure 9-1

My Sales Overview Fiori app

Fiori App Categories

Fiori apps are divided into three categories.

Transactional Apps

Transactional apps give access to each user to run SAP transactions on desktops or laptops and mobile devices and tablets. These are the apps you use to create and update business documents or perform specific business tasks. These are role-based simplified views that mirror transactions in the old SAP ERP system. For example, the Purchaser transactional app covers transactions related to a purchase order, purchase requisition, and so on.

Analytical Apps

Analytical apps provide role-based insight into real-time operations of your business by aggregating key figures so that you can closely monitor your most important KPIs in real time and react immediately based on changes in market conditions or operations. SAP analytical apps provide predelivered KPIs and insight-to-action scenarios. You can also define your own KPIs based on the modeling framework.

For example, a strategic buyer can access analytical apps related to overdue purchase order items or off-contract spends. He can also monitor invoice price variance as well as overall purchasing spend.

Fact Sheets

Fact sheets display master data or business documents in display mode. Fact sheets are often called from other apps like analytical apps in Fiori launchpad. Also, you can search master data or business documents in the Fiori launchpad like Google Search. Fact sheets are called by selecting the search result. You can further drill down into its details. For example, a production planner can access production order, work center, and resource details from a single fact sheet. She can also search by a specific material and then further drill down to respective production orders and their associated documents like good movements.

Fiori Architecture

As seen in Figure 9-2, the Fiori architecture consists of the SAP Gateway communicating with the back-end S/4HANA system and SAP Web Dispatcher.

The SAP Web Dispatcher lies between the Internet and your SAP system. It is the entry point for HTTP(s) requests into your system, which consists of one or more SAP NetWeaver application servers. It also feeds data to front-end applications where it is Fiori apps modeled using SAP UI5 technology, SAP Screen Personas or any other UX technology. Users can further access these apps on any devices such as a desktop, tablet, or smartphone.

HANA DB enabled by CDS feeds into the SAP S/4HANA ABAP layer. CDS provides programming features such as data definitions, query language, and data manipulation logic often programmed using Structured Query Language (SQL) statements in SAP HANA.

The SAP S/4HANA ABAP layer consists of the business logic the and associated back-end data. It is also responsible for security aspects such as users, roles, and authorizations.

InA Search offers search engine functionality (like Google Search) whenever you deal with large amounts of data; for example, material descriptions, service incidents, and so on. Fact sheets use this functionality, which makes direct calls to the SAP S/4HANA ABAP layer for faster retrieval times.
Figure 9-2

Fiori architecture

There are two types of deployment options for SAP Fiori.
  • Embedded deployment option: In this option, you deploy Fiori architecture components like SAP Gateway server, SAP UI5, and a Fiori UI add-on in the same environment as in SAP S/4HANA.
    • This option means reduced costs due to a single landscape, although it becomes overly dependent (in terms of versions and scalability) on the back-end SAP S/4HANA server configuration.

  • Hub deployment (recommended option): In this option, you deploy Fiori architecture components like SAP Gateway server, SAP UI5, and a Fiori UI add-on in a different environment than SAP S/4HANA.
    • Often termed noninvasive installation, this option does not require any downtime on the back-end SAP S/4HANA system.

    • With clear separation on UI and business systems, it is a much simpler architecture, although it requires higher maintenance.

    • Note that there is no direct access to the back-end system in this option but only via the SAP Gateway hub.

Implementing SAP Fiori

You should start by defining the SAP UX strategy for your organization. The SAP UX strategy takes a broader view in terms of all available SAP UX technologies and how they fit into your organization’s UX vision. UX visioning exercises often try to address these questions from your organization’s perspective:
  • What are your employees’ UX expectations?

  • What are external users’ and customers’ UX expectations?

  • What are the UX opportunities available in specific business domains? For example, you want to enable your customers for order tracking via the dedicated customer portal.

  • What are the source systems that will pass data to those UX opportunities?

  • What are the key security considerations?

  • What are the key performance considerations?

  • Are there any device-based limitations (e.g., company-owned devices or any smartphones)?

Potential UX opportunities are further prioritized with business and IT stakeholders. Such a conversation is often enabled with rapid prototyping. You can also use the SAP Fiori discovery tool to assess application usage in your environments and generate recommendations for Fiori apps.

As your UX vision begins to develop, you will be able to shortlist critical UX opportunities. These opportunities fall into one of the three categories of scenarios.
  • Consumer-grade UX for new applications. An example would be a new customer portal to enable online ordering that would require UI design from scratch.

  • Renewal of existing applications by applying SAP UX for common business scenarios. Transactional apps often fit into this category.

  • Enabling users with critical business scenarios by providing operational insights faster. Analytical apps and to some extent fact sheets fit into this category.

There are several SAP UX technologies on offer, Fiori being the predominant one.
  • SAP WebDynpro/SAP NetWeaver Business Client: You might recall this from your old SAP ERP systems. It is still available, but not mobility-enabled.

  • SAP Fiori: Standard FIORI apps (transactional, analytical, and fact sheets) are offered by SAP with limited customization. It closely integrates with the SAP S/4HANA back-end system and offers portability across all devices.

  • SAP UI5: This is used to renew existing transactions and generate new business scenarios. It is developed on HTML5 and can be integrated into multiple back ends. Although portability is offered across all devices, you will need extensive design effort to map user requirements to screens before you write even a single line of code.

  • SAP Screen Personas: This is used for a limited set of users with very specific business requirements. Being highly configurable, it allows users the capability to configure their own personas for specific transactions.

  • SAP Mobility Platforms: This is used for complex mobility scenarios like developing customer portals from scratch. It also covers standard and custom transactions and requires specific design cycles to develop screens. It can integrate with multiple devices and offers extensive customization.

To make a decision on the appropriate SAP UX technology that serves your purpose, start by asking these questions.
  • Does your business requirement need access to mobile devices to function efficiently?

  • How granular is your requirement?
    • For the same transaction, if personas (i.e., user profiles) have different information needs, then you should create multiple apps so that each user gets a tailored experience. It is called the decomposition process because it breaks down complex megatransactions into simplified apps.

    • On the other hand, you could combine multiple transactions and present them in a single app to support the user to achieve an outcome only possible by combining two experiences otherwise found in separate transactions. This is called the composition process, the process of combining multiple similar and related transactions into one single integrated app.

  • Will it be used on low-connectivity areas, in an online as well as an offline mode? Only specific Fiori apps provide an offline mode, so it becomes a deciding factor.

  • Is it a business-to-business (B2B), business-to-consumer (B2C), or business-to-employee (B2E) scenario? Here are some typical examples:
    • B2B: Customer or supplier portals.

    • B2C: Order management, EMI/loan tracking, and complaint management.

    • B2E: Employee self-service, performance management, and learning management.

  • Which devices it is supposed to work on?
    • Options include bring-your-own-device (BYOD), choose-your-own-device (CYOD), and company-issued, personal enabled (COPE) devices.

    • Note that data confidentiality considerations become more complex in SAP Fiori applications extended to mobile devices or devices that are not owned by the organization.

  • How should security of data on devices and in transit be managed?

You should then ask whether there are existing Fiori apps for the same use case. If not, you can develop a custom app using the SAP UI5 framework. If it’s really going to be accessed only on the desktops, then you can even develop one using SAP WebDynpro.

Please note that not all SAP S/4HANA transaction codes or functionalities have corresponding Fiori apps, so it makes sense to assess up front to what extent your UI needs are satisfied via Fiori apps.

Here are a few other key considerations.
  • The infrastructure must be scaled to support Fiori (OData service call) to prevent performance issues. That warrants performance testing of Fiori apps during test cycles.

  • Compatibility issues with other web browsers should also be thoroughly tested (Chrome works better with Fiori).

If you are going to develop custom Fiori apps using the SAP UI5 framework, you should be aware of Fiori design principles.

Here are key Fiori design principles outlined by SAP.
  • It should be role-based.
    • Designs for what I do.

    • Understands tasks I need to do and helps me do them better.

    • Builds from insights within my business networks.

  • It should be responsive.
    • Works seamlessly across all screen sizes and devices that have an HTML5-compatible browser.

    • Adjusts their layout based on the available screen real estate.

    • Supports multiple interaction modes, such as keyboards, mouse, and touch-based inputs.

    • Works independently of platform or ecosystem (Windows, Android, or iOS).

  • It should be simple.
    • Helps the user complete tasks quickly and easily.

    • Emphasizes a 1:1:3 approach: one user, one use case, and three screens (desktop, tablet, and mobile).

  • It should be coherent.
    • Have the same design footprint and thus the same look and feel.

    • Speaks the same design language.

  • It should provide instant value.
    • Follows the same design pattern across apps.

    • Makes it easier for users to adopt the new UI quickly.

Fiori Configuration

Once you short-list the Fiori apps for enablement, you can follow these steps for Fiori configuration.
  1. 1.
    Verify and prepare the SAP back end.
    1. a.

      It involves validating prerequisites and deploying necessary SAP notes.

  2. 2.
    Infrastructure installation.
    1. a.

      Depending on your chosen deployment scenario—embedded or hub-based—various architectural components such as SAP NetWeaver Gateway, or SAP UI5 add-on are to be installed.

    2. b.

      After installation of the SAP Gateway server, necessary connections are made to the SAP S/4HANA back-end system.

  3. 3.
    Network and security configuration.
    1. a.

      Because SAP Fiori apps enable users to access SAP back-end data from a variety of devices located in different networks, the connectivity channels between the SAP Fiori apps and SAP Business Suite must be secured.

    2. b.

      This involves enabling external and mobile access and configuring user roles and authorizations.

  4. 4.
    Standard application and workflow installation and configuration.
    1. a.

      Involves enablement of standard Fiori apps

  5. 5.

    Launch page customizing and branding using the Theme Designer. For example, you can put your logo on the customer-facing apps.


Fiori Authorizations

The authorization concept of SAP Fiori is related to the authorizations needed to access the S/4HANA ABAP back-end server as well as OData services in the SAP Gateway server.

While launching a SAP Fiori app, the request is sent from SAP Fiori Launchpad to the SAP Gateway server via Web Dispatcher. Once the initial authentication is complete, a security session is established between the SAP Fiori Launchpad and the SAP Gateway server. This allows SAP Fiori apps to send OData service requests to the SAP S/4HANA ABAP back-end server. These requests are communicated securely by using trusted RFC (Remote Function Call). You will therefore need authorizations to start SAP Fiori apps as well as to use the business logic and data from the SAP S/4HANA back-end system.

Additional References

Copyright information

© Sanket Kulkarni 2019

Authors and Affiliations

  • Sanket Kulkarni
    • 1
  1. 1.PuneIndia

Personalised recommendations