SAP recently released the Horizon theme for SAP Fiori. The SAP Fiori Horizon theme is a new and modern evolution of the SAP Fiori design system. With SAPUI5 1.102, you can start using the Horizon themes in production systems. SAP Fiori provides a unified and comprehensive user experience for business users across all lines of business, devices, and deployment options.
History of SAP Fiori
SAP Fiori is the latest user experience for SAP software. SAP Fiori framework is currently utilized in a wide variety of solutions, including SAP S/4HANA, the SAP SuccessFactors Employee Central solution, SAP Ariba mobile solutions, the SAP Hybris Cloud for Customer solution, and many more. It was first released in 2013, and since then it has transformed from a group of apps into its current form. Different SAP Fiori themes were released over course of time to improve user experience.
Later after 3 year, SAP Fiori 2.0 was released in October 2016, marking a substantial change to the SAP S/4HANA and SAP Business Suite user interface with Belize theme (sap_belize). SAP Fiori 2.0, built on SAPUI5 technology (versions 1.40 and later), SAP_UI component 7.51 and and SAP Fiori front-end server 3.0, put an even greater emphasis on people and their workflows.
The Belize theme (sap_belize) features a different color scheme, layout, typeface, typography, and icons than the default theme. Classic applications like Web Dynpro and SAP GUI for HTML have the same look and feel as SAP Fiori apps thanks to the Belize theme. This results in a unified and consistent user experience across all three types of applications.
In September 2019, SAP Fiori 3.0 was released concurrently alongside SAP S/4HANA 1909 and SAP S/4HANA Cloud 1908. SAP Fiori 3 aimed to create a unified and integrated user experience across all SAP products with the introduction of the Quartz theme.
It is a successor to SAP Belize theme, and have the new shell header bar with unified features. The Quartz theme is based on SAPUI5 (versions 1.65 and later), fits better with the background, permits customization, and highlights application content. All of this improves user experience across on-premise and cloud solutions, paving the way for the intelligent suite.
The Quartz Light theme (sap fiori 3) includes a new color scheme that is grayish-neutral in tone and blends in seamlessly with the background. This draws attention to the data of the application. SAP Fiori 3 unifies the user interface of all SAP products, allowing for more fluid connection between them and bolstering the intelligent suite.
SAP Fiori Horizon theme
SAP Fiori Horizon theme is the name of SAP’s newly introduced theme. The visual style includes characteristic design features that contribute to SAP S/4HANA(On-Premise & Cloud) clean and contemporary overall appearance. The incorporation of rounded corners makes it more approachable and pleasant, while the simplification of the header bar and the use of bold font on page headers create a natural information hierarchy that allows users to see at a glance what information is most relevant.
Watch the preview of new Horizon visual theme for SAP Fiori for S4HANA below
The new Horizon style incorporates distinguishing design features that are geared toward facilitating faster, more intuitive, and more effective task completion on the part of end users.
Benefits of SAP Fiori Horizon Theme
The SAP Fiori Horizon theme offers:
- a new, lively color scheme that gives it a contemporary feel
- conforms to the requirements of WCAG 2.2, the Web Content Accessibility Guidelines
- Enables customer branding with customizable home page hero elements
- New icon sets for clear, consistent communication across platforms
- Improves information hierarchy with simplified header bar
- Mobile first approach ensures an easy-to-learn, consistent experience across devices.
- The new SAP 72 bold font is used in a bold fashion to highlight the most crucial information.
Horizon comes with a family of SAP Fiori theme list:
- Morning Horizon (light version)
- Evening Horizon (dark version)
- High Contrast White (accessibility version)
- High Contrast Black (accessibility version)
Following SAP’s open-source technologies also fully supports the SAP Fiori Horizon theme:
- OpenUI5 1.102
- UI5 Web Components 1.4.0
- Fundamental Library Styles 0.24 and Fundamental Library for Angular 0.35
References
Upgrading from Fiori 2.0 to Fiori 3
