Skip to Content
Product Information

SAP Fiori for SAP S/4HANA – Upgrading from Fiori 2.0 to Fiori 3 for SAP S/4HANA Cloud 1908 and SAP S/4HANA 1909 Users

Latest update 12th November 2019: For customers integrating SAP S/4HANA with SAP Cloud solutions please note the following solutions now apply or have the option of applying the SAP Fiori 3 launchpad shell design:

  • SAP Integrated Business Planning – as of release 1908
  • SAP SuccessFactors – as of release 1911
  • SAP Cloud for Customer – as of release 1911

Check the release notes/what’s new information for the relevant solution.

Latest Update 7th November 2019: Added clarity re Quartz theme availability for classic user interfaces & options for using SAP Fiori 3 design for lower SAP S/4HANA releases. In section “What else is new…” added mention of Situation Handling scenarios in SAP S/4HANA 1909 & Central Launchpad direction in SAP Cloud Platform Portal. Updated references to SAP S/4HANA Fiori Launchpad guide to the 1909 version.

So you are using the latest and greatest SAP S/4HANA Cloud 1908 or SAP S/4HANA 1909 and are wondering where some of your familiar Fiori launchpad features have gone? You will find out where they are and why they moved in this summary. 

Typically you will move from Fiori 2.0 design to Fiori 3 design when you have:

  • Transitioned to the latest SAP S/4HANA Cloud 1908 release, or
  • Upgraded from SAP S/4HANA release 1610, 1709, or 1809 to SAP S/4HANA 1909, or
  • Converted from a SAP Business Suite or Suite on HANA system using SAP Fiori launchpad to SAP S/4HANA.

That also means you have upgraded from Fiori 2.0 design to the first steps into Fiori 3 design, and some of your familiar Fiori launchpad features have moved! So this is a quick guide to explain what has changed and why.

If you have only have time for a quick where-is-it-now summary, look through the Cheat Sheet Version section. If you want to know more about why things have changed and get a few “worth knowing” tips to help you make the most of your Fiori 3 user experience, keep reading through to the end of the blog.

TIP: If your administrator has configured the out-of-the-box User Assistance content for your version then this includes help on the changes – just press the ? icon on your Fiori launchpad to access the help.

Cheat Sheet Version

Theme (Colours) – These are now mostly a neutral grey – called Quartz.  The mostly blue Belize theme still exists and you can still use it if you want. You can change the theme in your Settings.

Screenshot showing the Quartz theme in the Fiori launchpad with dark grey header with pale icons, and white tiles on a neutral grey body

Going to Home – use the Logo in the header bar to get back to the Home page at any time.

Fiori 3 launchpad highlighting Logo icon towards the left of the launchpad header

App Title button in the header bar has moved from the middle to the left hand side of the header, just to the right of the logo. You can use it to get to all your apps just as in 1709 and 1809.

Fiori 3 launchpad highlighting App Title button towards the left of the launchpad header

Settings and other Personalization options – Have moved from a Me Area viewport on the left to a User Actions menu towards the right of the top header.

Fiori 3 launchpad highlighting User Actions menu towards the right of the launchpad header

Notifications – Have moved from a viewport on the right to a dialog popup towards the right in the top shell bar

Fiori 3 launchpad highlighting Notifications icon and dialog towards the right of the launchpad header

User Assistance – Has moved to a vertical sidebar on the right.

Fiori 3 launchpad highlighting User assistance vertical sidebar and help icon towards the right of the launchpad header

SAP Fiori 2.0 to SAP Fiori 3 – understanding what’s changed and why

One of the central motivations of SAP Fiori 3 was the development of a design that could be adopted across all products at SAP leading to a more consistent and integrated experience across the entire portfolio – so as to provide a consistent user experience across the various SAP products (both on-premise and SAP Cloud solutions) that an end user needs to work with. Many of the design changes were motivated by this goal.

