Our fresh new visual theme for SAP Fiori, Horizon, is well on its way to our portfolio of products. The first step is to enable the underlying technologies: today, Horizon is generally available for productive use by customer and partner development teams using SAP’s UI technologies for developing web-apps as well as native mobile apps. Also, Horizon is now starting to make its appearance in selected SAP products.

Before getting into the details, I would like to address one concern which we occasionally hear from customers: “Should I put my current SAP UI development and/or implementation project on hold until Horizon becomes available?”

The answer is a clear “no”: if you are developing SAP Fiori apps on SAP S/4HANA or on SAP Business Technology Platform, using one of the current themes such as Quartz, there is no need to put anything on hold. Horizon will be provided as an additional option, and you can choose when you want to actually start using the Horizon theme; until then, your system will continue with the theme you currently use. SAPUI5 is backward compatible, so that apps you build now will continue to work fine with Horizon once it becomes available. Similarly, mobile apps you develop now will work fine with Horizon when you move to the newer versions of the development kits. As usual with new themes: if you have built your own controls, or you have your own CSS (which we advise against), you will need to check whether they still look OK with the new Horizon theme.

What is Horizon?

The new Horizon theme introduces signature design elements which focus on helping people get their job done faster, more intuitively and with better outcomes. The next two figures show and explain what is new with Horizon, using some design examples for a home page and for a web and mobile application:

Figure 1: Some benefits of Horizon, shown on a design example for a home page.

Figure 2: Further benefits of Horizon, shown on a web app and a mobile app.

The examples shown above use the light version of the Horizon theme, called Morning Horizon. We also provide a dark version, called Evening Horizon, as well as high contrast white and black versions of the theme for accessibility, to help people with visual impairments.

Horizon Available Now in SAP’s UI Technologies for Mobile and Web Low-Code and Pro-Code Development

Native Mobile Apps

For developing native mobile apps with the SAP Business Technology Platform (SAP BTP), Horizon is now generally available in the SAP BTP SDK for iOS and the SAP BTP SDK for Android. The figure shows some examples of available mobile components with the Horizon theme:

Figure 3: Examples of mobile apps with Morning Horizon and Evening Horizon.

To find out more about the Horizon design for mobile devices and the new features of the iOS and Android SDKs, have a look at this blog post:

• SAP Fiori for Android & iOS: An all-new user experience for enterprise-ready mobile applications

For low-code development, SAP provides the mobile development kit with SAP Mobile Services.

It allows you to build your application once, in an integrated development environment (SAP Business Application Studio as well as Visual Studio Code) and run it natively on mobile devices (Android and iOS) and as a web application (online) in the browser. The mobile development kit now also supports the Horizon theme. The new components are on the road map to be supported in Q3/2022. To find out more, have a look at this blog post:

• What’s new in Mobile development kit client 6.2

Web Apps

For developing web apps with SAP Business Technology Platform, Horizon is now generally available for productive use with SAPUI5 version 1.102: Morning Horizon, Evening Horizon as well as the high contrast light and dark versions. Here is a preview of what it looks like for an SAP S/4HANA application, in this case the Monitor Purchase Requisition Items app:

Figure 4: A preview of Morning Horizon in SAPUI5 in SAP S/4HANA Cloud 2202, for the Monitor Purchase Requisition Items app.

For low-code development, you can also use the integrated development environments (IDEs) SAP Business Application Studio as well as Visual Studio Code to leverage SAP Fiori tools and SAP Fiori elements. They allow you to very efficiently build powerful web apps using a pattern-based approach. You can also use these IDEs along with SAP Fiori tools for your pro-code / freestyle development with SAPUI5.

To find out more about developing web apps with Horizon using SAP supported UI technology as well as using open source UI technologies, have a look at this blog post:

• Horizon theme of SAP Fiori: update on productive usage for web applications.

Horizon Available Now in Selected SAP Products

SAP S/4HANA

As already announced in November, SAP S/4HANA Cloud currently offers a preview of Morning Horizon:

• SAP Fiori: new Horizon visual theme available as preview – we want your feedback!

Our current road map envisages this becoming generally available for SAP S/4HANA Cloud in Q3/2022.

For SAP S/4HANA on-premise customers, we plan to provide a preview in Q4/2022, and we plan to make it generally available in Q1/2023. This means that you should be able to start trying it out in on-premise development projects if you upgrade to the new release planned for Q4/2022, and use your custom applications together with standard apps productively early next year. As mentioned at the beginning: apps which you have already developed or which you start developing now will also work fine with Horizon once you switch from your current theme to the Horizon theme [with the usual caveat: if you have built your own controls, or you have your own CSS (which we advise against), you will need to check whether they still look OK with the new Horizon theme].

SAP Service Cloud

Horizon is being applied in a stepwise approach, starting with applying the colors, icons, typography, shell, and navigation. This is now available for Morning Horizon in SAP Service Cloud, here is an example showing the Service Agent Desktop:

Figure 5: Morning Horizon for the Service Agent Desktop in SAP Service Cloud.

Going forward, we plan to support the additional Horizon variants (Evening Horizon and both high contrast versions) as well as applying the new styling into the major components.

SAP Business Technology Platform Services

The profile page showing a user’s profile now has the Horizon theme. If you have this service up and running, you can access it via the URL https://accounts.sap.com/.

Figure 6: Morning Horizon for the Profile Page provided by SAP Business Technology Platform.

Summary

As you can see, Horizon is approaching! We have it generally available in our UI technologies for developers, and already selected products support it. During the course of this year, further products are planning to adopt Horizon, often starting with a preview before making it generally available.

If you are developing SAP Fiori apps on SAP S/4HANA or on SAP Business Technology Platform, using one of the current themes such as Quartz, then do continue! There is absolutely no need to put anything on hold.