Updated: May 1, 2024

What’s New in Guideline Version 1.122

Intro

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

SAP Fiori Launchpad

Topic Update Topic Link
Shell Bar The article has been updated to reflect the latest requirements in SAP’s product standard for UX consistency. Shell Bar

Layouts and Floorplans

Floorplans

Topic Update Topic Link
Object Page It is now possible to use grid tables within an object page. Object Page Floorplan – Tables

UI Elements – Web Components

Topic Update Topic Link
Flexible Column Layout  NEW Guideline for the web component implementation of the flexible column layout. Flexible Column Layout
Time Picker  NEW Guideline for the web component implementation of the time picker.

Note: The guideline describes the target design. The web component doesn’t yet offer all the specified time picker features.

Time Picker
Toast Don’t apply semantic styling to the message toast. Toast

SAP Fiori Elements Framework

Topic Update Topic Link
List Report Header With SAP Fiori elements for OData V4, you can control the visibility in the Share menu of the Send E-mail and Share: Microsoft Teams options at both application level and page level.

The Share: Microsoft Teams menu can include the As Card option.

List Report Header (SAP Fiori Elements) – Share Menu
Object Page Header Content Area When the object page uses:

  • Tab bar navigation, the section title isn’t displayed in the content area
  • Anchor bar navigation, only the title of the first section is hidden in the content area, unless the first section contains a table

When you assign a section or subsection title, do not use a comma (,) in it because commas serve as delimiters in SAP Fiori elements.

To minimize both the number of titles displayed for sections, subsections, controls, and fields and redundancies among the title values:

  • When a section or subsection contains a single table or chart control, only the control title is displayed, but its value is replaced by the section or subsection title.
  • With SAP Fiori elements for OData V4, when a section or subsection contains a single text area, the section or subsection title is displayed instead of the text area label when the object page is in display mode. For edit mode the label is displayed.
Object Page – Content Area (SAP Fiori Elements)
Object Page Header
  • SAP Fiori elements for OData V4 now:
    • Uses the lightbox control to allow a larger view of the image
    • Gives you control over the visibility of items in the Share menu
  • SAP Fiori elements for OData V2 now allows for a message strip in the object header.
Object Page Header (SAP Fiori Elements)
Table Features With SAP Fiori elements for OData V2:

  • You can now ask application developers to ensure the width of table columns is adjusted to the contents of both the column and the column header.
  • When a table column contains a combination of fields, such an ID and a description or a field group, the quick sort allows users to specify a sort and sort order for each field in the column.
Table Features (SAP Fiori Elements)

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 or SAP Web Components.
  • Ongoing updates on how to best apply the SAP Fiori design (such as patterns, 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.