Skip to Content
Product Information
Author's profile photo Thomas Reiss

SAP Fiori Evolution: Horizon Now Generally Available in UI Technologies and Some Products

Updated June 3rd, 2022: added a subsection on mobile applications supporting Horizon, including SAP Mobile Start, which is now also available for Android as well as iOS, with more images of Evening Horizon.

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%201%3A%20Some%20benefits%20of%20Horizon%2C%20shown%20on%20a%20design%20example%20for%20a%20home%20page.

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

Figure%202%3A%20Further%20benefits%20of%20Horizon%2C%20shown%20on%20a%20web%20app%20and%20a%20mobile%20app.

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%203%3A%20Examples%20of%20mobile%20apps%20with%20Morning%20Horizon%20and%20Evening%20Horizon.

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:

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:

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%204%3A%20A%20preview%20of%20Morning%20Horizon%20in%20SAPUI5%20in%20SAP%20S/4HANA%20Cloud%202202%2C%20for%20the%20Monitor%20Purchase%20Requisition%20Items%20app.

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 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:

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%205%3A%20Morning%20Horizon%20for%20the%20Service%20Agent%20Desktop%20in%20SAP%20Service%20Cloud.

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%206%3A%20Morning%20Horizon%20for%20the%20Profile%20Page%20provided%20by%20SAP%20Business%20Technology%20Platform.

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

SAP Mobile Start and Further Mobile Apps

SAP Mobile Start

SAP Mobile Start is the mobile entry point to the intelligent enterprise, giving users access to native mobile as well as web applications, web content, data and SAP S/4HANA notifications to quickly address business issues. It provides a consumer-grade user experience and superior performance, designed for an intuitive and personalized native OS experience, with enterprise-grade capabilities. Users get a consolidated view on all tasks and workflows to trigger direct actions. As a result, users benefit from improved productivity, agility and work flexibility.

SAP Mobile Start is now available for Android as well as iOS – supporting Horizon, both Morning Horizon and Evening Horizon, as you can see here:

Figure%207%3A%20SAP%20Mobile%20Start%20for%20iOS%20with%20Morning%20Horizon%20%28the%20two%20examples%20on%20the%20left%29%20and%20Evening%20Horizon%20%28the%20two%20examples%20on%20the%20right%29.

Figure 7: SAP Mobile Start for iOS with Morning Horizon (the two examples on the left) and Evening Horizon (the two examples on the right).

Figure%208%3A%20SAP%20Mobile%20Start%20for%20Android%20with%20Morning%20Horizon%20%28on%20the%20left%29%20and%20Evening%20Horizon%20%28on%20the%20right%29.

Figure 8: SAP Mobile Start for Android with Morning Horizon (on the left) and Evening Horizon (on the right).

To find out more about SAP Mobile Start, in particular for Android, have a look at this blog post:

Here are links to download it from the respective app stores:

Further Mobile Apps

SAP Service and Asset Manager, which enables easy and timely execution of end-to-end service and asset management on the go, is also available for iOS and Android, with support for Horizon – here is an example showing Morning Horizon:

Figure%209%3A%20SAP%20Service%20and%20Asset%20Manager%20for%20iOS%2C%20with%20Morning%20Horizon.

Figure 9: SAP Service and Asset Manager for iOS, with Morning Horizon.

 

SAP Warehouse Operator, available for iOS, allows users to scan barcodes efficiently and accurately, gives them real-time insights, guides them with optimized routes, and suggests the next best activity. Here are examples with both Morning and Evening Horizon:

Figure%2010%3A%20SAP%20Warehouse%20Operator%20for%20iOS%2C%20with%20Morning%20Horizon%20%28on%20the%20left%29%20and%20Evening%20Horizon%20%28on%20the%20right%29.

Figure 10: SAP Warehouse Operator for iOS, with Morning Horizon (on the left) and Evening Horizon (on the right).

 

SAP Direct Distribution, available for iOS, enables delivery drivers to efficiently transport consumer goods from a high-capacity freight station or port to their final destination. It digitalizes the delivery driver workflow in the field, reducing human error, and decreases order-to-cash time by enabling intermediate settlement of single customer stops throughout the day. By using it, drivers can provide a prompt, reliable and friendly service to their customers. Here are examples with both Morning and Evening Horizon:Figure%2011%3A%20SAP%20Direct%20Distribution%20for%20iOS%2C%20with%20Morning%20Horizon%20%28on%20the%20left%29%20and%20Evening%20Horizon%20%28on%20the%20right%29.

Figure 11: SAP Direct Distribution for iOS, with Morning Horizon (on the left) and Evening Horizon (on the right).

 

SAP Ariba Shopping, currently available as a Beta version for iOS and for Android, saves users time by providing a personalized experience, enabling flexible time and working models as well as a sustainable shopping experience. It supports latest technology such as AR (Augmented Reality) and provides extensive search functionality. It also supports both Morning and Evening Horizon:

Figure%2012%3A%20SAP%20Ariba%20Shopping%20%28beta%29%20for%20iOS%2C%20with%20Morning%20Horizon%20%28on%20the%20left%29%20and%20Evening%20Horizon%20%28on%20the%20right%29.

