SAP Fiori 3 is SAP’s new target design system, which evolves the SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device.

Rather than holding back some of the innovations and delivering everything later in one big bang, SAP has chosen to deliver the SAP Fiori 3 innovations in a stepwise approach. With SAPUI5 1.65, available on the SAP Cloud Platform since April 25th, the very first step becomes available to developers: the new Quartz theme as a successor of the Belize theme used with SAP Fiori 2.0, and the new shell header bar, which also replaces the viewport in SAP Fiori 2.0.

The new Quartz theme is lighter and more neutral, to blend more into the background, giving application content the center stage. It is simple and minimalistic, making it easy for customers to theme it to their brand.

You can see the new theme above, which also gives you a preview of the next step for SAP Fiori 3 planned for developers: cards on the SAP Fiori launchpad in addition to tiles.

SAP Fiori 3: consistent, intelligent, integrated

SAP has defined SAP Fiori 3 jointly with all the various product units, taking SAP Fiori 2.0 as a starting point and looking to see which aspects would need to be added to best support them all. One of the most requested new aspects was being able to provide more information on home pages, which the design is supporting via cards. In addition, although SAP Fiori 2.0 supports aspects of intelligence such as natural language interaction and machine intelligence already today, we have reimagined how they can become a key part of the experience by deeply integrating them into the foundation of the design to provide:

  • Intelligent home pages showing everything you need to focus on.
  • Digital assistant with conversational UI fully integrated into the experience.
  • Proactive business situation handling, with explanations, insights and proposed actions.
  • Dynamic content to support intelligent apps with embedded AI, for briefings, analytics, tasks, notifications, recommendations ranked by relevance and for situation handling.
  • A new theme for a fresh, modern look and feel.
  • Improved search previews, results page and result visualizations, and integration of search with the digital assistant.
  • A central inbox, also integrated with the digital assistant.

As I mentioned, these innovations of SAP Fiori 3 will come step by step. In addition to the new Quartz theme, the new shell header bar available today has been aligned to be a best fit for all SAP products, and to be as simple as possible. Instead of having a company logo and a home button, we now just have the company logo; clicking on it takes you to the home page. The user avatar has been moved to the right, where all further actions can be found such as notifications and search. Clicking on the user avatar brings up the User Actions Menu, giving users access to the same features as before, but now as a drop-down list rather than via the SAP Fiori 2.0 me-area, as shown here:

In addition to updating action placement in the shell header bar, we have also updated action placement and terminology in apps, so that action buttons are positioned more intuitively – which is provided out of the box by SAP Fiori elements.

Some hints and good news for developers

The good news for developers of SAP Fiori apps is that the SAP Fiori 3 theme Quartz is compatible to the SAP Fiori 2.0 theme Belize: as long as you have built SAP Fiori apps using SAP Fiori elements, SAPUI5 or OpenUI5, without adding your own CSS and without developing your own UI5 controls, your app will work fine with SAP Fiori 3 without any technical adoption effort. If you have built your own controls, or you have your own CSS (which we advise against), you will need to check whether they still look OK with the new Quartz theme. If you do have your own controls or CSS, do also check your apps for mobile devices, since we have made the metric for the cozy mode slightly more compact, so that for example more lines in a table can be shown on the screen.

The Belize theme will continue to be supported technically, so that as developers you can choose whether to continue with the Belize theme or whether to switch to the new Quartz theme.

For details on the above first steps of SAP Fiori 3 available with SAP UI5 1.65, have a look at the documentation: SAPUI5 – What’s New in 1.65.

If you want more information on SAP Fiori 3 plans, have a look at the SAP Fiori Road Map. This can be found on www.sap.com/roadmaps by searching for “Fiori”.

If you’re visiting SAPPHIRE this year in Orlando, then we’d be happy to welcome you at our topic station “SAP Fiori for the Intelligent Enterprise”; you can also find out more by attending one of our SAP Fiori 3 sessions, which you can find in the SAPPHIRE session catalog.

