SAPUI5 1.102 supports productive usage of the Horizon themes. This means that applications using SAPUI5 1.102 have full SAP support and Horizon is no longer in status “experimental”.
SAP’s intelligent enterprise delivers products and applications that are helping people get their work done faster, more easily, and with better outcomes". For this, a modernized SAP Fiori design system enables SAP (and you!) to create business apps with an exceptional user experience that run on any device. This goes hand in hand with a new design and development culture here at SAP, which puts the focus on the user within every line-of-business solution.
The new modern Horizon theme is an evolution of the SAP Fiori design system. The theme
Horizon comes with a family of themes:
To find out more about the Horizon themes check this blog post: SAP Fiori Evolution: Horizon Now Generally Available in UI Technologies and Some Products. To learn how UI technologies support the Horizon themes, see SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori. Since I wrote that blog post, customer feedback has been implemented for the productive version available now.
SAP’s open-source technologies support the new Horizon themes:
Stay tuned for news on UI theme designer and other UI technologies such as Web Dynpro ABAP and SAP GUI for HTML. For customers of SAP Mobile Services see What’s new in Mobile development kit client 6.2.
To use the new Horizon theme as a SAPUI5 developer, enable it for your app using data-sap-ui-theme="sap_horizon" when bootstrapping SAPUI5 or configuring UI5 Web Components. Alternatively, use URL parameter ...?sap-theme=sap_horizon when launching the app standalone which works for all UI Technologies. The theme IDs are
Existing applications and extensions using standard SAPUI5 controls or SAP Fiori elements will work with the Horizon theme, without the need for technical adoption effort. Only if you have built your own custom controls, or you have your own CSS (which we advise against), you will need to check whether they maintain design quality with the Horizon theme. (These are the same conditions as with the introduction of the current Quartz theme which came with SAP Fiori 3.)
What is Horizon?
The new modern Horizon theme is an evolution of the SAP Fiori design system. The theme
- offers a modern and fresh look with a new vibrant color palette
- looks friendly and approachable by using rounded corners and softer shapes
- creates a sense of focus with more contrast, space, and visual hierarchy
- ensures an easy-to-learn and coherent experience across devices
- is ready for the WCAG 2.2 accessibility standard
Horizon comes with a family of themes:
- Morning Horizon (light version)
- Evening Horizon (dark version)
- High Contrast White (accessibility version)
- High Contrast Black (accessibility version)
SAP Fiori Manage Products app using the Morning Horizon theme
To find out more about the Horizon themes check this blog post: SAP Fiori Evolution: Horizon Now Generally Available in UI Technologies and Some Products. To learn how UI technologies support the Horizon themes, see SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori. Since I wrote that blog post, customer feedback has been implemented for the productive version available now.
What is new?
Can I use the Horizon themes with open-source technologies?
SAP’s open-source technologies support the new Horizon themes:
- OpenUI5 1.102 fully supports the Horizon themes
- UI5 Web Components 1.4.0 fully support the Horizon themes
- Fundamental Library Styles 0.24 fully support the Horizon themes. Also see Fundamental Library Styles Updates, including theming aspects
- Fundamental Library for Angular 0.35 fully supports the Horizon themes
Stay tuned for news on UI theme designer and other UI technologies such as Web Dynpro ABAP and SAP GUI for HTML. For customers of SAP Mobile Services see What’s new in Mobile development kit client 6.2.
How to use the Horizon themes?
To use the new Horizon theme as a SAPUI5 developer, enable it for your app using data-sap-ui-theme="sap_horizon" when bootstrapping SAPUI5 or configuring UI5 Web Components. Alternatively, use URL parameter ...?sap-theme=sap_horizon when launching the app standalone which works for all UI Technologies. The theme IDs are
- Morning Horizon: sap_horizon
- Evening Horizon: sap_horizon_dark
- High Contrast White: sap_horizon_hcw
- High Contrast Black: sap_horizon_hcb
SAPUI5 bootstrap setting the Horizon theme of SAP Fiori
What to keep in mind?
Existing applications and extensions using standard SAPUI5 controls or SAP Fiori elements will work with the Horizon theme, without the need for technical adoption effort. Only if you have built your own custom controls, or you have your own CSS (which we advise against), you will need to check whether they maintain design quality with the Horizon theme. (These are the same conditions as with the introduction of the current Quartz theme which came with SAP Fiori 3.)
- SAP Managed Tags:
20 Comments
