Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
ThomasReiss
Product and Topic Expert
Product and Topic Expert
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 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:

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



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 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 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 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 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 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 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.
24 Comments
nanda_kumar21
Active Contributor
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
ThomasReiss
Product and Topic Expert
Product and Topic Expert
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
Jocelyn_Dart
Product and Topic Expert
Product and Topic Expert
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.
prom2020
Explorer

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?

OliverGraeff
Product and Topic Expert
Product and Topic Expert
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.)

 
prom2020
Explorer

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!

ThomasReiss
Product and Topic Expert
Product and Topic Expert
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
prom2020
Explorer
0 Kudos
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.
Sycntegral
Active Participant
0 Kudos
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
ThomasReiss
Product and Topic Expert
Product and Topic Expert
0 Kudos
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
Sycntegral
Active Participant
0 Kudos
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
ThomasReiss
Product and Topic Expert
Product and Topic Expert
0 Kudos
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
OliverGraeff
Product and Topic Expert
Product and Topic Expert
Here we go: The Horizon themes of SAP Fiori are available now for theming with the UI Theme Designer.
prom2020
Explorer
That's fantastic news Oliver! Big kudos to you and everyone else who made this possible so soon! Let the fun begin 🙂
OliverGraeff
Product and Topic Expert
Product and Topic Expert
Thanks. Kudos are not for me at all, but for barbara.hartel and her team!
former_member51559
Discoverer
0 Kudos
There are pages (in SAP product) which are using old UI technology, instead of UI5 technology, what's the strategy for those old pages? Do we need to make it look like Horizon?
OliverGraeff
Product and Topic Expert
Product and Topic Expert
0 Kudos
SAP products move to SAP'S traget design system SAP Fiori, incl. the new Horizon theme. For technology aspects see Horizon theme of SAP Fiori: update on productive usage for web applications and respective poduct communication such as SAP Fiori Update: Major Horizon Next Steps Available Now – SAP S/4HANA Cloud 2208 and More.
OliverGraeff
Product and Topic Expert
Product and Topic Expert
0 Kudos
FYI you may watch it in this new video
0 Kudos
Wow! This theme looks super pretty and clean. Thanks for the great work.
JordanAlderson
Discoverer
0 Kudos
Horizon theme looks great!

In Figure 1 there is what looks like a new style of Card, a section for notifications and also reference to a "Hero Element". Is there somewhere I can learn more about using these features with Horizon?
ThomasReiss
Product and Topic Expert
Product and Topic Expert
0 Kudos
Hi Jordan,

We have made these cards and a section for notifications available in SAP S/4HANA Cloud 2208, as outlined in my blog post (with link to demo video). You can find out more in the documentation.

Also, the new SAP Build Work Zone is following this design, supporting cards etc. - here is the documentation on cards. Note also that our cloud-only, out-of-the-box entry point SAP Start, currently in Beta, also supports this design, with ToDos and interest cards.

Regards,

Tom
Mint
Explorer
0 Kudos
The new Horizon Theme is excellent!!! As a presales, I would say I enjoy in using S/4HANA. And, when I see the demo of Morning Horizon in SAP Service Cloud (agent desktop), wah!!!!! Another kind of experience. Really hope S/4HANA have same kind of theme in future.  UI team, thanks for the great work!!!!!!!
Heiko_Konert
Newcomer
Hi Thomas,

I really love the new horizon themes in Fiori Apps and also the idea to have the look and feel in all SAP apps.

However, there is a big part missing: SAP GUI (not for HTML)

Is there a plan to implement the horizon themes instead of quartz for SAP GUI 8.00 as well, eventually? Or is it even possible using S/4 onpremise with the right setup?

Redards,

Heiko
ThomasReiss
Product and Topic Expert
Product and Topic Expert
0 Kudos
Hi Heiko,

Glad you like the new Horizon themes! As to SAP GUI (not for HTML): yes, indeed we do currently  plan to support this in 2025. (Note though that, as always, our plans are subject to change)

Regards,

Tom