To ensure this, SAP Fiori 3 has been designed and developed jointly with all product design teams. Some common rules have been agreed upon and are planned to be followed across all products such as the consistent use of the new theme and shell bar, but also more detailed aspects like a consistent iconography, terminology or placement of common actions across all products – so that your end users have a better user experience overall, not just for SAP S/4HANA or SAP S/4HANA Cloud.

Default colours have changed from Belize (blue) to Quartz (grey)

Fiori 2.0:

With Fiori 2.0, the main theme was called Belize, which was mostly blue came in a light and dark mode. Belize light example:

Fiori 2.0 launchpad showing Belize light theme

Fiori 3:

With Fiori 3, the Quartz Theme has been added, which is mostly grey and more neutral.

Screenshot showing the Quartz theme in the Fiori launchpad with dark grey header with pale icons, and white tiles on a neutral grey body

Why:

The new Quartz theme is even more neutral giving focus to the app and making it a little easier for you to adjust it quickly to your corporate theme.

Worth knowing:

Note: UI Theme Designer is delivered as part of your SAP S/4HANA solution.

Refer to the Fiori launchpad administration guide > Configuring the launchpad > Adjusting the visual appearance of the launchpad

TIP: Support for Quartz themes in classic User Interfaces is on the 2020 roadmap for User Interface Technologies Watch the SAP Community page for Business Client for further updates.

IMPORTANT: While it is possible to upgrade to Fiori Frontend Server 6.0 or above against a SAP S/4HANA system version 1809 or below, this does not necessarily grant use of the SAP Quartz theme. Check the SAP Fiori for SAP S/4HANA release information for your SAP S/4HANA version.

Getting back to the Home page via the Logo

Fiori 2.0:

With Fiori 2.0, when you are on the Fiori launchpad Home page you saw the Home button in the middle of the header and the Logo towards the left. The Home button would get you to all your apps, and the Logo towards the left did … nothing, i.e. the logo was decorative.

Fiori 2.0 launchpad highlighting Home icon in the middle of the launchpad header

When you are in an app, the App Title button is shown in the middle of the header and the Logo is shown towards the left.  The App Title button displays the name of the current app. Clicking on the App title button gave you the option of going back to the Home Page or getting to any other app, and the Logo shown towards the left did …nothing, it was just decoration. You could also get back to the Home page or any other app through the App Title button.

Fiori 2.0 launchpad highlighting App Title button in the middle of the launchpad header

 

Fiori 3:

Selecting the Logo icon takes you to the Home page.

Fiori 3 launchpad highlighting Logo icon towards the left of the launchpad header

The App Title button is now towards the left and still gives you access to your Home page or  any of your apps.

Fiori 3 launchpad highlighting App Title button towards the left of the launchpad header

Why:

  • It makes better use of the space, as the Logo needs to be there for legal/corporate reasons and was previously a purely decorative item.
  • It simplifies the header and aligns to Cloud Solutions.
  • Plus the Home icon itself did not work so well for all cultures. A western image of a suburban house perhaps does not fit other house styles, or those who have only ever known apartment buildings.

Worth knowing:

Your Fiori launchpad Administrator can change what users can access via the App Title by adjusting the Fiori Launchpad Configuration parameters (such as NAVIGATION_ALLMYAPPS, NAVIGATION_ALLMYAPPS_SHOWHOMEPAGEAPPS, and NAVIGATION_ALLMYAPPS_SHOWCATALOGAPPS).

These can be configured globally for all users or for specific business roles.

Refer to the Fiori launchpad administration guide > Configuring the launchpad > Setting parameters in Fiori customizing.

Personalization has moved from Me Area viewport to User Actions menu

Fiori 2.0:

Clicking on the person icon on the top left took you to the Me Area viewport where all your personalization options and app-specific settings, and (my personal favourite) the support lifesaver About icon.

Fiori 2.0 launchpad showing Me Area viewport on the left of the launchpad

Fiori 3:

