Product Information
First parts of SAP Fiori 3 available for SAPUI5 developers
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.
Related Information:
Very cool!
Nice! We are longing for more flexibility in the launchpad (not just static/dynamic tiles and links).
One thing though: there is a typo in your link to the roadmaps (sap.om instead of sap.com).
Nice but not sure if I like this new unobtrusive design. Maybe it takes just some time to get used to it.
Quartz theme is way nicer than Belize!
Thomas,
our company logo has to be places on a white background. Is it possible to make the shell bar with Quartz white, via Theme designer?
This is possible in Belize and blue Chrystal.
Hopefully this is possible, but most companies with logos also have negative versions for display on dark or light colors. It might be worth searching your company’s logo design and display guidelines to see if this is already handled.
Hi Stephan,
Yes, it is possible with the UI Theme Designer. The Quartz theme is fully supported by the UI Theme Designer, so you can change other colors, logos etc. using it - not just the shell bar. But as Ethan mentioned - you might want to look into using a lighter version of your company logo, since the darker shell bar looks good with the lighter background.
Sounds better. Do you whether common concerns are addressed like with same roles tiles can be restricted on Internet. E.g user will see less tile on internet and more tiles on intranet though role is same.