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:
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:
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:
- SAP Managed Tags:
8 Comments
