SAP Fiori 3 Update: Further Evolution with SAP S/4HANA Cloud 2108
The details matter when providing a great user experience! With this evolutionary step of SAP Fiori for SAP S/4HANA Cloud 2108 we have focused on a number of these details that make a difference: guiding first-time users with an SAP Fiori launchpad quick tour, providing a standard My Home space for users to personalize, performance improvements, and a number of individual improvements to the overall experience for both SAP Fiori apps and classic UIs, such as optimizing table column widths. Also, I’ll show you some new native mobile controls for SAP Fiori, and give you a brief outlook on a major user experience innovation planned for mobile users of SAP S/4HANA Cloud 2108 later this year.
This post covers these topics:
- UX improvements for SAP Fiori launchpad including app-to-app navigation
- UX improvements for SAP S/4HANA applications
- UX improvements for mobile: tablets and smartphones
- Making web development easier: SAP Fiori tools, SAP Fiori elements, and SAPUI5
- How to use the SAP Road Map Explorer for SAP Fiori
- Further information
UX improvements for SAP Fiori launchpad including app-to-app navigation
Quick tour for first-time users of spaces and pages
Having talked to many users of the SAP Fiori launchpad, we discovered that they were often not aware of the generic features offered by the launchpad to make their lives easier. To help improve this, we have now introduced a quick tour for the SAP Fiori launchpad, which is automatically started the first time a user logs on to SAP S/4HANA Cloud 2108. Users can browse through pages in the quick tour which describe the main features, as well as showing them directly with animated diagrams (GIFs). This helps users to get an idea of how useful these features are, and how they can start using them immediately. Watch this video to see what it looks like:
You can always return to the quick tour via the Help icon at the top right of the screen, as shown in the video.
A My Home space giving users their own personal start page
A popular feature with users of the classic home page is the ability to define one or more groups with their favorite tiles, i.e. applications, so that they are immediately available after logging in to the system. Starting with SAP S/4HANA 2108, we provide a My Home space as a standard feature, providing such a start page for users, with no effort for administrators. Have a look at this brief video to see it in action:
To help users of the classic home page move to spaces and pages, we provide a feature which lets them automatically import the groups that they have personalized in the classic home page. Users select which groups they want to import, and a section is created in the new My Home for each of these groups in the classic home page. This is shown in the video, and also in the example below:
Administrators can decide via a new setting whether they want to offer My Home to users. Users are able to personalize their My Home, even if launchpad personalization has been turned off by the administrator. This can reduce IT support efforts, since the pages defined by administrators cannot be changed by users. Offering My Home gives users the option of defining their own favorites and laying them out as they wish, in any number of sections on My Home.
Performance: improving back navigation from one application to another
A good user experience rests on having good performance, i.e. fast response times. We have made a significant improvement with SAP S/4HANA 2108 by reducing the response time for navigating back to the previous page to almost zero. When talking to users, we realized that it is often frustrating if they click on a link to look at some details, and then when going back to the application which they started from, they have to wait for the whole application to be loaded again. Often enough, no data has changed, so there is no need to reload the application; and even if a user action has caused a change, it is often fine for this not to be shown immediately, since in such cases users can press the “Go” button to refresh the data.
Now, with SAP S/4HANA 2108, we no longer reload the application when navigating back, so going back is almost instantaneous — making the system feel much faster to users. The more powerful the initial application is, i.e. the more data it collects, the longer it takes to load, and the bigger the benefit of this new approach. Overview pages are a good example for this: you can now drill down into a detail, and then return quickly to the overview page to continue from there.
Another advantage of this is that users return to the same place in the application where they started from, i.e. the same place within a long list, or the same place in a hierarchical structure.
Note that in some cases, where it is important that the application a user is returning to reflects changes which a user has just made, this new feature is switched off, so that the application data is reloaded; however, these are a small minority of all applications.
Content federation for SAP S/4HANA Cloud with SAP Launchpad service
Larger customers who have many systems in their landscape would like to give their users one central entry point to access all the applications they need for their work. To this end, SAP introduced the SAP Launchpad service in the cloud end of last year, running on SAP Business Technology Platform (Cloud Foundry). This service is continuing to evolve over time and to extend the number of systems it supports. SAP S/4HANA Cloud 2108 now supports content federation with the SAP Launchpad service, meaning that administrators can select roles for exposure to the SAP Launchpad service, and hence give its users access to the SAP S/4HANA Cloud content assigned to the respective role/s. For more information, see Expose Launchpad Content to Launchpads on SAP BTP — SAP Help Portal.
UX improvements for SAP S/4HANA applications
With SAP S/4HANA Cloud 2108 we have focused on a number of user experience details which make a difference.
Column width optimization
Up until now, SAPUI5 tables have made each column as wide as defined technically by the underlying field — so if a field for an amount is defined as being up to 30 characters wide, that is the width which has been displayed. However, it turns out that often the actual data contains far shorter entries, resulting in a lot of white space. Also, in cases where the field shows not only the ID, which is short, but also the description text in brackets, the columns were not wide enough, resulting in text being cut off. You can see an example of this in the next diagram — along with how we now have automatically optimized the column width:
Column width optimization takes into account the size of the data actually contained in the table, and either makes the columns wider, as shown above, or narrower, to reduce white space. Getting this to work with good performance was in fact quite an engineering challenge, so kudos to our engineering team for getting this to work so well!
We have also optimized the SAPUI5 responsive table, i.e. the table which works well on both desktop as well as mobile phones and tablets, so that users can resize the columns themselves. They can also automatically optimize column widths based on the data shown on the screen by double-clicking on the column separator.
Data loading (no need to click “Go”)
Listening to our users again, we now reduce the number of clicks needed when first opening SAP Fiori apps with overview pages or lists: the data is automatically loaded, rather than presenting users with an empty page so that they have to then press the Go button. This has been implemented almost everywhere within SAP S/4HANA Cloud, the only exceptions being some selected cases where this might cause too much load on the database, i.e. where users should first define some filter criteria before pressing Go.
Relative date selection / Semantic date selection
SAP Fiori elements now support the selection of relative and semantic dates, meaning that you can define a filter with a date like “today” or “yesterday”, or specify the “last X weeks”. This makes users’ lives much easier, since they don’t have to continuously change the filter date day by day. Note that this only works for date fields where the application has enabled this kind of dynamic date selection. Here you see a drop-down list showing some of the options provided:
Time Picker
Don’t you also get annoyed when you just get offered a drop-down list of hours and minutes to select a time of day? With SAP S/4HANA Cloud 2108 we now offer a much better and more intuitive experience:
Aligning quantities and amounts with different decimal places and different length units
Modern UIs have quantities and their units of measure in one field, or amounts and their currency code, for example “120.32 KG” or “12,000.00 USD”. However, listing these in a table is challenging with different length units or currencies, and different numbers of decimal places. Users want the unit of measure to be right-aligned in the table, and at the same time have all the numbers aligned so that the decimal point is aligned vertically. Although this use case does not affect many users, those affected take it seriously — as have we! With SAP S/4HANA Cloud 2108, we provide a nice solution for this, as you can see in the next two examples:
In some cases, customers need to define currency codes with four or even five characters: this is also now supported while ensuring that the amounts line up on the decimal point.
Key users can now define views for sharing, also role-specific
SAP Fiori offers users powerful filtering capabilities for lists and overview pages. Wouldn’t it be good if experienced users, so-called key users, could define filters for their team members and share them? This is now possible with SAP S/4HANA Cloud 2108: key users can use UI adaptation to define filters and save them as views, and share these with everyone, or only for specific business roles. In other words, all users assigned to these roles would then be able to pick these views when working with these lists (built using the SAPUI5 smart filter bar). Here you see what it looks like for a key user, assigning this view which she has named “mk_global” to the role “ZMK_FIORITEST”:
Smart filter bar: highlighting of type-ahead suggestions
Regarding the filter bar, we have also improved the type-ahead so that the text you have entered is highlighted in the type-ahead drop-down box, as you can see here, where the user has entered “fr” in the supplier field:
Type-ahead search not only searches through the name of the supplier, but also through the other relevant fields, as shown in the example above.
Value help (search help) improvements for all UIs in SAP S/4HANA Cloud
As I mentioned in my previous blog post SAP Fiori 3 update: evolution continues, with flat tiles and more — have a look, and learn how to find what’s new, we have started on a journey to further align the UI technologies used in SAP S/4HANA, i.e. SAP Fiori apps based on SAPUI5 and SAP Fiori elements, SAP GUI for HTML and Web Dynpro, in order to provide a more seamless user experience within SAP S/4HANA.
One significant achievement here is the new value help, also known as search help. Value help does just that: it helps users find the value of an ID to enter into a field, for example a material number or a customer number. Not only have we improved this for SAP Fiori apps, as introduced with SAP S/4HANA Cloud 2105, we have now aligned the design of both the classic UIs SAP GUI for HTML and Web Dynpro to follow the same improved design. Have a look at this two-minute video to see the new value help for SAP Fiori apps as well as for SAP GUI for HTML:
Further improvements to the classic UIs
In addition to the redesigned value help, we have introduced further improvements to SAP GUI for HTML:
- We offer an intuitive, mouse-based copy & paste for ABAP lists — without users having to use the “Ctrl-Y” shortcut introduced with SAP GUI for Windows. Just mark the area you want to copy with the mouse, and use “Ctrl-C” to copy into the clipboard.
- Keyboard support for ABAP lists allows users to use the typical keyboard navigation keys for moving around the ABAP list in the browser.
- The ABAP list font size has been adjusted to be the same size as used by the other SAP Fiori apps (SAP Note 3047535) for the Quartz theme, the theme introduced with SAP Fiori 3.
- The footer toolbar is now visually more appealing, sticking to the bottom of the screen rather than floating above it. Also, we have optimized the space above the footer toolbar so that more data is shown and less white space.
- Improved responsiveness to different sized screens and windows: we now have a stretch mode, introduced already earlier this year, which means that tables expand to use the full width of the screen, as you can see below. In addition, we have optimized the left and right padding to better adapt when users make the window narrower.
The following image shows an example for stretch mode, where the whole table is now displayed, without needing to scroll to the right. Also, you can see at the bottom the new footer bar design, in this example containing two action buttons Save and Cancel at the bottom right of the screen.
UX improvements for mobile: tablets and smartphones
All users can now use tablets to work with SAP S/4HANA Cloud: not only the SAPUI5 based applications, but also the classic UIs have been optimized to support touch on tablets, for example allowing users to scroll naturally, without having to use scroll bars.
SAP Mobile Start coming soon — a major UX improvement for mobile users
Mobile users are confronted with many different native and web applications scattered across their mobile devices: it is difficult to find the right one and easy to overlook important alerts. Also, critical business decisions are not being made due to users being unaware of them, since they are increasingly away from their desk ensuring business continuity.
SAP Mobile Start addresses these by providing the mobile entry point to the intelligent enterprise, with these benefits:
- Mobile access to the intelligent enterprise, its applications (native or web), web content, data or SAP S/4HANA notifications to quickly address business issues.
- Consumer-grade user experience and superior performance, designed for an intuitive and personalized native user experience, with enterprise grade capabilities. The first version is planned for iOS with deep integration, leveraging Apple Spotlight Search, Widgets and native Notifications.
- Easy consumption, as available through the SAP Launchpad service.
Although not available yet, it is currently planned to become available for SAP S/4HANA Cloud 2108 in the near future — so keep your eyes out for the announcement!
Making native mobile development easier
We continue to evolve SAP Fiori for iOS and SAP Fiori for Android, providing controls in the respective SDKs to make it easier to develop native mobile apps.
SAP Fiori for iOS
Here you see some of the recently introduced new controls for iOS:
SAP Fiori for Android
Here you see some of the recently introduced new controls for Android:
Making web development easier: SAP Fiori tools, SAP Fiori elements, and SAPUI5
The improvements outlined here are available with SAPUI5 1.90 and the latest SAP Fiori tools version.
SAP Fiori tools and SAP Fiori elements
SAP Fiori tools can be used via the SAP Business Application Studio in the cloud, or locally via Microsoft Visual Studio code. Briefly, here are the most important new features:
Reuse components can now be added to projects, allowing developers to use an existing library in their project.
Guided Development now allows you to add custom columns to responsive tables. This is one of several new guides that we add to SAP Fiori tools each quarter.
The Page Editor now supports the ability to add, move, and delete table columns for OData v4 applications.
Migration of SAP Fiori projects from SAP Web IDE into SAP Fiori tools is now supported.
For SAP Fiori elements, we have continued with numerous improvements in OData v2 support, and a particular focus on expanding OData v4 capabilities. The SAP Fiori app Create Sales Orders shows the power of using SAP Fiori elements with OData v4, as outlined in this series of blog posts, the latest of which is:
In case you haven’t already seen this or indeed taken the course: this summer we introduced a very popular and successful openSAP course, which is a must-do for anyone interested in building custom SAP Fiori apps (weeks 1–3) or extending SAP-delivered SAP Fiori apps (week 4):
- Developing and Extending SAP Fiori Elements Apps (openSAP course).
SAPUI5
Many of the user experience improvements mentioned above for applications come directly from improvements in the underlying SAPUI5 controls, such as:
Column width optimization and responsive table with end user resizing and double-click support. Find out more in this community blog post: UI5ers Buzz #58: Column resizing & Auto pop-in feature in Responsive table
Relative date selection / semantic date selection.
New time picker.
Aligning quantities with different decimal places, different length units. Find out more in this community blog post: UI5ers Buzz #59: UI5 Custom Currency and Unit of Measure for OData V2 smart controls.
Smart control showing ID + name.
Key user-defined variants, also possible to be defined for specific roles.
Smart filter bar: highlighting of type ahead suggestions.
Value help.
- Find out more in this community blog post:
Improved UX Design of the Value Help Dialog. - Also related, as shown in the above video, is the ability to display recently used values in a drop-down list when clicking on a field to enter a value. Find out more:
UI5ers Buzz #57: Recently Used Values History for Smart Controls.
In addition to these, we continue to place a strong emphasis on inclusive design, which for SAPUI5 means supporting accessibility. We have:
- Improved accessibility for UI5 Web Components.
- Support JAWS 2021 as a test environment for screen reader tests.
Recently SAPUI5 was Topic of the Month in the SAP Community; in case you missed them, here are the highlighted blog posts, showing the direction of SAPUI5 for SAP Fiori app development:
- Scale and Innovation: How we evolve our UI technology
- UI5 Controls and Web Components: The building blocks of a modern enterprise UI
- Smart controls — A journey through history to create a perspective on future innovations
- SAPUI5 Flexibility — The Journey Continues
How to use the SAP Road Map Explorer for SAP Fiori
The SAP Fiori road map is available via the SAP Road Map Explorer, and now covers the following business capabilities and products:
Business Application Entry Point, covering the products which provide the SAP Fiori launchpad user experience:
- SAP Fiori front-end server for SAP S/4HANA
- SAP Launchpad service
Native Mobile App Development, covering
- iOS and Android SDKs provided by SAP Mobile Services
SAP Fiori App Development, covering
- SAP Fiori tools (with SAP Business Application Studio)
User Experience Consistency, covering
- SAP Fiori elements, i.e. that part of the SAPUI5 product.
User Interface Controls, covering
- SAPUI5 reusable controls
User Interface Core Framework, covering
- SAPUI5 core framework
User Interface Flexibility, covering
- SAPUI5 UI flexibility features (with SAP Business Application Studio where relevant)
User Interface Open Source Development, covering
- e.g. UI5 Web Components, UI5 Tooling, documentation etc.
Note that you can change the selected quarters and include some which lie in the past, so that you get an overview of recently delivered innovations too.
We also provide a holistic overview in a storyboard, which replaces the previous SAP Fiori road map presentation — this can be found under “Related Content”, or directly using the link listed under (2):
1. SAP Fiori in the SAP Road Map Explorer
2. SAP Fiori road map story board
3. ASUG webinar on SAP Fiori road map (July 29th, 2021).
Further information
To find out all the details about what’s new with each release, have a look at the relevant What’s New documentation. 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:
Here is a link to the What’s New in SAP S/4HANA Cloud 2108 — SAP Fiori launchpad section.
Although I haven’t featured Situation Handling this time, we continue to extend the number of Situation Handling use cases in SAP S/4HANA Cloud: today, 94 are available, as you can see in the documentation:
To get an overview of the SAP Fiori 3 target design, and look at the various steps we have delivered up until now, have a look at these previous blog posts:
- First parts of SAP Fiori 3 available for on-premise customers — SAP S/4HANA and SAP Business Suite;
- Next step of SAP Fiori 3 available: Quartz Dark theme
- Further step of SAP Fiori 3 available: Spaces and Pages
- SAP Fiori 3: Multi-page spaces now available, and much more…
- Major next steps…for SAP S/4HANA on-premise — spaces, central entry point and more
- SAP Fiori 3 update: evolution continues, with flat tiles and more — have a look, and learn how to find what’s new
General information on SAP Fiori
I am repeating these essential links here for your convenience:
- SAP Fiori product page.
- SAP Fiori topic page in the SAP Community.
- openSAP course SAP Fiori Overview: design, develop and deploy.
Final words
I am looking forward to hearing from you on the community about your experiences with SAP Fiori — do use the community to share your learnings and best practices, either by posting articles yourselves, or via comments on this post.