Not logged in
  • Jeroen Vanattenhoven   3 weeks ago

    Interesting news. I’d like to investigate more but:

    The link to “SAPUI5 – What’s New in 1.65” results in “The requested resource was not found”. The most recent documentation for SAPUI5 I can find is 1.64.

    The link to “SAP Fiori launchpad – What’s New” contains Fiori 2 screenshots.

    • Tobias Essig   3 weeks ago

      Dear Jeroen,

      thanks for your interest and kind hint regarding the urls. I updated the article accordingly and added the correct link on “SAPUI5 – What’s New in 1.65”. The corresponding link to SAP Fiori launchpad will be live as of May 9th. For the time being, I deleted it in the blog. Sorry for any inconvenience this caused.

      Please let us know in case of further questions and have a great day,
      Tobias

    • Anderson Foscarini   3 weeks ago

      Also, the link to the Product Roadmap is missing a “c” at the “.com”.

  • Mikael Gurenius   3 weeks ago

    Any specific SCP region requirements for 1.65? Can’t find it in Neo – Europe (Rot).

    • Winfried Wenisch   3 weeks ago

      Hi Mikael,
      it takes us a couple of days to add it to the theme manager on Neo. Nevertheless you can try it already today by setting the UI5 version to 1.65 (in FLP Settings > System Settings) and add the theme parameter ‘sap-theme=sap_fiori_3″ to your runtime URL, e.g. https://.dispatcher.int.sap.hana.ondemand.com/sites/SFCWini?sap-theme=sap_fiori_3#Shell-home.
      The header changes automatically come with 1.65 so no need for a specfic parameter for that.
      Have a nice day,
      Wini

    • Mikael Gurenius   3 weeks ago

      Cool. Half of the theme is there, but not all though. The header is! Running a Fiori Elements app.

      (and 1.65 is not available in Web IDE Full-Stack yet).

  • Adi Mogilevsky   3 weeks ago

    What is a comparable analysis between Fiori 3.0 and SAP Freestyle Portal, which appeared to be the glue between various SAP applications?
    When are you saying the various applications – do you include specifically SAP Ariba, Sunccessfactors (not the Payrolll) and Concur?

    • Johannes Wasserfall   2 weeks ago

      HI Adi,
      SAP is continuously evolving the portal service on SAP Cloud Platform (on multi-cloud / Cloud Foundry). The current focus is on enhancing the UX integration capabilities, to enable organizations to establish a central entry point to SAP solutions on premise and in the cloud. Customers can either adopt the SAP Fiori (launchpad) user experience or create custom (freestyle) portal pages. You can find details about planned enhancements in the official product roadmap ( https://www.sap.com/products/roadmaps.html ).

      I hope this answers your question.

      Best regards
      Johannes

  • Douglas Cezar Kuchler   3 weeks ago

    Great to see this evolution! I like the minimalist approach to the UI with white as the predominant color.

    Thinking of mobile devices with oled screens I think it would be great to have a “quartz dark” theme with true black as the predominant color aiming to save battery on such devices.

    Best regards!
    Douglas

    • Johannes Wasserfall   2 weeks ago

      Hi Douglas,
      thank you for your suggestion.
      It is planned to provide a “quartz dark” theme at a later point in time.

      Best regards
      Johannes

  • Rick van der Werf   3 weeks ago

    i’ll like the overall progression of the new theme. It’s more lean, which gives more theming flexibility, now companies desire more and more to use their own design systems.

    Usually I had to remove quite some parts out off belize with CSS, when I had to brand clients their apps to their own design system.

  • Anderson Foscarini   3 weeks ago

    Cards! This is great news! This will bring so much richness to the Home Page experience.
    Looking forward to seeing all these great enhancements.

    Keep up the good work! 🙂

  • Fábio Luiz Esperati Pagoti   4 days ago

    How can developers have access to this? I see no update in the Portal service of HANA Trial region. Actually, the global configurations page is broken for some months now and it’s not possible to select a specific UI5 version.

  • Christian Graff   4 days ago

    Hello,

    first of all, thanks for this excellent overview. 🙂

    I have a question regarding the meArea: As I understand this posting the meArea will be abandoned in favour of the user actions menu?

    Thanks for the clarification 🙂