What’s New in Guideline Version 1.126

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

Intro

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

Discover

SAP Fiori Elements Framework

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-content-area-sap-fiori-elements">Object Page – Content Area</a></div> <div> <p>With both SAP Fiori elements for OData V2 and V4:</p> <ul> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-content-area-sap-fiori-elements%23contact-facets">Contact facets</a>: In applications with Microsoft Team integration, the contact quick view card displays options for starting a Microsoft Teams audio call, video call, or chat with the contact.</li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-content-area-sap-fiori-elements%23section-and-subsection-titles">Section and subsection titles</a>: For sections or subsections that contain a single text area, application teams can enable an option to display the section or subsection title instead of the text area label when the object page is in display mode. With the option enabled, the label is only displayed in edit mode if the field is mandatory.</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements">Object Page – Header</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements%23contact-facets">Contact facets</a>: With both SAP Fiori elements for OData V2 and V4, in applications with Microsoft Teams integration, the contact quick view card displays options for starting a Microsoft Teams audio call, video call, or chat with the contact.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftables-toolbar">Table Toolbar</a></div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftables-toolbar%23copy-and-paste">Copy and paste</a>: With both SAP Fiori elements for OData V2 and V4, after users copy data from another SAP Fiori elements application or an external application, they can paste it to:</p> <ul> <li>A table</li> </ul> <p>Users focus anywhere in the table or select an empty row and paste the data. One or more new rows are created for the pasted data.</p> <p>This feature is available only for draft-enabled applications and for tables where inline creation or the insertion of empty rows has been enabled.</p> <ul> <li><strong>A cell or range of cells, only in grid and responsive tables</strong></li> </ul> <p>Users select a cell or cell range within the table and paste the data. If the selected cell or cells are in:</p> <ul> <li> <ul> <li>Active or draft rows, the pasted data replaces the values in those rows.</li> <li>An empty row, new rows are created for the pasted data.</li> </ul> </li> </ul> <p>To paste, they can use the <em>Paste</em> action in the toolbar or use a keyboard shortcut (<strong>Ctrl+V</strong> for Microsoft Windows, <strong>Cmd+V</strong> for MacOS).</p> <p>With SAP Fiori elements for OData V4:</p> <ul> <li>The default <em>Copy</em> action in the table toolbar, can now be disabled in all toolbar tables or in or specific ones.</li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftables-toolbar%23export">Export</a>: The default limit for the number of rows that <em>Export</em> action can export is 1000. The application development team can change the limit.</li> </ul> </div> </div>

SAP Products / SAP S/4HANA Only

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fsituation-handling%2Fsituation-handling">Situation Handling</a></div> <div> <p>Updated guidelines and controls for Situation Handling, which helps businesses run smoothly by automatically informing the right users about the issues that require their attention, for example, consumed contracts, pending confirmations and approvals, deviating deliveries, and upcoming deadlines.</p> <p>Users can now see situations displayed in business apps and in an app dedicated to situations. They can also be informed by notifications on SAP Fiori launchpad or by email.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fsituation-handling%2Fsituation-handling-controls">Situation Handling Controls</a> (New)</div> <div> <p>Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually.</p> <p>Initially, users see the minimal display for a situation. They can seek additional levels of detail about it, according to their needs and goals.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling%2Foverview-in-a-situations-app">Overview in a Situations App</a> (New)</div> <div> <p>The Situations app displays all situations in a user’s area of responsibility.</p> <p>There are two versions of the app:</p> <ul> <li>My Situations – Extended comes with the extended framework for Situation Handling and is the reference app for UX design.</li> <li>My Situations comes with the standard framework for Situation Handling and is a simplified version that contains only a work list.</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fsituation-handling%2Fsituation-detail-view">Situation Detail View</a> (New)</div> <div>The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered the situation.</div> </div>

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%2Fui-elements%2Fchart-vizframe%2Fcolor-palettes%2F">Chart Color Palettes</a></div> <div>Updated color values, rules, and best practices for the qualitative, sequential, and semantic color palettes.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fchart-vizframe%2Fvalues-and-names%2F">Chart Color Palettes – Values and Names</a></div> <div>All color values have been updated to Morning Horizon base chart values, as defined in the <a href="https%3A%2F%2Fgithub.com%2FSAP%2Ftheming-base-content">SAP Theming Base Content</a> repository.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Fdesign-tokens">Design Tokens</a></div> <div> <p>The Horizon <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Fdesign-tokens%23tokens-and-style-variable-libraries">styles and variables</a> are now included in the UI kits provided by SAP design teams.</p> <p>Updated instructions on how to preview themes or simulate custom theming in Figma.</p> </div> </div>

[internal_only]

AI and Joule Design

[/internal_only]

