Latest update October 2020: This blog is relevant for any SAP S/4HANA customers upgrading from 1610, 1709, 1809 to 1909 or higher. The main differences between 1909 and 2020 are the move to Spaces and Pages - refer to: Major next steps of SAP Fiori 3 available for SAP S/4HANA on-premise – spaces, central entry point, ...
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:
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:
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.
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.
Going to Home – use the Logo in the header bar to get back to the Home page at any time.
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.
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.
Notifications – Have moved from a viewport on the right to a dialog popup towards the right in the top shell bar
User Assistance - Has moved to a vertical sidebar on the right.
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.
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 3:
With Fiori 3, the Quartz Theme has been added, which is mostly grey and more neutral.
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 o...
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.
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.
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 3:
Selecting the Logo icon takes you to the Home page.
The App Title button is now towards the left and still gives you access to your Home page or any of your apps.
Why:
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 custo....
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 3:
Me Area options have moved to the User Actions menu available towards the right of the header menu.
Why:
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.
Fiori 2.0: Notifications appeared in a right hand viewport.
Fiori 3: Notifications appear in a right hand dialog popup from the Fiori launchpad header
Why:
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
Fiori 2.0:
User Assistance help appeared as a horizontal overlay bar.
Fiori 3:
User Assistance help now appears as a vertical sidebar on the right.
Why:
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
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.
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.
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.
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.
You’ll find much more on our SAP Fiori for SAP S/4HANA wiki
Brought to you by the S/4HANA RIG
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.
Going to Home – use the Logo in the header bar to get back to the Home page at any time.
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.
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.
Notifications – Have moved from a viewport on the right to a dialog popup towards the right in the top shell bar
User Assistance - Has moved to a vertical sidebar on the right.
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 3:
With Fiori 3, the Quartz Theme has been added, which is mostly grey and more neutral.
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 SAP Fiori 2.0 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 SAP Fiori 3
- There are currently some restrictions on Quartz theme availability for classic user interfaces. Refer to SAP Notes
- 2814266 - Restrictions of SAP Fiori 3.0 visual theme for classic applications
- 2789396 - Visual Design "SAP Quartz" for Unified Rendering based applications
- If you are also deploying standalone SAP Fiori apps for other suites as part of your solution, refer to this SAP Note:
- 2801584 - Theme Designer Support for Quartz Light (Standalone mode)
- Important: Standalone apps have long been deprecated for SAP S/4HANA itself.
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 o...
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.
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 3:
Selecting the Logo icon takes you to the Home page.
The App Title button is now towards the left and still gives you access to your Home page or any of your apps.
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 custo....
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 3:
Me Area options have moved to the User Actions menu available towards the right of the header menu.
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 3: Notifications appear in a right hand dialog popup from the Fiori 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 3:
User Assistance help now appears as a vertical sidebar on the right.
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
- SAP Managed Tags:
28 Comments
