What’s New

Updated: August 15, 2023
SAPUI5 Version 1.116

What’s New in Guideline Version 1.116

Intro

This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.116.

General

Topic Update Topic Link
Navigation Structure The content for Designing Intelligent Systems has moved.

You’ll now find it in the top-level navigation above “General Patterns”.

 Designing Intelligent Systems

SAP Fiori Design System

Topic Update Topic Link
Multiple-Device Support: Responsive vs. Adaptive
  • If you are using desktop controls, replace them with responsive controls for a mobile device. However, we do not recommend using the sap.ui.commons library.
  • Analytical table, tree table and grid table are not fully responsive. They are available only for desktops and tablets, so when you use them you will need to take an adaptive approach by offering an additional UI for smartphones.
 Multi-Device Support: Responsive vs. Adaptive – Implementation

General Patterns

Topic Update Topic Link
Message Handling – Processing Multiple Items Partial Processing Scenarios

  • Before processing, if the action cannot be applied to one or more items, a warning dialog asks the user to decide whether to process the eligible items.
  • Processing is blocked because one or more items require the user to decide to continue with processing the items or to skip them.
    There are two cases:
    • One warning. The user can ignore the warning and process the item, or skip the item.
    • Multiple warnings. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.
 Message Handling – Processing Multiple Items – Partial Processing

Layouts and Floorplans

Topic Update Topic Link
List Report Floorplan

Worklist Floorplan

 The grid table, analytical table, and tree table are supported on desktop and tablet devices only so you cannot use them for mobile use cases. Instead, take an adaptive approach:

  • Create a new Fiori application with reduced complexity, not an exact match of the desktop application.
  • With the new application, address the most important use cases for users in a mobile context. The responsive controls (responsive table, list or tree,) or a relevant control for your use case (for example a chart or the category navigation pattern) may suffice.
 List Report – Responsiveness

Worklist Floorplan – Responsiveness

UI Elements

Topic Update Topic Link
Analytical Table

Grid Table

Smart Table

Tree Table

 The grid table, analytical table, and tree table are supported on desktop and tablet devices only so you cannot use them for mobile use cases. Instead, take an adaptive approach:

  • Create a new Fiori application with reduced complexity, not an exact match of the desktop application.
  • With the new application, address the most important use cases for users in a mobile context. The responsive controls (responsive table, list or tree,) or a relevant control for your use case (for example a chart or the category navigation pattern) may suffice.
 Analytical Table (ALV) – Responsiveness

Grid Table – Responsiveness

Smart Table – Components

Table Overview – Desktop-Centric Tables

Tree Table – Responsiveness
P13n Dialog The P13n Dialog is now based on a new control, sap.m.p13nPopup. You can use it for personalization attributes smart charts, as well as tables.

For smart charts it can include a Chart tab to allow users to set the visibility of chart dimensions and measures, in addition to the Sort and Filter tabs.

The previous sap.m.P13nDialog control has been deprecated.

 P13n Dialog

SAP Fiori Elements Framework

Topic Update Topic Link
Table Toolbar With SAP Fiori elements for OData V4, you can order the toolbar actions according to their importance, starting with the most frequently-used action and ending with the most seldom-used action, regardless of whether the action is a custom or standard one. Table Toolbar – Order of Toolbar Actions
Table Features On desktop applications, all table columns display tooltips, based on the text in:

  • Common.QuickInfo, when it’s visible
  • The column label, in all other cases

Tooltips are available only in desktop applications because users must hover their mouse on the column header to see them.

 Table Features – Tooltips on Column Headers
Table Rows When the object page is in create or edit mode, responsive tables and grid tables now automatically display one empty row where the users can enter data for subobjects, instead of two.

After they start to enter data in one field in the empty row a new empty row is added underneath it so they can continue data entry for either one column or one row at a time.

  Table Rows – Empty Row for Data Entry

About Guideline Updates

With each new guideline version, we deliver two types of update:

  • Updates to reflect new or changed UI controls available with SAPUI5.
  • Ongoing updates on how to best apply the SAP Fiori design (such as overarching concepts, floorplans, and additional decision support). These updates are introduced with a given guideline version, but are not necessarily dependent on a specific SAPUI5 version.

Note: Our policy is to update only the latest guideline version. If you are working with an earlier SAPUI5 release, also consider checking out the most recent guideline version to get the latest general guidance.