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
SAP S/4HANA 2022, along with the SAP Fiori front-end server 2022 for SAP S/4HANA, brings you an improved SAP Fiori launchpad experience for the web: via new features of the launchpad itself, new innovations in user productivity and collaboration, and improvements for SAP S/4HANA applications, for both new SAPUI5 based apps as well as for classic UIs such as SAP GUI for HTML. We also bring you updates to our central entry points, web and mobile – one of these being Horizon, our fresh new visual theme for SAP Fiori, which is now available as a preview with SAP S/4HANA 2022. Finally, developers profit from major updates to our web and mobile UI development technologies, such as the new SAP Fiori elements flexible programming model and the new SAP Mentor app for mobile.

 This post covers:

  • Horizon

  • Entry point for users, with a focus on SAP Fiori launchpad innovations

  • UX innovations for applications

  • Situation Handling innovations

  • UI development made easier – web and mobile


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. To find out more about the benefits of Horizon, and its availability in our UI technologies, have a look at this blog post:

Now, Horizon is available as a preview with SAP S/4HANA 2022, for SAPUI5 based apps, as well as classic UIs. “Preview” means that we have not made it available for productive use yet. According to our current plans, which as always with future looking statements are subject to change, we plan to make it generally available in Q1/2023.

As explained in the above post, Horizon comes in a light version (called Morning Horizon), a dark version (Evening Horizon), as well as high contrast light and dark versions for accessibility, to help people with visual impairments.

Watch a demo video of both Morning Horizon and Evening Horizon – the preview available with SAP S/4HANA 2022 will look the same as it appears in this video of Horizon in SAP S/4HANA Cloud 2208:



Video 1: Morning Horizon preview for SAP S/4HANA


Figure 1 below shows an example of Morning Horizon preview for the SAP S/4HANA application Sales Order Fulfillment Issues. This is an example of an SAP Fiori analytical list page pattern, built with SAP Fiori elements.


Figure 1: Morning Horizon preview in SAP S/4HANA 2022, for the Sales Order Fulfillment Issues app, with a selection made to only show orders with the issue “Incomplete Data in Sales Orders”.


The Horizon preview is supported by all the application technologies provided by SAP S/4HANA, i.e. SAPUI5, SAP GUI for HTML, Web Dynpro for ABAP and the Web Client. Figure 2 shows examples of screens using the first three of these technologies. Since all three screens shown there have a width less than 1440 pixels, the central search field has been collapsed to the search icon on the right.


Figure 2: Horizon preview available for all the application technologies, here examples shown for application UIs based on SAPUI5, SAP GUI for HTML and Web Dynpro for ABAP.


SAPUI5 is backward compatible, so that apps which you have built in the past, or which you build now, will continue to work fine with Horizon once it becomes generally available.

The UI theme designer on SAP Business Technology Platform now also supports Horizon. In fact, with Horizon it is now even easier to create your own custom theme with the UI theme designer. You can create your own custom themes based on all four versions of the Horizon theme (Morning, Evening, and the two high contrast ones).

Entry point for users


Giving users an intuitive, simple yet powerful entry point to access all their SAP applications, as well as other related business applications, is a strategic priority for SAP, since it is one of the key requirements requested by our customers.

Our strategy is to provide an entry point in the web, complemented by a native mobile entry point, to be able to access all business applications used by a user. These entry points now support Horizon: both for the web, via SAP Launchpad service and SAP Work Zone (find out more in this blog post), as well as for SAP Mobile Start, as described in the Horizon blog post mentioned above.

In addition to providing a central entry point across our portfolio, each SAP product provides its own entry point (also known as a start page or a home page), for users who only or mainly use that product. SAP S/4HANA 2022 with the SAP Fiori front-end server 2022 for SAP S/4HANA provides a number of improvements to the SAP Fiori launchpad, which we’ll have a look at in a moment – but first let’s look at SAP Mobile Start and the SAP Task Center.

New SAP Mobile Start capabilities