Figure 12: SAP Ariba Shopping (beta) for iOS, with Morning Horizon (on the left) and Evening Horizon (on the right).

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.

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nandakumar Ramamoorthy
      Nandakumar Ramamoorthy

      The new theme looks fantastic. Would love to see samples for dark mode as well.

      1. For on-prem customers will it be available if they upgrade to S4HANA 2021 FPS02 or do they have to upgrade to S4HANA 2022 FPS00 or above?
      2. Probably off topic, I learnt that SAP's strategy is to offer a unified UI experience across the portfolio of products. E.g: Quartz (earlier belize) being commons themes across Fiori and SAP GUI. If you happen to know, can you please share when Horizon would be available for SAP GUI?

       

      thanks

      Nanda

      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Nanda,

      I'm glad you like the new theme!

      To your questions: our plans are, as always, subject to change, but according to our current plans you would indeed need to upgrade to SAP S/4HANA 2022 to benefit from Horizon. We do indeed pursue our strategy of offering a unified UI experience across the portfolio of products. As part of this strategy, when we offer Horizon for SAP S/4HANA on-premise, this would cover the various browser technologies used, such as SAP GUI for HTML. As mentioned in the above post, "we plan to provide a preview in Q4/2022, and we plan to make it generally available in Q1/2023."

      Regards,

      Tom

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Hi Nandakumar, SAPUI5 1.102 will be available for SAP S/4HANA 2022 as indicated in the SAPUI5 Version Overview https://ui5.sap.com/versionoverview.html

      Once SAP FES for SAP S/4HANA 2022 is released it should be possible to upgrade your FES 2021 to FES 2022 against a SAP S/4HANA 2022 as indicated in
      SAP Fiori deployment options and SAP Fiori front-end server strategy – UPDATE 2021 

      Suggest you check the related SAP Notes for SAP Fiori frontend server for SAP S/4HANA 2022 and for updates to the SAP S/4HANA 2021 release information once SAP S/4HANA 2022 is released.  These are usually how we communicate any variations and prerequisites.

      Author's profile photo Morten Prom
      Morten Prom

      Everybody in the organization who have seen Horizon loves it. But we cannot use either of them before we can create themed versions. When will the Horizon themes be available in the UI Theme Designer?

      Author's profile photo Oliver Graeff
      Oliver Graeff

      Good to hear.

      Regarding the UI theme designer we already commented in Horizon theme of SAP Fiori: update on productive usage for web applications. I hope for a delivery in a few months. (As usual, please treat this statement with the disclaimer that it is a forward-looking and thus subject to change.)

       

      Author's profile photo Morten Prom
      Morten Prom

      I do appreciate the first answer you wrote Oliver, just trying to create some noise around the importance of the themes availability in the UI Theme Designer. Maybe someone can pull some strings and get things moving 🙂 We are waiting impatiently and I know our customers are looking forward to these themes too!

      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Morten,

      Don't worry, we are all aware of the importance of having Horizon available in the UI Theme Designer. The engineering team is making good progress, and we plan to have it available along with the general availability of Horizon with SAP S/4HANA Cloud in Q3/2022 (as Oliver already pointed out above, please treat this statement with the disclaimer that it is a forward-looking and thus subject to change).

      Regards,

      Tom

      Author's profile photo Morten Prom
      Morten Prom

      Sounds good Thomas, thanks. Then we'll hope we can begin to use Horizon with UI5 1.108, if that is going to be the 2022 long term support UI5 release.

      Author's profile photo Adi Mogilevsky
      Adi Mogilevsky

      How could you down-port Horizonte my demo Sap S4hana on prem version 2021 sp01? We develop software for the future releases as an SAP Build Partner and need to be ahead of the general releases otherwise this is not partnership

      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Adi,

      The good news is that you can continue to develop in your current SAP S/4HANA on-premise environment, using the Quartz theme. Whatever you develop will work fine once Horizon becomes available, so although you don't get to see the new look in your environment, this will not hinder you from developing software for future releases in any way.

      If you want to see Horizon with your code, you can try it out on SAP Business Technology Platform using the latest SAPUI5 version, which supports Horizon.

      Regards,

      Tom

      Author's profile photo Adi Mogilevsky
      Adi Mogilevsky

      Hi Tom

      Thank you for your reply.

      i am

      not sure what did you mean by preview on the BTP - we do use BTP BAS for the development.

      But we also do deploy to the on prem to store the App.

      Could you please elaborate?

      I assume the issue is the Fiori Front End application server, which we have on prem without the need of any BTP Fiori front end servers/ Work Zones / Etc.

      I assume you may understand the issue for our client is the data in the preview that could not be exposed even for the development purpose.

      Cheers

      Adi

      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Adi,

      Sure - what I meant with BTP is that if you deploy the app to BTP instead of on-prem, i.e. build a self-contained app on BTP entirely, then you can use Horizon today. Once you need to deploy to on-premise, indeed you will only be able to use the Quartz theme on an older release - but this is simply because the older release does not support Horizon. But as I said, whatever you develop now will work fine once Horizon becomes available via upgrading to the SAP S/4HANA system which will support Horizon in the future. We could set up a call if you have further questions - perhaps tricky to cover everything via this thread.

      Regards,

      Tom