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

Picture 1: My Home page from SAP S/4HANA Cloud 2111 showing on the SAP Fiori launchpad for a purchaser, with the new design (Horizon preview) switched on.

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

data-sap-ui-theme=”sap_horizon”

Alternatively, use a URL parameter when launching the app standalone

?sap-theme=sap_horizon

Picture 2: SAPUI5 bootstrap setting the Horizon theme of SAP Fiori

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.)

Outlook

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.