Skip to Content
Product Information

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

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

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

One of the central motivations of 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:

  • The main theme of Fiori 2 Belize theme is still supported, along with High Contrast Black and High Contrast White.
  • You can still use UI Theme Designer to create custom themes based on Quartz, Belize, High Contrast Black and High Contrast White, e.g. so you can change the logo to your corporate logo. Note: yes that is correct, custom themes can be created from High Contrast Black and White as of UI Theme Designer
  • A dark Quartz theme is planned for later in Fiori 3

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

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

One of the new options available with 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 Fiori apps.

Find out more about 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

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

19 Comments
You must be Logged on to comment or reply to a post.
  • Thanks for this Jocelyn. This is one blog I am sure many of will be coming back to over the days ahead. Good news on the theme designer able to use the HC themes as a base, thought I didn’t read a mention of a dark theme. Is there a dark theme in the Fiori 3 or do you just start with HC Black? From my point of view there is quite a distance between a dank theme and HC Black.

    Thanks, as always, for all you do at the RIG.

     

  • Hi Jocelyn,

    Thanks a lot for this blog and all the information in it.

    I woul like to ask you a question, in other Fiori 3 design présentation we saw Cards in the launchpad, no one talk about it, can you tell us if it is only for lab preview or is it really planned to add such Cards ?

    Kind regards,

    Joseph

    • Hi Joseph

      Perhaps you missed this in the What else is coming section?

      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.

      Yes you can use it now for your own custom cards.  As usual, you need to test thoroughly to make sure it meets your expectations and needs on your version

  • Thanks for the great blog Jocelyn. Fiori 3 changes are most welcome and most importantly the me area and notifications. It was bit cumbersome in Fiori 2. Now i feel it is well aligned with Non SAP web application also which not actually helps SAP end users as well as Non SAP in using it easily.

    Nabheet

  • Regarding the logo , the “why” should be , and only be, “Because it’s a common UX pattern and people expect it to work that way”.

    That should have been the only necessary reason for the change. SAP shouldn’t be trying to reinvent the wheel when it comes to UX.

    • Hi Joao

      It’s worth remembering that what is considered common practice changes over time, and not all patterns stand the test of time.  For example, just think of how many changes there have been to handling the Home button on smart phones in the last 6 years.

      Certainly with the move to Fiori 3 where we want to integrate more closely between on-premise and cloud solutions, so consistency with current common UX patterns in SaaS solutions was definitely a factor in the decision as I alluded to above: “aligns to Cloud Solutions.”

      It took extensive consultation with all of SAP’s cloud solutions to come to common agreement on what were the most consistent and most desirable UX patterns to use going forward into Fiori 3.

       

       

       

       

      • The home button being the logo (in the web) has been common practice even before Fiori 1 came out, so the “common practices change” isn’t really applicable. For as long as I can remember there is an expectation that the logo is home.

        Your reasons seem to imply that using standard UX pattern wasn’t relevant for the change and that is extremely serious for Fiori survivability in the long run.

        Things like the execute button on the bottom right (???) have seriously crippled Fiori adoption and it seems like SAP still doesn’t get UX.

        Following standard conventions also decreases the risk the next company you buy follows other patterns ..

    • Hi Slavisa

      No – there are other options.

      SAP Cloud Platform users already have access to Fiori 3, i.e. SAPUI5 1.65 or above.

      By the way it’s Fiori 3 (no .0 anymore… just to avoid confusion with FES 3.0)