Updated: October 15, 2024

What’s New in Guideline Version 1.128

Intro

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

UI Elements – SAPUI5

Topic Update Topic Link
Carousel Responsive behavior:

  • The arrow buttons for navigating between pages are always visible on mobile devices.
  • The tap interaction is required as an alternative to swiping to comply with accessibility standards.
Carousel – Responsiveness
Illustrated Message Illustrations don’t require an alternative text. Illustrated Message

UI Elements – Web Components

Components

Topic Update Topic Link
Carousel Responsive behavior:

  • The arrow buttons for navigating between pages are always visible on mobile devices.
  • The tap interaction is required as an alternative to swiping to comply with accessibility standards.
Carousel – Responsive Behavior
Form  NEW Guideline for the web component implementation of the form. Form

SAP Fiori Elements Framework

Topic Update Topic Link
List Report Header With SAP Fiori elements for OData V4:

  • The limit for a search string is 1000 characters.
  • You can hide the Editing Status filter from the list report filter bar. This feature was already available with SAP Fiori elements for OData V2.
List Report Header (SAP Fiori Elements) – Editing Status Filter
Table Features With SAP Fiori elements for OData V4:

  • The generic context menu is now available for tree tables and can contain Move Up and Move Down actions for tree table nodes.
  • By default, a newly created tree table node is always displayed first in the table or as the first child below its parent node, even when a sort or a filter is applied to the table.

Instead, you can enable an option to display the nodes in the order that they were created in the table or parent node. This feature allows users to act directly on the table hierarchy when they create new table elements or reorder the table nodes.

Table Features (SAP Fiori Elements)
Table Rows With both versions of SAP Fiori elements, in draft-enabled applications, you can enable or disable the empty row for data entry feature for:

  • An application, so the setting applies to all grid tables and responsive tables in all object pages
  • A table, so it applies only to the table

When settings are made at both application and table levels, the table setting takes priority.

Additionally, with SAP Fiori elements for OData V2, you can enable or disable the feature at the object page level.

When the settings are made at application, object page, and table levels, the setting at the most granular level takes priority, as follows: table, object page, application.

Table Rows (SAP Fiori Elements) – Empty Row for Data Entry in Create and Edit Modes
Table Toolbar With SAP Fiori elements for OData V4:

  • The limit for a search string is 1000 characters.
  • The export action excludes table columns that contain a multi-input field (1:N).
  • You can enable the mass edit for a grid table or responsive table in the object page. When the object page is in display mode, users can apply the mass edit to the subobjects in a table.
  • You can define the fields that display in the Edit dialog for mass edit. This feature was already available with SAP Fiori elements for OData V2.

By default, the Edit dialog contains all the table columns that are currently visible and editable.

Now, the application team can define the fields that display in the dialog, by both:

    • Including fields in the dialog that are not displayed in the table
    • Excluding fields from the dialog fields that are displayed in the table
Table Toolbar (SAP Fiori Elements)

Designer Toolkit

Topic Update Topic Link
Download Fonts SAP icon font: Download files were updated to version 5.10 (Horizon theme) and 4.22 (Quartz theme).

SAP Business Suite icon font: Download files were updated to version 2.086 (Horizon theme) and 1.086 (Quartz theme).

Download Fonts
SAP Fiori for Web UI Kit The SAP Fiori for Web UI Kit is available in the Figma Community. SAP Fiori for Web UI Kit
SAP S/4HANNA Web UI Kit The SAP S/4HANA Web UI Kit is available in the Figma Community. The kit includes both cozy and compact form factors. SAP S/4HANA Web UI Kit
User Research  NEW Extended set of resources for conducting user research, including:

  • SAP User Research Panel: An opportunity for SAP end-users to have a direct impact on the development and enhancement of our products.
  • User Research Method Cards: Effective user research methods.
  • Inclusive Research Handbook: Advice, tools, and templates for conducting research in an inclusive way.
  • Scenes Toolkit: Predefined illustrations that can be used to create storyboards.

This article replaces the former User Research Method Cards article.

User Research Resources

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.