What’s New in Guideline Version 1.145

Discover / What’s New / What’s New in Guideline Version 1.145

Intro

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

Foundations

Visual

<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>

[internal_only]

Interaction

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fkeyboard-support">Keyboard Support</a> (New)</div> <div>Provides an overview of the global principles and interaction models for keyboard navigation, selection, activation, and text interaction. Each section references the detailed keyboard behaviors defined in the specification.</div> </div>

[/internal_only]

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%2Fwriting-and-wording%2Fux-writing%2Fux-writing-for-notifications">UX Writing for Notifications</a> (New)</div> <div>Defines conventions for message structure, tone, terminology, and information placement to promote consistent, clear, and actionable notifications across products.</div> </div>

Best Practices

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fbest-practices%2Fui-elements%2Ftitle-hierarchy-guidance">Title Hierarchy Guidance</a> (New)</div> <div>Explains how to use title styles and semantic heading levels to achieve a clear and accessible heading hierarchy.</div> </div>

UI Elements - SAPUI5

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Favatar">Avatar</a></div> <div>Avatars can now also be used for decorative purposes.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fcheckbox">Checkbox</a></div> <div>Added checkbox groups and corresponding <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Fweb-design-system-drafts%2Fui-elements%2Fcheckbox%2F%23error-handling-for-a-checkbox-group">error handling behavior</a>.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ficontabbar">Icon Tab Bar</a></div> <div>Added two types of <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ficontabbar%2F%23sub-tabs">sub-tabs</a> to the guideline – in menu mode and in split mode – to support different content preferences.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdate-picker">Date Picker</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Flink">Link</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fswitch">Switch</a></div> <div> <p>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.</p> <p>These consolidated guidelines replace the individual component guidelines for SAPUI5 and SAP Web Components.</p> <p>See also: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fget-started%2Fui-elements-sap-design-system%23transition-to-unified-component-guidelines">Transition to Unified Component Guidelines</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fsmart-filter-bar-annotations">Smart Filter Bar</a></div> <div>This article has been deprecated because the control is in maintenance with no further enhancements. The guidelines published prior to version 1.145 still apply to the control.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftable-bar">Table Toolbar</a></div> <div>The guideline has been refreshed, with a stronger focus on the arrangement of <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftable-bar%2F%23action-groups-and-custom-actions">action groups and custom actions</a>.</div> </div>

UI Elements - SAP Web Components

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-145%2Fui-elements%2Fhome-page-banner">Home Page Banner</a></div> <div> <p>Preview of the target design for the new home page banner for SAP Business Suite.</p> <p>The home page banner is a standardized card used in the hero space of the product home page. It can accommodate different elements, depending on the needs of each product.</p> </div> </div> <div> <div>Date Picker<br>Link<br>Switch</div> <div>These pages have been deprecated. The component guidelines for these SAP Web Components have been merged with the SAPUI5 guidelines. <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fget-started%2Fui-elements-sap-design-system%23transition-to-unified-component-guidelines">Learn more</a>.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fshell-search">Shell Search</a> (New)</div> <div>The shell search in the shell bar helps users quickly find information and resources across a product or product suite. It provides results from all connected systems, enabling users to locate objects from a single entry point.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fside-navigation">Side Navigation</a> (New)</div> <div>The side navigation component is a vertical menu for opening applications or modules in your product and can be implemented as either an embedded panel or an overlay.</div> </div>

<div> <div>Topic</div> <div>Update</div> </div> <div> <div>Date Picker<br>Link<br>Switch</div> <div>These pages have been deprecated. The component guidelines for these SAP Web Components have been merged with the SAPUI5 guidelines. <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fget-started%2Fui-elements-sap-design-system%23transition-to-unified-component-guidelines">Learn more</a>.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fshell-search">Shell Search</a> (New)</div> <div>The shell search in the shell bar helps users quickly find information and resources across a product or product suite. It provides results from all connected systems, enabling users to locate objects from a single entry point.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fside-navigation">Side Navigation</a> (New)</div> <div>The side navigation component is a vertical menu for opening applications or modules in your product and can be implemented as either an embedded panel or an overlay.</div> </div>

Page Types

Page Layouts

Topic

Update

Page Header (New)

Dedicated page focusing on the page header design, based on the dynamic page header.

Includes detailed best practices, as well as mandatory and optional elements for different use cases and page types.

[internal_only]

Resources

User Research

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Fuser-research%2Fconducting-user-research">Conducting User Research</a></div> <div> <p>New section: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Fuser-research%2Fconducting-user-research%23ux-insights-hub">UX Insights Hub</a></p> <p>Now more than 750 studies in the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Fuser-research%2Fconducting-user-research%23user-research-library">User Research Library</a>.</p> </div> </div>

UI Skills

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Fai-skills%2Fsap-design-system">AI Skill for SAP Design System</a> (New)</div> <div>AI skill that brings the SAP Fiori design guidelines directly into AI development tools like Claude Code, GitHub Copilot, Cursor, and Cline.</div> </div>

[/internal_only]