We continue to evolve SAP Mobile Start according to our road map, and the latest version provides:

  • Feature parity between the Android version and the iOS version

  • An improved notification center

  • Mobile Device Management (MDM) support

  • ToDos directly shown on the start screen

  • Horizon visual design


If you want to see examples of SAP Mobile Start with Horizon, have a look at this blog post:

Note that SAP Mobile Start leverages the SAP Launchpad service for integrating with SAP products.

New SAP Task Center Capabilities


The SAP Task Center in the web supports Horizon, and is able to display all the details of tasks from SAP S/4HANA in place, without needing to navigate to the SAP S/4HANA system where the task (work item) originated. This means that users can look at details of a work item such as its line items, comments, and attachments immediately, without delay. This kind of instant availability is an important part of good usability.

If you are not familiar with the SAP Task Center, have a look at this blog post to get an overview:

New SAP Fiori launchpad capabilities


Reducing the number of clicks to get something done is always a good idea, and with this release we have made improvements which will save time for users. We have also introduced a number of new features for administrators, to make their lives easier.

Search field visible and centered


The search field is now always open and placed centrally at the top of the screen, so that you can type your search term directly, without first having to click on the search icon. This is available for all the supported themes, as you can see in Figure 3:


Figure 3: Search field visible and centered, for all three themes shown – from top to bottom: Morning Horizon (preview), Quartz light, Belize light.


The search field is visible in the header bar, so not only on the launchpad pages but also for application screens, as you can see in Figure 1. If the window is less than 1440 pixels wide, the search field is collapsed, as you can see in Figure 2. In this case, users will need to first click on the search icon before entering their search term (or alternatively resize the window).

Add tiles directly to My Home


The My Home space and page is purely for personalizing the start page: users have full control of what appears there, and how they want to group their favorite tiles and links into sections. Until now, if personalization of the launchpad has been switched off, users needed to use the App Finder to add tiles to My Home. Now, even if personalization of pages is switched off, users who see a tile on one of the launchpad pages can directly add that tile to their My Home page, by first selecting “Edit Home Page” in the user actions menu, and then using the context menu on the tile, and choosing Add to My Home.

Figure 4 shows the full menu available to users if personalization is switched on; if personalization has been switched off, the only option provided by the tile’s context menu is Add to My Home.

Figure 4: Users can add tiles directly to their My Home page from other pages.



Making it easier to manage your spaces and pages and launchpad content


We have introduced a number of improvements for administrators with this release, in addition to the above sort priority for spaces. The first three listed here were already introduced with Support Package 1 of SAP Fiori front-end server for SAP S/4HANA 2021, and hence with SAP S/4HANA 2021 Feature Pack 1:

  • Wide tiles are now supported, so that administrators can use these to highlight specific applications, or to provide more space for information. Users can also choose to convert tiles to wide tiles via personalization.

  • Easier migration from classic home page to spaces with the new app Create Launchpad Pages from Groups, which allows you to search for groups by group ID, group title or role, then check the content of the groups and add groups to pages. You can remove and reorder sections on the to-be-created page directly in the app before creating the page. Note that this app is only available for on-premise or private cloud customers, not for SAP S/4HANA Cloud.

  • The new report to analyze launchpad content (transaction /UI2/RSP_LIST) gives you details about roles, spaces and pages. It is also only available for on-premise or private cloud customers. Two prominent use cases for which it helps are:

    • Identifying roles without any assigned spaces.

    • Analyzing where tiles are used.



  • SAP-delivered spaces and pages can be copied and used productively: up until now we recommended that the SAP-delivered spaces are used for discovery and testing, whereas spaces for productive use should be created from scratch. Now, with SAP Fiori front-end server 2022 for SAP S/4HANA, if you find the SAP-delivered spaces meet your needs or are a good starting point, you can copy them and use these copies for productive use. This is made possible technically because tiles are now referenced by their technical catalog ID in all cases.

  • Usage of tiles and target mappings in pages now shown in the enhanced SAP Fiori launchpad Content Manager. When maintaining catalogs, you can display the usage in pages for tiles and target mappings. Also, when deleting a tile or a target mapping it now checks whether it is used in pages and groups and produces a warning if it still being used.

  • Assign a catalog directly to a role in the enhanced SAP Fiori launchpad Content Manager.

  • Adapt app descriptor items (such as tile titles) in SAP technical catalogs in the launchpad app manager, so that you can adapt SAP-delivered content and still use the SAP-delivered business catalogs.

  • A number of content exposure enhancements, including a dedicated preview area.