<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> <p>Technical implementation of the AI button web component is now complete.</p> <p>When using the AI icon menu button, suppress the chevron.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fai-design-contact-us">AI Design – Contact Us</a></div> <div>Updated feedback link and dedicated contacts for AI patterns and guidelines, user research, and pattern adoption.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fai-design-glossary">AI Design Glossary</a></div> <div>Generative AI: Term “blocklist” added.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Foverview%2Fai-design-roadmap">AI Design Roadmap</a></div> <div> <p>Updated contacts in the AI Design team.</p> <p>Added delivered components/patterns: AI Button, AI Colors, AI Icon, AI UI Text, AI Writing Assistant, AI Web UI Kit</p> <p>Patterns scheduled for October/November 2024: AI Button v2, AI Notice v2, Regenerating Content v1, Summarization v1</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-notice%2F">AI Notice</a></div> <div> <p>This article has been fully revised to reflect AI notice specification version 1.2.</p> <p>The guideline now also covers AI notice patterns for:</p> <ul> <li>Headers / title components</li> <li>Items within tables, lists, and grid-lists / object marker components</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-prompt-input%2F">AI Prompt Input</a></div> <div>Technical implementation for the AI prompt input pattern is complete.<br>Link to <a href="https%3A%2F%2Fsap.github.io%2Fui5-webcomponents%2Fnightly%2Fcomponents%2Fai%2FPromptInput%2F">web component documentation</a> added.</div> </div> <div> <div>AI UI Starter Kit</div> <div>This page has been deprecated. The starter kit has been replaced by the SAP AI Web UI Kit (see below).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-text-highlight%2F">AI Text Highlight</a></div> <div>Technical implementation has been de-prioritized based on <a href="https%3A%2F%2Fwww.figma.com%2Fboard%2FUQZS7B7nbWS6uZpKqpH7WQ%2FAI-Writing-Assistant-UXR-V1%3Fnode-id%3D0-1%26t%3DerlClfwYDGuIcmly-1">user research insights</a>.</div> </div> <div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-writing-assistant%2F">AI Writing Assistant</a> (New)</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Ffeatured%2Fmeet-ai-writing-assistant">Meet AI Writing Assistant</a> (New)</p> </div> <div> <p>The AI writing assistant can be offered within an input field, text area, or rich text editor to assist users with text entries.</p> <p>The featured article “Meet AI Writing Assistant” provides some additional background on this pattern, including adoption status, key user research findings, use cases, and the contributing teams.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fimportant-links-on-ai">Important Links on AI</a></div> <div> <p>The following links were added:</p> <ul> <li><a href="https%3A%2F%2Fbrand.sap.com%2Fartificial-intelligence">SAP Brand AI Resources</a> including <a href="https%3A%2F%2Fd.dam.sap.com%2Fa%2FD63zspv%2FAI%2520Brand%2520and%2520Creative%2520Guidelines.pdf%3Finline%3Dtrue">AI Brand and Creative Guidelines</a></li> <li><a href="https%3A%2F%2Fsap.sharepoint.com%2Fsites%2F204212%2FSitePages%2FServices.aspx">Submit AI Design System Requests and Feedback</a></li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fquick-prompts%2F">Quick Prompts</a></div> <div> <p>Updated <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fquick-prompts%2F%23handling-errors">error handling</a>:</p> <ul> <li>Error message below the content area</li> <li>Updated error message text</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fsap-ai-web-ui-kit">SAP AI Web UI Kit</a> (New)</div> <div>We’re excited to introduce the new SAP AI Web UI Kit for Figma! This replaces the former AI UI Starter Kit.</div> </div>

UI Elements

[internal_only]

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%2Fweb-card-system%2Fweb-card-system-badge%2F">Badge in the Web Card System</a> (New)</div> <div>New article about the use of badges on cards in the new web card system (target design).</div> </div>

[/internal_only]

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%2Fcarousel%2F">Carousel</a></div> <div>You can now set the navigation to move through multiple items or an entire row with a single click on the paging button.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fcloud-file-browser%2F">Cloud File Browser</a> (New)</div> <div> <p>The cloud file browser is a dialog composed of controls that allow users to browse through a remote repository, export data to the cloud, or import files from the cloud to an SAP application.</p> <p>The cloud file browser is composed of controls embedded in a <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdialog%2F">dialog</a>.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fobject-display-elements%2F">Object Display Components</a></div> <div>Additional guidance for the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fobject-display-elements%2F%23object-number">object number</a>: Don’t use color alone to indicate a value state. Also show an icon that indicates the specific context of the object number.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsystem-information-bar">System Information Bar</a> (New)</div> <div> <p>With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.</p> <p>In the development and test systems, the system information bar allows users to quickly identify the system they are using. The system information bar is located above the shell bar. By default, the system information bar is turned on in all non-production systems.</p> </div> </div>

Resources

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-126%2Fresources%2Fdownloads">Download Fonts</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fresources%2Fdownloads%23sap-icon-font">SAP icon font</a>: Download files were updated to version <strong>5.9</strong> (Horizon theme) and <strong>4.21</strong> (Quartz theme).</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fsap-web-ui-kit">SAP Web UI Kit</a></div> <div> <p>You can see the latest updates to the SAP Web UI Kit in the <a href="https%3A%2F%2Fwww.figma.com%2F%40sap%3Fnode-id%3D158498-23264%26t%3DGnuJJnHupKCtabCg-11">change log</a>.</p> <p>The UI kit is now also available for customers and partners via the SAP space in the <a href="https%3A%2F%2Fwww.figma.com%2F%40sap">Figma Community</a>.</p> <p><em>Note: To match the naming conventions in SAP’s Figma community space, the external UI kit is called “<a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fsap-fiori-for-web-ui-kit">SAP Fiori for Web UI Kit</a>”.</em></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fcloud-erp%2Fdesign-stencils-for-figma">SAP S/4HANNA Web UI Kit</a></div> <div>The SAP S/4HANA Web UI Kit is now published via the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fai-design-glossary">Figma Community</a>. The kit includes both cozy and compact form factors.</div> </div>