Product Information
Horizon theme of SAP Fiori: update on productive usage for web applications
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.
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?
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”.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.)
Very good news Oliver! We've been waiting for the Horizon Theme to grow up 🙂 The power of UI5 Themes first shows it's real power when you customize them to adopt customer colors. When will the Horizon themes be available in the SAP UI Theme Designer.
Yes, you are absolutely right with regards to custom themes. The UI theme designer team is already working on this, and you can expect more news later this year. (As usual, please treat this statement with the disclaimer that it is a forward-looking and thus subject to change.)
Hi Oliver,
thanks for the good news concerning productive availability of the SAP Horizon theme.
Our BTP solutions depend on the SAP UI Theme Designer allowing customer specific themes in our SaaS Solutions, so this is also a must have for us to be able to use the new theme.
+1 -> Voting for Morten's request!
Best regards
Holger
Here we go: The Horizon themes of SAP Fiori are available now for theming with the UI Theme Designer.
You may watch it in this video.
Sounds promising!
Best
Ravid
Thanks for the update, Oliver!
I was wondering if there is a way right now to switch to any of the Horizon theme flavours(Morning, Evening, etc.) on the UI5 documentation site(OpenUI5)? Currently, I only see 'Horizon' in the theme switcher settings.
Regards,
Kavya
Hi Kavya,
right now kindly use the URL theme parameter. But as the themes are now available for productive usage, they will be added to the Demo Kit. The team is already working on that and it is planned to be available with UI5 1.103 (As always: this is a plan, subject to change).
Thanks,
Oliver
Thank you, Oliver! Looking forward to it!
Hi Oliver,
I've tried the sap_horizon_dark but unfortunately the placeholders that show up during the load of the list view are not yet adjusted to the dark theme. So it's quite flickery. Do you know if this is a known issue?
Best Regards
Gregor
Hi Gregor,
thanks for your feedback, as always! I double-checked with the team lead and this needs to be fixed. We kindly ask you to create an incident, so we can communicate with you and efficiently handle it between involved teams. Thanks a lot!
Best regards,
Oliver
Seems that the theme was updated and the issue is solved.
Thanks for the notification!
Hi Oliver,
the new horizon theme looks and sounds very promising!
Do you have some further details in regards to the WCAG 2.2 accessibility standards? What are the improvements compared to the currently available themes (e.g. Contrast, Keyboard Support, Screen Reader Support)?
I would appreciate some information even if it is only planned so far.
Thanks and best regards
Michael
Hi Michael,
Thank you for your feedback!
Compared to older themes, the (keyboard) focus appearance is a major improvement for WCAG 2.2. The visual affordance have been enhanced, and there is a consistent color and style throughout the controls for the light and dark theme.
In addition, semantic icons for controls like the progress indicator have been introduced to provide another distinguishing feature for users with visual impairments. Another improvement that works regardless of color is the rating indicator, where the stars are now offered in different sizes depending on whether they are selected or not. Another improvement for different shapes between states is seen in the read-only state compared to the editable field. The shape change allows a clearer distinction at first glance.
Also, a line height of 1.5 has been added for long continuous texts that are divided into multiple lines, such as a text area.
I hope these examples give you some insights for improving accessibility based on the WCAG 2.2 working draft.
Best regards,
Janina
Is the Horizon theme available for On Premise as well?
Kindly see a respective sentence in Horizon themes now available with the SAP Launchpad service and SAP Work Zone.
Are there some reference SAP Apps that have been designed with the Horizon Theme, that we can inspect in a browser?
The application coding and application interaction behaviour should be independent of the theme. An application is designed independent of the theme a customer applies. You may switch on the Horizon theme for apps, e.g. for SAPUI5 demo apps in SAPUI5 Demo Kit. Or in other products.
Thank you very much, liver!
I found under the link a great collection:
https://ui5.sap.com/test-resources/sap/suite/ui/generic/template/demokit/sample.manage.products.sepmra/test/index.html?sap-ui-theme=sap_horizon#Shell-home