You can find out more about the above enhancements, as well as further enhancements to the launchpad, in the documentation:

Partner namespaces supported for spaces and pages


Partners can create spaces and pages in their registered partner development namespace. If a partner has provided a customer with spaces and pages, customers will find them in the Manage Launchpad Spaces app and in the Manage Launchpad Pages app in the list shown when selecting the Predefined tab. This feature was also already introduced with Support Package 1 of SAP Fiori front-end server for SAP S/4HANA 2021, and hence with SAP S/4HANA 2021 Feature Pack 1.

For more information on development namespaces, have a look at service.sap.com/namespaces.

Availability with SAP Fiori front-end server 2022 for SAP S/4HANA


All the above SAP Fiori launchpad capabilities come with the SAP Fiori front-end server 2022 for SAP S/4HANA. This means that it is also available for SAP S/4HANA 2021 and SAP S/4HANA 2020, as well as for SAP Business Suite backend systems via a hub deployment. For more information, have a look at this updated blog post:

UX Innovations for Applications


It’s the small details that make or break a good user experience, so we continue to focus on making improvements in our user experience details based on user feedback.

First, let’s look at how we are supporting collaboration via Microsoft Teams integration and via Google Workspace integration. Next, we’ll look at some selected improvements provided by our underlying UX technologies SAPUI5, SAP Fiori elements, SAP GUI for HTML, as well as Situation Handling. These technologies bring improvements to SAP S/4HANA users wherever they have been adopted, as well as enabling you to improve your own custom apps’ user experience.

Google Workspace integration


Most people are used to being able to export data shown in a table to Microsoft Excel. Now, users of SAP S/4HANA 2022 can also export data from tables shown in the UI to Google Drive and display the data in Google Sheets. This applies to both SAPUI5 based UIs as well as Classic UIs.

In addition, we now support uploading financial general journal entries from Google Sheets into SAP S/4HANA. To do this, users first need to download a template to Google Workspace. They can then use Google Sheets to open the template and enter their data. Once completed, the data can be uploaded to SAP S/4HANA where it gets posted by the application.

Note that this functionality leverages the SAP Document Management Service, integration option, which requires an additional license.

Watch it in action in this two-minute video – taken using an SAP S/4HANA Cloud 2208 system, but showing the same user experience as provided by SAP S/4HANA 2022 when using the Horizon preview:


Video 2: Google Workspace integration, showing export to Google Sheets as well as uploading of financial general journal entries.



Improved menu for classic UIs


We have now made it quicker to access the menu in classic UIs (those based on SAP GUI for HTML). In the most compact mode, the menu is now clearly visible as the first button on the top left. Users can choose to expand the menu for even faster access, so that they can access the various parts of the menu directly, without first clicking on the menu drop-down. Figure 5 shows these two options:


Figure 5: Faster access to the classic UI menu. The upper image shows the menu collapsed, where it is available via the menu drop-down selection. The lower image shows the menu expanded so that all the entries are in a separate row at the top of the screen, reducing the number of clicks needed.



Further improvements in Classic UIs in the browser: block selection (“Ctrl-Y”) and access keys


Users who previously used an SAP ERP system loved the copy and paste feature provided by the Ctrl-Y shortcut in SAP GUI for Windows, enabling them to copy and paste rows and columns out of tables. Now, we provide this capability also in web browsers (SAP GUI for HTML) – simply by using the mouse to define the block to be selected.

Another enhancement which helps users work faster is quick navigation to actions on the screen via the keyboard using access keys, so that they have this option in addition to the option of moving the mouse to the relevant UI element. Pressing ALT on a Windows computer or Cmd + ALT/Option on MacOS results in the letter of the access key being underlined in the respective UI element.

Change order of fields in “Adapt Filters” dialog


