What’s New in Guideline Version 1.139
Discover / What’s New / What’s New in Guideline Version 1.139
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.139.
Foundations
Visual Design Foundations
<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Ffoundations%2Fvisual%2Fcolors-overview">Colors</a></div> <div>We’ve introduced a new overview page for the color system, summarizing how theme palettes, reference colors, and contrast rules support consistent and accessible user interfaces.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Ffoundations%2Fvisual%2Fshadow-concept">Shadow Concept</a> (New)</div> <div>This new article details the use of shadow levels in the UI to convey the visual hierarchy of container controls. It includes examples that illustrate the styling for each of the four defined shadow levels.</div> </div>
Interaction Design Foundations
<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Ffoundations%2Fvisual%2Ftiming">Timing</a> (New)</div> <div>Timing in interaction design shapes how users experience transitions, feedback, and responsiveness. Our new guidelines organize timing into four groups—fast, normal, slow, and very slow—each with distinct use cases and response times.</div> </div>
Writing and Wording
WalkMe Guidelines
<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%2Fwalkme%2Fwalkme-intro">About the WalkMe Guidelines</a> (New)</div> <div>Provides an overview of the WalkMe Content Design Toolkit to be used by WalkMe content creators (Content Designers, Builders, User Assistance Developers).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fwriting-and-wording%2Fwalkme%2Fwalkme-content-guidelines">WalkMe Content Guidelines</a> (New)</div> <div>Provides the WalkMe Content Style Guide, which aligns closely to SAP Fiori UI text design patterns and most user assistance style guides.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fwriting-and-wording%2Fwalkme%2Fwalkme-toolkit-guidelines">WalkMe Toolkit Guidelines</a> (New)</div> <div>Provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fwriting-and-wording%2Fwalkme%2Fwalkme-boilerplate">WalkMe Boilerplate and Examples</a> (New)</div> <div>Includes examples of step balloons for tasks/UI elements that are consistent across many SAP products.</div> </div>
[internal_only]
AI and Joule Design
[/internal_only]
<div> <div>Topic</div> <div>Update</div> </div> <div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fexplainable-ai-overview">Explainable AI (XAI) – Overview</a> (New)</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fexplainable-ai-principles">Explainable AI (XAI) – Guiding Principles</a> (New)</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fexplainable-ai-building-explanations">Explainable AI (XAI) – Building Explanations</a> (New)</p> </div> <div>These articles replace the former (deprecated) Explainable AI guideline and build on SAP’s AI Ethics Policy. The content has been fully revamped, with several additional sections and examples.</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%2Fanalytical-table-alv%2F%23content-formatting">Analytical Table</a></div> <div>Updated with guidance on content formatting when you show an ID and corresponding description together.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ffilter-bar%2F">Filter Bar</a></div> <div>Added <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ffilter-bar%2F%23behavior-and-interaction">guideline for behavior and interaction</a> to set the table property rememberSelections to “false” so that at each update, previously selected items are reset or “forgotten.”</div> </div> <div> <div>General updates</div> <div>As part of an ongoing initiative to harmonize the guideline content, we’ve enhanced and modernized the guidelines for several core SAPUI5 components (refreshed images, streamlined content).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fgrid-list%2F">Grid List</a></div> <div>Added guidelines for displaying the selection and item counter in the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fgrid-list%2F%23title-bar">title bar</a>.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fnavigation-menu">Navigation Menu</a> (New)</div> <div>New guideline for the navigation menu that provides users with quick access from one work area to another in S/4HANA products.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F">Responsive Table</a></div> <div>Added guidelines for displaying the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23selection">selection and item counter</a> next to the table title and setting the table property <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23properties">rememberSelections</a> to “false” to <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23selection-reset">reset or “forget”</a> previously selected items at each table refresh.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect%2F">Select</a></div> <div>In the read-only state for the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect%2F%23two-column-layout">two-column layout</a>, both values are now displayed in the input field, separated by an en dash (or alternative separator).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftable-bar%2F">Table Toolbar</a></div> <div>Added guidelines for displaying the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftable-bar%2F%23title">selection and item counter</a> next to the table title.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fupload-set-with-table-plugin%2F">Upload Set with Table Plugin</a> (New)</div> <div>New guideline for the successor to the deprecated upload set</div> </div>
<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%2Fanalytical-table-alv%2F%23content-formatting">Analytical Table</a></div> <div>Updated with guidance on content formatting when you show an ID and corresponding description together.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fai-assisted-error-explanation">AI-Assisted Error Explanation</a> (New)</div> <div>New guideline, visible internally only, for AI-assisted error explanation, which helps users who encounter errors or warnings when working on an object page in an application developed with SAP Fiori Elements.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ffilter-bar%2F">Filter Bar</a></div> <div>Added <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ffilter-bar%2F%23behavior-and-interaction">guideline for behavior and interaction</a> to set the table property rememberSelections to “false” so that at each update, previously selected items are reset or “forgotten.”</div> </div> <div> <div>General updates</div> <div>As part of an ongoing initiative to harmonize the guideline content, we’ve enhanced and modernized the guidelines for several core SAPUI5 components (refreshed images, streamlined content).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fgrid-list%2F">Grid List</a></div> <div>Added guidelines for displaying the selection and item counter in the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fgrid-list%2F%23title-bar">title bar</a>.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fnavigation-menu">Navigation Menu</a> (New)</div> <div>New guideline for the navigation menu that provides users with quick access from one work area to another in S/4HANA products.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F">Responsive Table</a></div> <div>Added guidelines for displaying the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23selection">selection and item counter</a> next to the table title and setting the table property <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23properties">rememberSelections</a> to “false” to <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23selection-reset">reset or “forget”</a> previously selected items at each table refresh.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect%2F">Select</a></div> <div>In the read-only state for the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect%2F%23two-column-layout">two-column layout</a>, both values are now displayed in the input field, separated by an en dash (or alternative separator).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftable-bar%2F">Table Toolbar</a></div> <div>Added guidelines for displaying the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftable-bar%2F%23title">selection and item counter</a> next to the table title.</div> </div> <div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fupload-set-with-table-plugin%2F">Upload Set with Table Plugin</a></p> <p>(New)</p> </div> <div>New guideline for the successor to the deprecated upload set</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%2Fui-elements%2Fai-button%2F">AI Button</a></div> <div>Now available as a regular web component (no longer experimental).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-writing-assistant">AI Writing Assistant</a></div> <div>Now available (no longer target design)</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ffile-uploader%2F">File Uploader</a> (New)</div> <div>The file uploader lets users select one or more files using their local file explorer and upload them to the application.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fquick-prompts">Quick Prompts</a></div> <div>Now available (no longer target design)</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fregenerate%2F">Regenerate</a></div> <div>Now available (no longer target design)</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect-web-component%2F">Select</a></div> <div>In the read-only state for the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect-web-component%2F%23two-column-layout">two-column layout</a>, both values are now displayed in the input field, separated by an en dash (or alternative separator).</div> </div>
<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%2Fai-acknowledgment">AI Acknowledgment</a> (New)</div> <div>Informs users about the opportunities, risks, and limitations of an AI service.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-button%2F">AI Button</a> (New)</div> <div>Special type of button for AI-powered actions.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-writing-assistant">AI Writing Assistant</a> (New)</div> <div>Assists users in creating, iterating, and improving text entries.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ffile-uploader%2F">File Uploader</a> (New)</div> <div>The file uploader lets users select one or more files using their local file explorer and upload them to the application.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fguided-prompts">Guided Prompts</a> (New)</div> <div>Guide users in instructing the generative Al model.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Flocal-ai-notice">Local AI Notice</a> (New)</div> <div>Ensures users are informed when content is AI-generated.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fquick-prompts">Quick Prompts</a> (New)</div> <div>Prompts that are integrated into workflows for easy access.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fregenerate%2F">Regenerate</a> (New)</div> <div>Allows users to iterate and refine AI-generated content.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect-web-component%2F">Select</a></div> <div>In the read-only state for the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-139%2Fui-elements%2Fselect-web-component%2F%23two-column-layout">two-column layout</a>, both values are now displayed in the input field, separated by an en dash (or alternative separator).</div> </div>