Updated: May 4, 2023

What’s New in Guideline Version 1.112

Intro

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

Information
We are currently reviewing our design guideline landscape. During this period, some content in this guideline may not reflect the latest SAPUI5 control implementations. To see the latest implementation status, please see the SAPUI5 samples.

General Patterns

Topic Update Topic Link
Forward The Forward pattern has been deprecated as of guideline version 1.112.

If you want to allow users to forward an object to other users, use one of the standard Share functions, such as Send Email.

SAP S/4HANA only:
For business workflows (approve, reject, forward), use the My Inbox app.

n/a
Using Tooltips

Wrapping and Truncating Text

SAP S/4HANA only:
You can opt to offer tooltips for column headers in tables.
Using Tooltips

Wrapping and Truncating Text

Layouts and Floorplans

Topic Update Topic Link
Overview Page Disclaimer added: integration cards can’t be used in the overview page floorplan. Overview Page – Cards

UI Elements

Topic Update Topic Link
Grid Table
Table Overview
The grid table no longer supports grouping. Grid Table

Table Overview – Grid Table

Lightbox If the image can’t be loaded, the lightbox control now shows an illustrated message instead of a message page. Lightbox – Error Handling
Message Page The message page has been deprecated. Use an illustrated message instead. n/a
Side Panel When to Use: Updated use cases:

  • Removed use case “comparison and analysis”.
  • Don’t use the side panel with an object page.
  • Don’t use the side panel for an additional table, but only to provide filters and layout properties for pivot tables.

Icon tabs: Icon tabs in the side panel don’t support semantic colors. Images were adapted accordingly.

Side Panel
Smart Table SAP S/4HANA only:
Tooltips are available by default for smart table column headers.
Smart Table – Column Headers

SAP Fiori Elements Framework

Topic Update Topic Link
List Report Header With SAP Fiori elements for OData V4, the Share menu includes Chat in Microsoft Teams, when the required settings have been made by the system administrators of SAP S/4HANA Cloud.

This menu item opens a separate window where users can directly share a link to a business application in the SAP S/4HANA Cloud system with co-workers.

List Report Header (SAP Fiori Elements)
Object Page Header With SAP Fiori elements for OData V4:

  • Application teams can place a generic copy action in the header so the user can create a new object with the same data as the current object.
  • The Share menu includes Chat in Microsoft Teams, when the required settings have been made by the system administrators of SAP S/4HANA Cloud.

This menu item opens a separate window where users can directly share a link to a business application in the SAP S/4HANA Cloud system with co-workers.

With SAP Fiori elements for OData V2, when the user clicks an image in the avatar control, it expands in a lightbox control.

Object Page Header (SAP Fiori Elements)
Table Toolbar Now, SAP Fiori elements for OData V4, like SAP Fiori elements for OData V2, allows you to place a copy action button in the table toolbar to let the user to create a new object with the same data as the current object. Table Toolbar (SAP Fiori Elements)
Table Features Now SAP Fiori elements for OData V2, like SAP Fiori elements for OData V4, displays a message when users select the Select All  checkbox in the header a responsive table:  “Only the first n of the items you selected were added to the selection,” where “n” equals the number of items loaded on the interface. Table Features (SAP Fiori Elements)
Table Rows

Now SAP Fiori elements for OData V4, like SAP Fiori elements for OData V2, allows you to turn off the automatic creation of empty rows for grid tables and responsive tables in the object page.

This option is for tables whose maintenance mostly requires updating data in existing rows.

If the users want to create additional rows, the Create button lets them enable the automatic creation of two empty rows.

 Table Rows (SAP Fiori Elements)

Designer Toolkit

Topic Update Topic Link
SAP Fiori Design Stencils SAP icon font: Download files updated to version 5.04 (Horizon theme) and 4.16 (Quartz theme).

SAP Business Suite icon font: Download file updated to version 2.083 (Horizon theme) and 1.083 (Quartz theme).

SAP Fiori Design Stencils
Design Stencils for Figma The stencil library has been updated to version 1.112.

Note: The stencil library may not fully mirror the implementation for a specific SAPUI5 version.

Design Stencils for Figma – Download and Installation

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.