Users can now change the order of the filters, by selecting Adapt Filters and then moving the filter up or down to change its position, as shown in Figure 6. This functionality provided by SAPUI5 is available to all applications which use it, without adoption effort by developers.


Figure 6: Users can use the up or down arrows to change the order of filters in filter bars.



PDF export from tables


To create unmodifiable snapshots of data shown in tables, for example financial postings, the SAPUI5 tables now provide a powerful export to PDF feature. Users can choose to include the filter settings, whether to use archive format, the paper size and orientation, font size, as well as advanced features such as enabling accessibility, fit to page, or enabling the user to sign the document.


Figure 7: Users can export data from SAPUI5-based tables to PDF, with multiple options as shown here.


This functionality provided by SAPUI5 is also available to all applications in SAP S/4HANA which use tables, without adoption effort by developers.

Using relative dates for filtering now available for single date fields


Up until now, users could only define relative dates such as “today” or “yesterday” and save these filters for filter fields which supported date ranges. Now, they can also define these kinds of relative dates for single input fields, such as “Created on” or “Key Date” as shown in Figure 8. In addition to single relative dates, they can also select dynamic ranges such as “Year to Date”, or today plus/minus N days, where the user chooses how many days they want. This is particularly helpful when reusing these filters regularly. Otherwise users would have to manually redefine the filter every new day, for example by selecting yesterday’s date.

Due to this enhancement, SAPUI5 now supports all such use cases: relative dates for single date interval fields, single date fields, and single date time interval fields.


Figure 8: The Dynamic Date Range control allows users to define relative dates for single input fields now.



Key user adaptation with draft and versioning


Key users can adjust the UI of SAPUI5 based applications very easily using the Key User Adaptation functionality provided by SAPUI5 flexibility in the SAP Fiori launchpad. Now, we make this more powerful by supporting drafts and by providing versioning. This means that all the changes a key user makes are immediately stored as a draft version, so they can’t lose their changes if the browser window is closed by accident. When returning, they can continue where they left off. Also, versioning is now available, so key users can save different versions of an app, revert to a previous version, and publish a dedicated version to the productive system. Find out more about these new features in this blog post:

Faster data entry via automatically created empty rows


Users are often under time pressure to get all their work done, so optimizing efficiency is important. We have now introduced a feature in SAP Fiori elements which automatically provides a number of empty rows so that users can use the keyboard to quickly add new rows into a table. Whenever they enter data into a row, a new empty row is created; typically, the user will always see two empty rows. Figure 10 shows an example for entering payment approvers for a new bank account. You can see the respective empty rows for the list of payment approvers as well as the list of multi-language descriptions.


Figure 9: Faster data entry via the keyboard is enabled by providing a small number of empty rows right from the beginning, as shown here for the list of payment approvers and for the list of multi-language descriptions in the Bank Account application.



Mobile apps with Horizon


Not only SAP Mobile Start supports Horizon, so do the native mobile apps. Figure 10 shows the SAP Service and Asset Manager app as an example. As you can see, the native app runs not only on smart phone but has also been designed to run on tablets. It is available for Android and iOS.


Figure 10: SAP Service and Asset Manager native mobile app supports Horizon, and runs on tablets as well as smart phones.


You can see further examples of mobile apps with Horizon in this blog post:

Situation Handling


Situation Handling is a simple yet powerful approach for using AI (artificial intelligence) to help users deal with business situations which occur infrequently or unexpectedly. If you are not familiar with Situation Handling, we now provide a dedicated SAP Community topic page for this:

With SAP S/4HANA 2022 we have enhanced the message-based Situation Handling to support the triggering of notifications. We also provide two new scenarios for message-based Situation Handling: one in Settlement Management and one in Central Finance.

Here is a complete list of the Situation Handling use cases provided by SAP S/4HANA 2022 – at the time of writing we have 96 overall:

Customers and partners have often asked whether they can model their own Situation use cases: I’m glad to say that this is possible now. To find out more, have a look at these blog posts:


