What’s New in Guideline Version 1.148

Decorative background image
Discover / What’s New / What’s New in Guideline Version 1.148

Intro

This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.148.

Discover

SAP Products – SAP S/4HANA

Topic
Update
My Home in SAP S/4HANA Cloud Public Edition
The home page banner now replaces the salutation bar in My Home in SAP S/4HANA Cloud Public Edition.

Foundations

Writing and Wording

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Ficonography%2Ficonography-horizon">Iconography – Horizon</a></div> <div> <p>Page was fully revised:</p> <ul> <li>Updated guidance on when to use icons and best practices.</li> <li>Added information on icon sizing, icon color and accessibility.</li> <li>Updated information on icon style, icon format, and the grid system.</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Ficonography%2Fproduct-launch-icons">Product Launch Icons</a></div> <div> <p>Updated guidance on when to use product launch icons.</p> <p>Added information on the anatomy of product launch icons and how they are created.</p> </div> </div>
Topic
Update
UX Writing Guidelines (BETA) (New)

First internal beta of the new UX writing guidelines as we work to create one aligned set of writing guidelines guidelines for all products. Includes the following sections:

  • Basics: Introduction to SAP’s product content voice and principles for UX writing.
  • Mechanics for UI Text: Guidelines for crafting different types of product content. Based on the UI Text Guidelines for SAP Fiori.
  • Writing for Accessibility: A guide for UX writers on creating accessible text, covering both visible UI copy and hidden screen reader text.
  • Translation and Localization: Guidelines for creating content that works globally across SAP’s 50+ languages.
  • AI Integration: Best practices for writing content that works for both humans and AI agents, as well as using AI tools to generate and improve UI text.

Best Practices – Global Patterns

Topic
Update
Complex Objects – Global Flow (Create, Edit)

For complex objects with standard message and draft handling, use the finalizing actions:

  • Create and Discard Draft in a create flow for an item or subobject
  • Apply and Discard Draft in an edit flow for an item or subobject
Object Handling (Create, Edit, Delete)
For all flows for an item or subobject in a complex object, use the finalizing action Apply.
Simple Objects (Create, Edit)

For simple objects with standard message and draft handling, use as finalizing actions:

  • Create and Discard Draft in create flows
  • Save and Discard Draft in edit flows

Best Practices – UI Elements

Topic
Update
Date and Time Pickers – Overview (New)

You can use this new page to explore the available date and time pickers and find the right component for your use case. It covers:

  • Calendar
  • Date picker
  • Time picker
  • Date/time picker
  • Date range selection
style
internal-only

Foundations

Best Practices – Global Patterns

Topic
Update
Complex Objects – Global Flow (Create, Edit)

For complex objects with standard message and draft handling, use the finalizing actions:

  • Create and Discard Draft in a create flow for an item or subobject
  • Apply and Discard Draft in an edit flow for an item or subobject
Object Handling (Create, Edit, Delete)
For all flows for an item or subobject in a complex object, use the finalizing action Apply.
Simple Objects (Create, Edit)

For simple objects with standard message and draft handling, use as finalizing actions:

  • Create and Discard Draft in create flows
  • Save and Discard Draft in edit flows

Best Practices – UI Elements

Topic
Update
Date and Time Pickers – Overview (New)

You can use this new page to explore the available date and time pickers and find the right component for your use case. It covers:

  • Calendar
  • Date picker
  • Time picker
  • Date/time picker
  • Date range selection
style
external-only

UI Elements – SAPUI5

Topic
Update
Bar
Date Range Selection

New, unified component guidelines that describe the features shared by both the SAPUI5 component and the corresponding web component, based on SAPUI5 as the reference implementation. The new guidelines also highlight any differences between the two implementations.

These consolidated guidelines replace the individual component guidelines for SAPUI5 and SAP Web Components.

See also: Transition to Unified Component Guidelines

Input
Suggestions and autocomplete: Ensure that any custom suggestions with additional information are accessible to screen reader users and do not include interactive elements.
Rating Indicator
Responsiveness: Added guidance for keeping the rating indicator usable in extra small viewports.

UI Elements – SAP Web Components

Topic
Update
Bar
Date Range Picker
These pages have been deprecated. The component guidelines for these SAP Web Components have been merged with the SAPUI5 guidelines. Learn more.

Page Types

Floorplans

Topic
Update
List Report Floorplan

In the table toolbar, for sorting, grouping, column settings, and more extensive functionality, such as grouping or sorting on several levels or tables with more than 20 columns, always use P13n-Dialog. Only enable the required features.

Only use the footer toolbar to display the message button when messages are present.

Object Page Floorplan

Updates to guidelines for:

  • Choosing a navigation bar
  • Section and subsection content
  • Display of titles in the content area of an object page with anchor bar navigation to eliminate redundancy and ease navigation
  • Alignment of controls and table item counter with titles
Topic
Update
List Report Floorplan

In the table toolbar, for sorting, grouping, column settings, and more extensive functionality, such as grouping or sorting on several levels or tables with more than 20 columns, always use P13n-Dialog. Only enable the required features.

Only use the footer toolbar to display the message button when messages are present.

Object Page Floorplan

Updates to guidelines for:

  • Choosing a navigation bar
  • Section and subsection content
  • Display of titles in the content area of an object page with anchor bar navigation to eliminate redundancy and ease navigation
  • Alignment of controls and table item counter with titles

Resources

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Ficonography%2Ficonography-horizon">Iconography – Horizon</a></div> <div> <p>Page was fully revised:</p> <ul> <li>Updated guidance on when to use icons and best practices.</li> <li>Added information on icon sizing, icon color and accessibility.</li> <li>Updated information on icon style, icon format, and the grid system.</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Ficonography%2Fproduct-launch-icons">Product Launch Icons</a></div> <div> <p>Updated guidance on when to use product launch icons.</p> <p>Added information on the anatomy of product launch icons and how they are created.</p> </div> </div>
Topic
Update
Download Fonts

The download files have been updated as follows:

SAP Icons:

  • Horizon: SVG version 6.02 added
  • Horizon: Icon font version updated to 5.13 (final icon font version before the switch to SVG)
  • Quartz: SVG version 4.25 added
  • Quartz: Icon font version updated to 4.24 (final icon font version before the switch to SVG)
  • Quartz: Preview file updated to 4.24 (only need if installing Horizon and Quartz side by side)

SAP Business Suite Icon Font:

  • Horizon: Icon font updated to version 2.091
  • Quartz: Icon font updated to version 1.091
Icon Creation Kit
The icon creation kit helps lines of business create high-quality, consistent icons for specific needs. The kit focuses on creating and handling SVG assets. You can also use it to prepare line icons for integration into the SAP icon font.
style
internal-only

Resources

Topic
Update
Download Fonts

The download files have been updated as follows:

SAP Icons:

  • Horizon: SVG version 6.02 added
  • Horizon: Icon font version updated to 5.13 (final icon font version before the switch to SVG)
  • Quartz: SVG version 4.25 added
  • Quartz: Icon font version updated to 4.24 (final icon font version before the switch to SVG)
  • Quartz: Preview file updated to 4.24 (only need if installing Horizon and Quartz side by side)

SAP Business Suite Icon Font:

  • Horizon: Icon font updated to version 2.091
  • Quartz: Icon font updated to version 1.091
style
external-only