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   4 months 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   4 months 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   4 months ago

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

  • Mikael Gurenius   4 months ago

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

    • Winfried Wenisch   4 months 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   4 months 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   4 months 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   3 months 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   4 months 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   3 months 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   4 months 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   4 months 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   3 months 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.

    • Orit Bezalel   3 months ago

      Hi Fabio,

      In general it can be accessed via the Theme Manager.
      Currently due to an open issue on the Trial the global configuration page and the Theme Manager cannot be accessed. Once it is solved you will be able to access both.

      Orit

  • Christian Graff   3 months 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 🙂

    • Thomas Reiss   3 months ago

      Hi Christian,
      All the functionality contained in the me Area in Fiori 2.0 will be available via the User Actions Menu. The navigation to get there follows the same approach as for accessing the me Area, i.e. users click on their photo or avatar.
      Regards,
      Tom

  • Ben Luby   4 weeks ago

    Looks great. When will design / prototyping tools (templates, icon sets etc) be made available?