SAP Fiori is evolving continuously: sometimes with major innovations, sometimes with smaller ones. With the latest release the SAP Fiori launchpad brings us a further step along our SAP Fiori 3 journey by providing richer visualization options: flat tiles, and links now visualized as small tiles – available for SAP S/4HANA Cloud 2105 and SAP Cloud Launchpad service, amongst others. This post also highlights a number of other smaller innovations which have become available this year, and explains how you can best discover both smaller and larger innovations using the relevant What’s New viewers.
Figure 1: Users can easily personalize their tile sizes
This post covers new innovations in these areas:
- SAP Fiori launchpad
- SAP Fiori design
- SAPUI5
- SAP Fiori elements and tools
- Mobile SDKs: SAP Fiori for iOS and SAP Fiori for Android
- AI and Situation Handling
- UX consistency – across products but also across UI technologies in SAP S/4HANA
Before having a look at them: remember that when developing with SAPUI5 and SAP Fiori elements, you get the SAP Fiori design updates “for free”, built into the technology over time.
Also: let me remind you that Microsoft Internet Explorer 11 is no longer supported by the newer releases of SAP UI technologies and SAP products, as pre-announced in this blog post.
SAP Fiori launchpad evolution: different tile sizes, new user settings, finding what’s new
To help users fit more apps on a page and give them more flexibility, and also to help them to prioritize their work, they can now use flat tiles in spaces and pages in addition to the already available tile sizes, and additionally links are now represented as small tiles. Note that links in the classic home page are now also visualized in this way.
Figure 2: The top row contains standard 2×2 tiles, the second row contains a 4×1 and a 2×1 flat tile and the bottom row contains a small tile representing a link, showing the title and subtitle only.
This way users can personalize their pages to have their most important apps represented by larger tiles, the medium ones by flat tiles and the not so often used apps as links. This helps them organize their work, and also helps ensure that all their favorite apps are directly available without needing to scroll down the page.
Users can easily personalize their tile sizes, using drag & drop as well as the context menu, as you can see in this short video:
Administrators can also use these options when defining pages to be included in spaces.
Figure 3: The new context menu allows users or administrators to convert standard 2×2 tiles to flat tiles or to links.
Figure 4: an example for a page containing standard tiles, flat tiles and links.
Read more about this in the documentation Tiles, Links and Tile Sizes.
User settings for format of decimals, date and time
Customers have been asking for this for a while now, so I am happy to announce that the SAP Fiori launchpad running on ABAP, e.g. for SAP S/4HANA with an embedded SAP Fiori front-end server and SAP S/4HANA Cloud, supports this: users can set their preferred date and time formats via the user settings, which users access via the user actions menu. They can also choose the format for representing decimals in UIs.
Finding what’s new in the SAP Fiori launchpad
As I mentioned, we regularly provide smaller enhancements; let me show you how best to learn about these with each release.
SAP S/4HANA Cloud: look at the SAP Fiori launchpad section of the What’s New in SAP S/4HANA Cloud documentation – for example What’s New in SAP S/4HANA Cloud 2102 or What’s New in SAP S/4HANA Cloud 2105. These sections also include general improvements relevant for all or many applications launched via the SAP Fiori launchpad.
On-premise ABAP-based SAP Fiori launchpad: use the ABAP Platform What’s New viewer, and select the Capability “SAP Fiori launchpad” – for example for ABAP Platform 2020 FPS01.
SAP Launchpad service: use What’s New for the SAP Business Technology Platform, selecting the component “Launchpad Service” – or use this link directly. Since this cloud service provides continuous feature updates, we do not talk about releases, but rather you can specify date ranges for narrowing down your search, e.g. “from January 1st 2021”.
Road map: finding what is planned for the SAP Fiori launchpad
To get a complete overview of planned innovations for the SAP Fiori launchpad, across technology platforms, i.e. both for ABAP and for the SAP Business Technology Platform (SAP Launchpad service), look at Business Application Entry Point in SAP Road Map Explorer.
If you are only interested in the road map for the SAP Business Technology Platform, look at SAP Launchpad service in SAP Road Map Explorer.
SAP Fiori design guideline updates – and finding what’s new
The SAP Fiori design guidelines are at the core of the SAP Fiori design system. They are updated regularly, to cater for new use cases, or to provide improved guidance. Since SAPUI5 is our reference technology for SAP Fiori, the design guidelines are versioned using the respective SAPUI5 release: here are some of the highlights which came along with versions 1.86 and 1.88:
- New topic Best Practices for Designing SAP Fiori apps and a whole new section dedicated to SAP Fiori elements.
- New overview topic Layouts and Floorplans explaining how layouts and floorplans are used to build application pages, along with a quick feature overview When to Use Which Floorplan.
- Fully revised Which Selection Control Should I Use
- New Content Recommendations section for handling personalized content recommended by intelligent systems.
- Updated design for the Value Help Dialog.
- UX Illustrations – visual elements which can be paired with a text to make content more relatable and easier to understand – as supported by the new SAPUI5 IllustratedMessage control (see below).
- New general patterns for Delete Objects, Empty States as well as a new overview of General Patterns.
- New guideline topics for UI elements (see also SAPUI5 section below):
- New SAPUI5 controls: Expandable Text and Illustrated Message
- Invisible Message – for providing users of assistive technologies with information which are only shown visually, for example when a search result list appears.
- For existing SAPUI5 controls Smart Field, Smart Form and Smart List.
Finding what’s new in the SAP Fiori design guidelines
The What’s New section of the SAP Fiori design guidelines summarizes all the changes: new parts as well as updates to existing parts. A drop-down selector on the right of the page allows you to select the version of the design guidelines, to see what was new with that version. At the time of writing the latest version is 1.88.
Selected highlights of each new version, including example images, are published in blog posts by Susanne Wilding, for example:
- Now Available – SAP Fiori Design Guidelines Version 1.86
- Out Now – SAP Fiori Design Guidelines, Version 1.88
SAPUI5 – some highlights, and how to find what’s new
I would like to highlight two new SAPUI5 controls which have been recently introduced, to support an illustrated message and an expandable text. Also, we have made further progress with SAPUI5 flexibility, smart controls, accessibility and provide many new UI5 Web Components – below you’ll find more information on these.
New control: IllustratedMessage
An illustrated message is a recommended combination of an engaging illustration and a solution-oriented message. With its conversational tone this improves communication of an empty state compared to just showing a message alone. Figures 4 and five show some examples.
Figure 5: two examples for an illustrated message: on the left for a message showing an empty list of tasks, on the right for a session time-out.
Figure 6: an example for a search screen which does not yet show any results.
For more information, see the API Reference and the Samples.
New control: ExpandableText
The expandable text control allows you to display long texts in a smaller space, for example inside a table, list or form: users initially only see the first part of the text, but can easily see the full text either via a popover or by having the text expand in place, depending on what the developer has decided to offer. For more information, see the API Reference and the Samples.
Figure 7: an animation showing the two options for implementing an expandable text.
SAPUI5 flexibility, smart controls, accessibility and many new UI5 Web Components
Here are links to more information on what we have delivered recently:
- SAPUI5 flexibility: SAPUI5 Flexibility – The Journey Continues
- Smart controls: Smart controls – A journey through history to create a perspective on future innovations
- Several SAPUI5 controls now offer badges for displaying short and important information that attracts the user’s attention. Here are some samples:
- Accessibility enhancement: We have enhanced SAPUI5’s accessibility support according to the latest WAI-ARIA 1.1 specification.
- We also provide many new UI5 Web Components: have a look at the overall list of UI5 Web Components now available.
Finding what’s new in SAPUI5
What’s New in SAPUI5 is the place to go – you can select the version to find out what was new with it. At the time of writing the newest version is 1.88.
SAPUI5 in SAP Road Map Explorer gives you an overview of what is planned for the near future.
SAP Fiori elements and SAP Fiori tools updates and how to find what’s new
SAP Fiori elements & SAP Fiori tools give you the means to efficiently develop enterprise-grade apps leveraging the most commonly used floorplans – with good performance, design consistency and compliance with the latest design guidelines, while reducing the amount of frontend code needed to build SAP Fiori apps to zero or near-zero.
The three updates I would like to highlight here are: the significantly increased support for OData V4, the updates to our documentation, including new guided development, and the new SAP Fiori tools “super generator” now supporting both freestyle SAPUI5 apps as well as SAP Fiori apps:
OData V4
SAP Fiori elements floorplans for OData V4 have been continuously expanding features and functionality based on customer demand. This includes for example expanding on its flexible programming model to allow for creation of custom pages, sections, actions, columns and filter fields. In addition, SAP Fiori elements now supports OData V4 based cards in overview pages. Stay tuned for more.
The SAP S/4HANA development team have started building a new SAP Fiori app for creating sales orders using SAP Fiori elements with OData V4, check out these four blog posts (with videos) to see how powerful SAP Fiori elements now is – Journey of Managing Sales Orders in SAP Fiori:
Documentation with Guided Development
We have been listening to the feedback received from customers and partners and have been investing in improving our documentation. If you haven’t seen it yet, take a look at the SAP Fiori tools module ‘Guided Development’, which not only integrates documentation right into the development tooling, but also provides the ability to generate both XML and CAP CDS annotations.
Our intention is to cover the most commonly used features here and we are continuously adding or extending guides. But this is not all: we have also introduced the feature map as an easy entry point to finding supported features, controls and UI elements.
Last but not least we have started to include both CAP CDS and ABAP CDS code snippets into our documentation.
Application generator
With the latest release of SAP Fiori tools, we now have a single project generator that supports both SAP Fiori elements and SAPUI5 freestyle applications. This marks the beginning of our journey to harmonize the development experience between SAP Fiori elements and SAPUI5 freestyle. Find out more in this blog post:
Finding what’s new in SAP Fiori elements:
Look at the SAP Fiori elements section in What’s New in SAPUI5 to find out what’s new with the respective release; you can select the version you are interested in.
To find out what is planned, currently the most detailed overview is available via the SAP Fiori road map story board:
- Go to the Tools and Technologies section of the SAP Fiori road map story board.
- The SAP Fiori tools plans can also be found in the SAP Road Map Explorer by selecting SAP Fiori tools. Going forward we plan to also provide information on the SAP Fiori elements road map there too.
Mobile SDKs: New controls, and how to find what’s new
SAP Fiori for iOS
Here you see some of the recently introduced new controls for iOS:
Figure 8: New controls in the SDK for iOS.
SAP Fiori for Android
Here you see some of the recently introduced new controls for Android:
Figure 9: new controls in the SDK for Android.
Figure 9: new controls in the SDK for Android.
Finding what’s new for mobile SDKs for iOS and Android
AI (artificial intelligence) supported by SAP Fiori
In the last months we have been updating our design guidelines and technology to help you make your user experience more intelligent. This blog post gives you an overview:
UX consistency – across products and across UI technologies in SAP S/4HANA
We have made good progress in providing the SAP Fiori “look” to SAP products in the Intelligent Suite, and continue on our journey to provide a seamless user experience. In case you missed the web session in March, you can read the summary and access the recording here:
One UX for SAP S/4HANA
We have also 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 WebDynpro, in order to provide a more seamless user experience within SAP S/4HANA. Very first minor improvements have already been shipped with SAP S/4HANA Cloud 2102 and 2105, such as
- Using the ALV grid design instead of the older ALV list design for displaying lists and tables in many applications with Release 2102 (see Design Change of SAP List Viewer);
- Adapting the colors for those remaining ALV lists so that groups are indicated using a grey color instead of orange.
SAP Note 3034864 – User Experience Improvements in SAP S/4HANA documents all the improvements made here, no matter how small.
Larger changes which users are likely to notice are listed in the SAP Fiori launchpad section of the SAP S/4HANA What’s New documentation; we plan to write blog posts to highlight more significant changes, so stay tuned!
Further information
The SAP Fiori road map is now available via the SAP Road Map Explorer; we also provide a holistic overview via a storyboard, which replaces the previous SAP Fiori road map presentation – this can be found under “Related Content” after clicking on (1), or directly using the link listed under (2):
- SAP Fiori in the SAP Road Map Explorer
- SAP Fiori road map story board
- Webinar on SAP Fiori road map. This link always takes you to the most recent version.
