Horizon: The New SAP Fiori Theme

SAP’s continuous innovation has developed a new Fiori theme called Horizon. This theme transforms design and development ideas. Further, it helps people get their work done faster and in an efficient way with better results. Additionally, it enables SAP and developers to create business apps with an outstanding user experience across any OS/Platform. This new theme id is sap_horizon.

What is SAP’s Horizon Theme?

An evolution of the SAP Fiori design system, the new Horizon theme sets new standards with a modern and friendly user interface. Further, this theme offers a variety of advantages:

  • Firstly, a new vibrant color palette
  • Secondly, looks attractive due to the use of rounded corners and softer shapes
  • creates a sense of focus with more contrast, space, and visual hierarchy
  • easy-to-learn and coherent experience across devices
  • enables customer branding with customizable homepage hero elements
  • having new sets of icons provides clear and consistent communication across platforms
  • improves information hierarchy with a simplified header bar
  • WCAG 2.2 accessibility standard ready
  • Finally, the new SAP 72 bold font highlights the crucial information.

Different flavors of Horizon theme:

Horizon comes with a different flavor of themes:

  • Firstly, Morning Horizon (light version)
  • Secondly, Evening Horizon (dark version)
  • High Contrast White (accessibility version)
  • Finally, High Contrast Black (accessibility version)

Morning Horizon (light version)

Evening Horizon (dark version)

High Contrast Black (accessibility version)

High Contrast White (accessibility version)

Now the question is Can we use the Horizon themes with open-source technologies?

The answer is yes. Further, according to SAP, SAP’s open-source technologies that support the new Horizon themes are:

The Horizon 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. The rest of the applications are still displayed with the standard theme instead of Horizon.
  • developers on SAP BTP via SAPUI5 1.93.3 and 1.96.0 as experimental preview versions for evaluation purposes – however, not for productive use. 
  • the open-source community as an experimental preview version with OpenUI5 1.96, with UI5 Web Components 1.0.0.

Horizon version support for productive usage:

SAPUI5 version 1.102 supports the new Horizon themes for productive usage. However, this means that applications using SAPUI5 1.102 have full SAP support, and it’s no longer in the “experimental” status.

How to use the Horizon themes?

As a SAPUI5 developer, we can use the new Horizon theme and enable it for our app while bootstrapping SAPUI5, using data-sap-UI-theme=”sap_horizon” or configuring UI5 Web Components. Alternatively, we may use the URL parameter ?sap-theme=sap_horizon for the standalone apps. The theme IDs for different flavors of Horizon are:

  • Morning Horizon: sap_horizon
  • Evening Horizon: sap_horizon_dark
  • High Contrast White: sap_horizon_hcw
  • High Contrast Black: sap_horizon_hcb

Things to remember while using Horizon Theme?

It will work with existing applications and extensions using standard SAPUI5 controls or SAP Fiori elements without the need for technical adoption effort. However, only if we have built our own custom controls or our own CSS (which SAP advises against) will we need to check whether they align with the design quality of the new Horizon theme.

Horizon Theme is Available Now in a few Select SAP Products:

  • Firstly, SAP Business Technology Platform Services (such as Launchpad service)
  • SAP Work Zone
  • Finally, SAP Mobile Start and Further Mobile Apps

SAP Fiori

SAP Launchpad site with Morning Horizon and Evening Horizon

Currently, the new themes are available in the SAP Launchpad service and the SAP Work Zone via the Theme Manager. However, at the moment, they are not assigned as a default theme to new sites. Further, they can still be readily made available as default themes. Alternatively, users can select them on the site via the theme manager, which administrators can access via their user actions menu.

Horizon theme in Theme Manager

SAP Fiori

However, for customers who want to create their themes based on the Horizon theme family, the Horizon themes are now available for theming in the UI Theme Designer.

SAP Fiori

Horizon introduces a new set of design principles.

According to SAP, below are a new set of design principles:

  • Exceptional and Intentional – Meeting user expectations and intentions with attention to detail, resulting in exceptional product experiences.
  • Intuitive and Effortless – Making work experience easy while eliminating friction and surprises.
  • Cohesive and Seamless – Delivering a cohesive and cross-platform experience throughout the SAP solution family and all touchpoints for our users.
  • Bold yet friendly – Making users feel relaxed and inspired by bolder colors and typography, with a warm, approachable, and contemporary look and feel.
  • Ethical and Inclusive – Opening up enterprise software for everyone with a deep commitment to accessibility and a robust ethical framework that will flex with the times. Further, designing with people instead of only for people.

Please check out SAP’s updated documentation for more details.

 

References:

Horizon theme of SAP Fiori

If you are interested in viewing similar articles, visit our blog, here. 

View our LinkedIn, here. 

Ravi Kant a Senior Developer at Mindset. He lives in Bangalore with his wife. He has an overall 7.4 yrs of experience in technology, of which 7 yrs have been spent honing SAPUI5 and Fiori. Ravi Kant specializes in SAPUI5, Fiori (configuration, extension and customization), Javascript, Mobility, UI/UX, SAP BTP (CAPM, Sequelize, Fiori Elements), and OData. Ravi is passionate about technology and enjoys reading blogs on new SAP technology. When he is not working, you will find him watching movies, or drawing.

Back To Top