SAPUI5 and SAP Fiori elements now support Situation Handling indicators in list reports and object pages (read this post for more details). If an item or an object has a situation associated with it, this can be made visible to a user via the indicator in the header of the object page, or in the line in the list, as shown in Figure 11. Clicking on the indicator brings up a short summary pop-over, from where users can navigate to the details of the situation. Note that this feature requires adoption by the application providing the list reports and object pages, so today it is available to you for your own development.


Figure 11: An example of a Situation Handling indicator in a list, along with an example of the pop-over with a short summary of the situation.



UI development made easier – web and mobile


Web development


Over the past year or so, in addition to the many smaller improvements, we have made two major improvements to make the life of web developers easier with SAPUI5 and SAP Fiori elements:

  • supporting TypeScript, so that developers benefit from a typed programming language which is not provided by JavaScript, and

  • the new Flexible Programming Model, leveraging OData version 4.


To learn more about using TypeScript, have a look at this blog post:

Flexible Programming Model


We have made it possible now to mix SAP Fiori elements and SAPUI5 freestyle development via the Flexible Programming Model, which gives you the best of both worlds in cases where the out-of-the-box SAP Fiori elements floorplans don’t quite fit your needs. Figure 12 shows how you now have a continuum in the tradeoff between efficiency and flexibility, rather than having an either/or decision about whether to use SAP Fiori elements or SAPUI5 freestyle development.


Figure 12: The flexible programming model brings SAPUI5 and SAP Fiori elements together.


The flexible programming model leverages OData v4, and makes it easy for developers to add standard building blocks provided by SAP Fiori elements and/or SAPUI5 controls or custom code to the standard floorplans provided by SAP Fiori elements, such as an Object Page or List Report. Alternatively, if you want more flexibility regarding the layout, you can define your own layout and integrate standard building blocks into them, meaning that you get the functionality provided by the building block without having to code it yourself. Building blocks can be as simple as a field or a filter field, or more complex like a form, a filter bar, a table or a chart.

If you are not sure whether you should build your SAP Fiori app using SAP Fiori elements, SAPUI5 freestyle, or using a mix of both with the Flexible Programming Model: this blog post tells you which approach to use for each case and which SAP Fiori tools extensions to use at what point in the development process:

You can look at the available extension points provided by SAP Fiori elements, as well as the list of building blocks amongst other features in the

SAPUI5 Accessibility Guide


Inclusiveness is important to us. This new guide provides in-depth information with examples about web accessibility, whether you are a control or application developer, or a business user searching to learn more about web accessibility in the SAPUI5 area. Have a look here:

Configuration of the RichTextEditor's toolbar


Using SAPUI5 1.102, application developers can customize the toolbar of the RichTextEditor control. With this, applications can tailor the experience for their respective scenarios. See the details in the

Visualization of IANA Time Zones for Date/Time Data


SAPUI5 1.102 supports the visualization of IANA time zones for date/time data. The time zone can either be specified via the application's configuration or backend annotations. See details in

Mobile development


We are continuously evolving the capabilities of our mobile design and development kits, which now provide a rich set of new components supporting Horizon. Particularly helpful for developers is the completely new SAP Fiori Mentor App, available for Android and for iOS.

The app now features the new Morning Horizon theme and provides you with information on new UI components, enhancements, and UI patterns covering the feature set of the SAP BTP SDK for Android 4.0 and iOS 7.0 releases.


Figure 13: SAP Fiori Mentor App for Android and iOS.


To find out more, check out these sources:

Further information


To find out all the details about what’s new with each release of the ABAP platform, have a look at the

My previous blog post in my SAP Fiori 3 series gives a thorough overview of the relevant places to look for what’s new in SAP S/4HANA, SAP Fiori launchpad as well as for SAP Fiori design and SAP Fiori tools, SAP Fiori elements and SAPUI5:

General information on SAP Fiori


I am repeating these essential links here for your convenience:

Final words


I am looking forward to hearing from you on the community about your experiences with SAP Fiori. Please continue using the community to share your learnings and best practices, either by posting articles yourselves or via comments on this post. You can also follow me in the community if you want to be notified about further similar updates from me.
15 Comments