SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori
We are transforming our design and development culture here at SAP, to focus even more strongly on helping people get their work done faster, more easily, and with better outcomes. If you haven’t already read about it, then do read this blog post by our Chief Design Officer Benedikt Lehnert before continuing here: The Experience Mindset: Redesigning How We Build Products at SAP.
What is Horizon?
SAP’s new design language is an evolution of SAP Fiori. The new visual theme Horizon paves the way with a modern, friendly user interface based on an accessible, modular design system. Among other aspects, the planned new Horizon theme comes with:
- an attractive and fresh color palette according to the Web Content Accessibility Guidelines
- a sense of focus with contrast, white space, and a bold typography to fit a natural information hierarchy
- rounded corners creating a friendly, approachable, and modern look
- a mobile-first approach to reduce the learning curve across devices
- a new icon set that communicates clearly and feels modern
To find out more about the Horizon preview, and how you can give feedback as an SAP S/4HANA Cloud customer, have a look at this blog post: SAP Fiori: new Horizon visual theme available as preview – we want your feedback!
How do SAP’s UI technologies support the Horizon visual theme?
SAP strives for a consistent user experience across solutions and across UI technologies. The SAP Fiori DNA is built into the foundation for all web developers via a common theme, making it easier to build new SAP Fiori apps. A common theming base is key for an efficient reuse and a uniform theme appearance with its colors and metrics. As a result, SAP is capable of introducing the Horizon theme quickly, with the right attention to various UI technologies.
The UI theme designer and HTML-based UI frameworks like SAPUI5 / OpenUI5, UI5 Web Components and the Fundamental Library are based on the theming base content which provides all the relevant theming parameters as modern CSS variables. Customizing these parameters with the UI theme designer lets you create custom themes, based on SAP’s standard themes.
SAP’s strategic UI5 technologies support Horizon
- in SAPUI5 1.93.3 and 1.96.0 as an early experimental preview version to incorporate feedback from our users. This includes UI Integration Cards as well.
- in UI5 Web Components 1.0.0 to be used with UI technologies like Angular or React. See more details in Lift-off: UI5 Web Components 1.0.0 Launched!
SAP’s classic UI technologies also support Horizon
- in Web Dynpro ABAP, supporting the Horizon visual theme as preview version in SAP S/4HANA Cloud 2111 and upcoming SAP_UI 7.57
- in SAP GUI for HTML: our current plans foresee support for the Horizon visual theme as preview version in SAP S/4HANA Cloud 2202
The Horizon visual theme of SAP Fiori is available to
- selected customers of SAP S/4HANA Cloud 2111 using SAPUI5, Web Dynpro ABAP and Floorplan Manager based applications. Other applications are displayed with the standard theme instead of Horizon. Customer feedback on the Horizon theme will be incorporated in the upcoming GA version.
- developers on SAP Business Technology Platform via SAPUI5 1.93.3 and 1.96.0 as experimental preview version for evaluation purposes – not for productive use. It can be previewed using SAP Business Application Studio (for pro-code as well as low-code development) / SAP Fiori tools for developing with SAPUI5, including SAP Fiori elements.
- the open-source community as experimental preview version with OpenUI5 1.96, with UI5 Web Components 1.0.0, with Fundamental Library Styles 0.21 (plus experimental package with the new Horizon components) and Fundamental Library for Angular 0.33 (plus experimental package with the new Horizon components).
How to use the Horizon visual theme?
End users of selected SAP S/4HANA Cloud 2111 customers enable the new theme in the SAP Fiori launchpad.
Developers enable it for custom apps in the SAPUI5 bootstrap or in the UI5 Web Components configuration
Alternatively, use a URL parameter when launching the app standalone
What to keep in mind?
The Horizon visual theme has status experimental on SAP BTP, it is not available for productive usage.
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.)
The current version of the Horizon theme is an early, first preview version. Expect more news on its evolution in the future, e.g. the productive adoption by SAP solutions and general availability on SAP BTP, communicated in the SAPUI5 Road Map.
Going forward, the current plan is that the UI theme designer will support the creation of custom themes based on Horizon. SAP also plans to make the new Horizon visual theme available to the SAP AppGyver no-code environment.
Very nice work on the theme! Also happy to see the open-source community in the list of availability. 🙂
The first thing I always check as a developer is: "does this have a dark theme" which after reading the mentioned blog posts, I'm happy to see that it does. 😀
I'm a fan of the refreshed and more modern look, can't wait to see it being adopted/used.
Haha, sure, a dark version is a must for developers!
Thanks for your feedback! More news to come...
data-sap-ui-theme="sap_horizon_dark"does nothing (yet). emergency! call the design police! 🤣
Works fine on the UI5 Web Component page BTW
Well the parameter itself works, but it was about the '_dark' park which does not 🤨😁
Dark mode is coming of course, see preview picture in The Experience Mindset — Redesigning How We Build Products at SAP
already made one of my app to run in horizon theme... looks cool 🙂
Excellent, thanks for your fedback!
More great innovations to come, this is only the first step in this journey...
I am excited for the Horizon theme. It looks great! Congrats to the designers behind this and everyone working on bringing it to us
I was trying to customize some of css classes in sap_horizon theme, but I couldn't find any sources to theme parameters for Horizon.
i used the Theme Parameter Toolbox (https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/theming/webapp/index.html) for other Themes, but for now thee Horizonn is not included.
any idea where i can find all existing theme parameter for Horizon?
I will check wrt. the Theme Parameter Toolbox...
For your theme customizations kindly consider using the UI theme designer, which shows the available theming parameters. More info in https://experience.sap.com/fiori-design-web/theming/
thanks for the fast replay, I'm aware of Theme-Designer, but we want to have a source for non-technical users, that they easily visit it and pick a color(parameter).
it will be great to have Horizon Theme also in Theme Parameter Toolbox
Best regards, Aram
Liked the theme but wanted to check if sap_horizon theme is still in experimental phase or it can be used for productive usage ?
yes, you may use it productively, see details in Horizon theme of SAP Fiori: update on productive usage for web applications
is there a time line for SAP GUI support? At the moment we have a mixed landscape from business suite to S4 and use the Fiori 3 Quartz Theme. Mixed Themes like you mentioned would be a step backwards I think.