SAP Fiori 2.0 – The Design Guidelines

SAP Fiori | What is sap fiori

Introduction to SAP Fiori 2.0

The SAP Fiori 2.0 provides the most current advancement of the user experience for SAP S/4 HANA by taking the simple, customized and responsive user experience to the next level. In addition, it concentrates mainly on the users and their way of working thereby allowing them to focus on the core tasks and at the same time monitoring activities in different zones. This is possible with the viewport, a personalized gateway to the day-to-day business process and the floating panel with the wide scope of smart features.

The latest design guidelines with enhanced controls of SAPUI5 version 1.40 makes the current SAP Fiori Launchpad more flexible .This includes features like improved navigation and discovery, integrated notifications for taking immediate action on urgent tasks, enhanced collaboration, dynamic side content and so on. Let us have an insight into each of these features in detail.

Features of Fiori 2.0 – Foundation

Belize-The latest visual design language:
SAP Fiori 2.0 offers the latest visual design language for implementing new icon styles, colors and theme designer to the users. It has been created to work across multiple devices, supported browsers and operating systems.

  • Icon styles – SAP icons have been made with well disposed, yet neat style that is steady as far as size, stroke and balance. Each icons have their own icon format, semantics for defining
    visual elements, geometric icon grid system, Line thickness and border radius.
  • Colors – Color conveys significance, association and provides guidance to the users thereby playing an important role in SAP Fiori. Thus we have primary colors, semantic colors with light and dark theme flavours, accent colors, gray scale and color balance for improving visual pulse of Fiori apps.
  • Theming – The SAP UI theme designer offers multiple themes such as Belize light flavour, Belize deep (dark flavour), high-contrast theme for the SAP Fiori apps and semantic theme parameters for various controls.

New SAP Fiori Launchpad overview – Viewport

On the Login page, SAP S/4 HANA remembers the user and just asks for the user’s password to login. Viewport is divided into three areas namely,

  • The Home page
  • Me Area
  • The Notifications areaWhat is SAP Fiori | Fiori SAP

A personalized home page allows the user to access the most important apps along with improved navigation, smaller sized tiles, and a link area which only displays the app name as a link utilizing less space. The integrated notification area helps the user to take immediate action on the urgent tasks that triggers as notifications. When you click on the notifications icon on the top-right corner, it changes the view focus to the notifications area. Then if again the user clicks on the partially shown home screen, it focuses back to the home screen.

You can switch to the ‘Me area’ by clicking on the upper left icon on the shell bar. It offers users access to various user-related information including personalization, user’s profile along with the picture and access to online state, settings and preferences, App finder search icon to search apps from the catalog of available apps, tools to personalize current content in the main area, switch between frequently used and recently used apps, help option and so on.

Navigation and Discovery

Now the users can manage their favourite apps with the help of latest functionalities. For the users to access the app, there is a couple of use cases. The one being navigation and the other being discovery.

Navigation – This case is used by the user when he is aware of the app that he wants to use but requires a quick way to navigate to it. Here, we can find user-defined favorites into Home page, system recommended quick menu to the related apps and navigation menu based on the PFCG role structure. The navigation menu offers a different set of enhanced navigation options like hierarchy navigation, cross-navigation to related apps and a full-structured hierarchy of all assigned apps.

1. Hierarchy Navigation Users can navigate to any screen and come back to the parent screen of the corresponding app using hierarchy navigation.

2. Cross – Navigation This type of navigation offers users to navigate to the related app that supports similar tasks or different aspects of a domain.

3. All apps Users can access the full navigation menu. Here, the user is provided with structured access to all the apps in the catalog.

SAP Fiori Demo | SAP Fiori

Discovery – This case is used by the user when he wanted to complete a task by navigating to other app. But he is unaware of which app to use and so he need to discover the right app from the search catalog. In the Discovery catalog, one can find the system recommended featured apps, apps based on the user PFCG roles and all the apps in the system SAP menu. We use the App finder to discover the apps and the apps can be sorted by the following ways:

1. Front-End server Catalog It consists of all the apps that an admin has included in the
frontend server catalog, i.e., the apps that appear in typical user’s catalog.

2. User Menu (SAP Logon) Apps based on the user assignment to specific system.

3. SAP Menu (SAP Logon) All the apps irrespective of the user’s access to specific system or

The Home page offers a great flexibility, with the enhanced dashboard and launchpad features.

  • Anchor bar It is visible to the users only when they have more than one group in the home
  • Launch tiles and link area Tiles provides access to the apps directly on the user clicks from the home page. Contents of the tiles may differ from app to app. Through easy textual links, users can have alternate app visualization.
  • Edit mode: Through the ‘Me Area’ the user can edit the home page for modifying tiles and groups.
  • Floating Toolbar User can use this option to exit edit mode from the home page itself.SAP Fiori | SAP Fiori 2.0

Shell Bar:
The shell bar and the application bar have been united together into one single bar called the Shell bar. This eliminates the excessive use of space occupied by both the bars in the Launchpad.

Some of the new features include Viewport toggle buttons, repositioned back button and page title in the shell bar and accessibility of Contact support from the ‘Me Area’.

Fiori SAP | SAP Fiori Apps

To implement the SAP Fiori 2.0 apps the following prerequisites must be fulfilled:

    • You use an SAP HANA database
    • You have installed the add-on UI for Basis Applications (UI FOR BASIS APPLICATIONS 100)

To install the add-on, you can choose among the following options:

    • When the back end and front end are on one system, you need to download and install the add-on UI FOR BASIS APPLICATIONS 100
    • When the back end and front end are on two different systems, the add-on UI FOR BASIS APPLICATIONS 100 together with the SAP Fiori front end server 2.0

The SAP Fiori front-end server 2.0 contains the following software components:

  • SAP Net Weaver Gateway Foundation 7.50
  • SAPUIFT 100
  • UI for Basis Applications 100
  • User Interface Technology 7.50

Individual Front-end components can also be set separately.