Me Area options have moved to the User Actions menu available towards the right of the header menu.

Fiori 3 launchpad highlighting User Actions menu towards the right of the launchpad header

Why:

  • Settings are always available and a little easier to find.
  • Reduced animations make it easier for some users who are motion-sensitive, or where network bandwidth is poor, and on low-end devices.

Worth knowing:

Your Fiori launchpad Administrator can configure additional options such as Contact Support and Give Feedback.

You can even add custom options and plug-ins. Find out how in the Fiori Launchpad Administration Guide > Configuring the launchpad.

The Notifications viewport has moved to a dialog popup

Fiori 2.0: Notifications appeared in a right hand viewport.

Fiori 2.0 launchpad highlighting Notifications viewport on the right of the launchpad

Fiori 3: Notifications appear in a right hand dialog popup from the Fiori launchpad header

Fiori 3 launchpad highlighting Notifications icon and dialog towards the right of the launchpad header

Why:

  • Reduced animations make it easier for some users and on certain devices.
  • Later in the Fiori 3 journey, it is planned that Notifications will be provided from multiple systems – including both on premise and Cloud solutions.

Worth knowing:

You can promote or hide notifications by type in your Settings.

Refer to the Fiori Launchpad User Guide > Using the Launchpad > Working with Notifications

User Assistance Help

Fiori 2.0:

User Assistance help appeared as a horizontal overlay bar.

Fiori 2.0 launchpad highlighting User assistance horizontal overlay bar and help icon towards the right of the launchpad header

Fiori 3:

User Assistance help now appears as a vertical sidebar on the right.

Fiori 3 launchpad highlighting User assistance vertical sidebar and help icon towards the right of the launchpad header

Why:

  • Reduces need to open and close the help as it no longer obscures part of the app.

Worth knowing:

You can configure the correct help against your launchpad. Refer to the UI Technology guide for your version.

If you want to extend the provided help you can do that with SAP Enable Now

What else is new with Fiori 3 in SAP S/4HANA Cloud 1908 & SAP S/4HANA 1909

Find out more about SAP Fiori 3 in these excellent blogs and videos:

First parts of SAP Fiori 3 available with SAP S/4HANA Cloud 1908 by Fiori guru Tom Reiss

and Get Ready for SAP Fiori 3 by Margot Wollny

For a few highlights and future direction options for SAP S/4HANA 1909 keep reading.

Cards on the SAP Fiori launchpad

One of the new options available with SAP Fiori 3 i.e. SAPUI5 1.65 is the option to create custom cards for the Fiori launchpad.

A number of customers and partners have already been experimenting with this on the SAP Cloud Platform where this feature has been available since May 2019.

Worth knowing:

No cards have been delivered as content yet with SAP S/4HANA Cloud 1908 and SAP S/4HANA 1909 FPS00, however we plan to deliver some in future releases and feature pack stacks.

Fiori design guidance currently only envisages placing cards on home pages, not within SAP Fiori apps.

Situation Handling

One of the new intelligent enterprise features already available in SAP S/4HANA 1909 is Situation Handling.  This is a whole topic in itself worthy of several blogs.

This video introduces the concept: Situation Handling – Intelligent and Proactive User Support

You will find some starter information in the SAP S/4HANA What’s New Viewer (search on the terms “situation handling” or “situation template”.  We also a have a new Situation Handling section in the All About Apps page of the SAP Fiori for SAP S/4HANA wiki.

Central Launchpad

Review announcements in the SAP TechEd 2019 session replay UX203 – All You Need to Know About SAP Fiori Launchpad, Las Vegas 2019 and architectural advice in the latest version of the SAP Fiori Deployment Options and Landscape Recommendations.

Becoming a SAP Fiori for SAP S/4HANA guru

You’ll find much more on our SAP Fiori for SAP S/4HANA wiki

Brought to you by the S/4HANA RIG

24 Comments
You must be Logged on to comment or reply to a post.