What’s New in Guideline Version 1.130

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

Intro

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

Discover

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fget-started">Get Started</a></div> <div>The SAP Fiori for Web site has a new structure. Check out this page to get an overview of what you’ll find in each section.</div> </div>

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%2Fsmart-templates%23supported-features">SAP Fiori Elements</a></div> <div>When a user resizes the column in a flexible column layout, both versions of SAP Fiori elements for OData now store the new sizes in the personalization settings for each application and device type.</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>To optimize horizontal onscreen space, the number of columns in a form has been increased for the Medium screen size from 2 to 3 and for the Large screen size from 3 to 4.</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%2Ftable-features-sap-fiori-elements">Table Features</a></div> <div> <p>With SAP Fiori elements for OData V4:</p> <ul> <li>When no data is found for a table, an <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fillustrated-message%2F">illustrated message</a> with generic text is displayed by default. You can add an action to it or change it to a text message.</li> <li>In analytical tables, you can define filters for aggregated measures.</li> <li>In a tree table, you can add the <em>Create</em> action to the generic context menu.</li> </ul> </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>With SAP Fiori elements for OData V4, you can create an object via a dialog in this list report.</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%2Ffoundations%2Fvisual%2Fhow-to-use-semantic-colors">Semantic and Industry-Specific Colors</a></div> <div> <ul> <li>Simplified descriptions. For when to use value states, see the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-value-states">Value States</a> guideline.</li> <li>Note on semantic usage added: Sometimes components use semantic colors that are <strong>not</strong> linked to a specific value state. For example, some <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbutton%2F">button</a> components use lighter semantic colors for semantic actions like “Approve” and “Reject”.</li> </ul> </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%2Ffoundations%2Finteraction%2Fcursors">Cursors</a> (New)</div> <div>New article that provides general guidance on common cursor styles in the SAP Design System and how they are applied in different use case scenarios.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fpage-types%2Fpage-layouts%2Fdynamic-page-web-component%2F">Dynamic Page Layout – SAP Web Components</a> (New)</div> <div>New guideline based on the web component implementation of the dynamic page layout.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fscreen-reader%2F">Screen Reader</a> (New)</div> <div>New article that provides an overview of what is needed to make a UI component accessible to screen readers.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-value-states%2F">Value States</a></div> <div>Note on value state names added.</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%2Ffoundations%2Finteraction%2Fcursors">Cursors</a> (New)</div> <div>New article that provides general guidance on common cursor styles in the SAP Design System and how they are applied in different use case scenarios.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fpage-types%2Fpage-layouts%2Fdynamic-page-web-component%2F">Dynamic Page Layout – SAP Web Components</a> (New)</div> <div>New guideline based on the web component implementation of the dynamic page layout.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-value-states%2F">Value States</a></div> <div>Note on value state names added.</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%2Ffoundations%2Fai-and-joule-design%2Fai-design-system-faq%2F">AI Design System FAQ</a> (New)</div> <div>Check out our FAQ to find answers to all your questions on the AI team and deliverables.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fdesigning-agentic-ai-ecosystems-and-experiences%2F">Designing Agentic AI Ecosystems</a> (New)</div> <div>Guidelines for designing agentic AI systems that are ethical and user-friendly.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Ffeatured%2Fmeet-regenerate%2F">Meet Regenerate</a> (New)</div> <div>Introduces the new regenerate pattern, including use cases and feedback channels.</div> </div> <div> <div>Situation Handling</div> <div> <p>The individual design guidelines for situation handling have moved to the SAP S/4HANA area:</p> <ul> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling">Situation Handling</a></li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling%2Fsituation-handling-controls">Situation Handling Controls</a></li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling%2Foverview-in-a-situations-app">Overview in Situations App</a></li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling%2Fsituation-detail-view">Situation Detail View</a></li> </ul> <p>You’ll still find an overview of all situation handling guidelines in the AI and Joule section:</p> <ul> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Fsituation-handling-overview-page">Situation Handling Guidelines - Overview</a></li> </ul> </div> </div> <div> <div>Important Links on SAP AI</div> <div> <p>This content has moved to SharePoint.</p> <p>See: <a href="https%3A%2F%2Fsap.sharepoint.com%2Fsites%2F205425%2FSitePages%2FHome.aspx">AI Experiences</a></p> </div> </div>

[external_only]

AI and Joule Design

[/external_only]

<div> <div>Topic</div> <div>Update</div> </div> <div> <div>Situation Handling</div> <div> <p>The design guidelines for situation handling have moved to the SAP S/4HANA area:</p> <ul> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling">Situation Handling</a></li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling%2Fsituation-handling-controls">Situation Handling Controls</a></li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling%2Foverview-in-a-situations-app">Overview in Situations App</a></li> <li><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fsituation-handling%2Fsituation-detail-view">Situation Detail View</a></li> </ul> </div> </div> <div> <div>Generative AI Design Guidelines</div> <div>The AI and Joule Design section has been temporarily removed. We’re currently refreshing our AI design resources, with more comprehensive content to come. New guidelines will be announced on our <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2F">SAP Fiori for Web</a> page.</div> </div>

[internal_only]

Writing and Wording

[/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%2Ffoundations%2Fwriting-and-wording%2Fux-writing%2Fui-text-guidelines-for-sap-fiori">UI Text Guidelines for SAP Fiori Apps</a></div> <div>Writing for AI: “Writing for SAP CoPilot” section replaced by “Writing for AI”. This section references the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fwriting-and-wording%2Fux-writing%2Fai-ui-text">AI UI Text</a> guidelines created by the AI Design Team.</div> </div>

Best Practices

<div> <div>Topic</div> <div>Update</div> </div> <div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fbest-practices%2Fglobal-patterns%2Fobject-handling%2Fmanage-objects-with-the-global-flow">Complex Objects – Global Flow (Create, Edit)</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fbest-practices%2Fglobal-patterns%2Fobject-handling%2Fmanage-objects-with-local-flow">Complex Objects – Local Flow (Create, Edit)</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fbest-practices%2Fglobal-patterns%2Fobject-handling%2Fdraft-handling">Draft Handling</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fbest-practices%2Fglobal-patterns%2Fmessaging%2Fmessaging">Message Handling – Overview</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fbest-practices%2Fglobal-patterns%2Fobject-handling%2Fmanage-objects">Object Handling (Create, Edit, Delete)</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fbest-practices%2Fglobal-patterns%2Fobject-handling%2Fcreate-with-reference">Object Handling – Create with Reference</a></p> </div> <div>Note added on known technical restrictions for the display of the SAP Fiori message box with a JavaScript UI5 implementation. Instead, only a native browser popup can be displayed.</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%2Fbutton%2F">Button</a></div> <div>Updated <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbutton%2F%23badge">badge</a> section.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdialog%2F">Dialog</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdialog%2F%23anatomy">Anatomy</a>: More than 2 actions are now allowed in the footer toolbar.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fmessage-popover%2F">Message Popover</a></div> <div> <p>The navigation link takes users directly to the field on the UI that triggered the message. The message popover stays displayed and the page scrolls to the field, as required. The field can be in the visible area or somewhere else on the same page.</p> <p>Some errors are not visible on the page where the message popover is. They can be located on a subobject page (an item in a table, for instance).</p> <p>In that case, the navigation link leads to the target page with focus on the affected field.</p> <p>If possible, provide a <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbreadcrumb%2F">breadcrumb</a> navigation on the target page.</p> <p>Also, make sure that the back button of the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fshell-bar%2F">shell bar</a> returns to the page where the message popover was.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fprogress-indicator%2F">Progress Indicator</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fprogress-indicator%2F%23value-states">Value States</a>: If you use a value state, you must describe it with a label or text, or in the surrounding content.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider%2F">Range Slider</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider%2F%23types">Types</a>: New “Custom Scale” section.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fslider%2F">Slider</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fslider%2F%23types">Types</a>: New “Custom Scale” section.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fswitch%2F">Switch</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fswitch%2F%23switch-with-optional-text">Switch with Optional Text:</a> You can now display a text element after the switch to explain what "active” and “inactive” mean for your specific use case.</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> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-button%2F%23split-menu-button">Split menu button</a> variant added.</p> <p>Available as an <a href="https%3A%2F%2Fsap.github.io%2Fui5-webcomponents%2Fcomponents%2Fai%2FButton%2F">SAP Web Component</a> (experimental).</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbutton-web-component%2F">Button</a></div> <div> <p>New <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbutton-web-component%2F%23badge">Badge</a> section.</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbutton-web-component%2F%23behavior-and-interaction">Behavior and Interaction</a> section added, outlining the component states, interaction states, and semantic usage.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fcolor-picker-web-component%2F">Color Picker</a></div> <div>Added details on default and simplified color picker types and the behavior and interaction.</div> </div> <div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdate-picker-web-component%2F">Date Picker</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdate-range-picker-web-component%2F">Date Range Picker</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdate-time-picker-web-component%2F">Date/Time Picker</a></p> </div> <div>Formatting: If you can’t support the user’s date format, opt for an alternative format with a four-digit year, such as DD/MM/YYYY or MM-DD-YYYY.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdialog-web-component%2F">Dialog</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdialog-web-component%2F%23actions-in-the-footer">Actions in the footer</a>: More than 2 actions are now allowed in the footer toolbar.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F">Form</a></div> <div> <p>List of <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23supported-components">supported components</a> added</p> <p>Enhanced <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23responsive-behavior">Responsive Behavior</a> section:</p> <ul> <li>Default layouts per size</li> <li>Additional layout details</li> <li>Form title only wraps (no truncation)</li> </ul> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23globalization-and-localization">Right-to-left (RTL) example</a> added</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23guidelines">Guidelines</a> added:</p> <ul> <li>Designating fields as “optional”</li> <li>Units of measurement</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fmessage-box%2F">Message Box</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fmessage-box%2F%23confirmation-for-delete">Confirmation for “Delete”</a>: If the delete action isn’t critical, you may opt to use a regular confirmation dialog instead of a warning icon.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fnotification-center%2F">Notifications</a></div> <div> <p>This guideline has been reworked to reflect the latest cross-product design for notifications.</p> <p>This component is relevant for <a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-024">UX Consistency Product Standard UXC-024 – Notifications</a>.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fprogress-indicator-web-component%2F">Progress Indicator</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fprogress-indicator-web-component%2F%23semantic-states">Semantic States</a>: If you use a value state, you must describe it with a label or text, or in the surrounding content.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider-web-component%2F">Range Slider</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider-web-component%2F%23types">Types</a>: New “Custom Scale” section.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fregenerate%2F">Regenerate</a> (New)</div> <div>New pattern that enables users to request and refine AI-generated content.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fselect-web-component%2F">Select</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fselect-web-component%2F%23select-with-icon">Using icons</a> for select options isn’t recommended.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fshell-bar%2F">Shell Bar</a></div> <div> <p>This guideline has been reworked to reflect the latest cross-product design for the shell bar.</p> <p>This component is relevant for the <a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-016">UX Consistency Product Standard UXC-016 – Shell Bar</a>.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fside-navigation%2F">Side Navigation</a> (New)</div> <div> <p>The side navigation component provides a vertical menu that provides access to different sections or pages within an application. It is opened via the hamburger menu in the shell bar.</p> <p>This component is relevant for the <a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-026">UX Consistency Product Standard UXC-026 – Side Navigation</a>.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fslider-web-component%2F">Slider</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fslider-web-component%2F%23types">Types</a>: New “Custom Scale” section.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftab-bar-web-component%2F">Tab Bar</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftab-bar-web-component%2F%23semantic-tabs">Semantic Tabs</a>: To comply with the 2-senses accessibility principle, display a semantic icon on all semantic tabs and use a tab text that reflects the semantic meaning.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fui-elements%2Ftag-web-component%2F">Tag</a> (New)</div> <div>New guideline for the web component implementation of the tag.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fuser-menu%2F">User Menu</a></div> <div> <p>The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon in the shell bar.</p> <p>This component is relevant for the <a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-020">UX Consistency Product Standard UXC-020 – User Menu</a>.</p> </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-card-navigation%2F">Web Card System – Card Navigation</a> (New)</div> <div>New guideline that outlines the different navigation patterns for guiding users from a card to an application, and when to use them.</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%2Fbutton-web-component%2F">Button</a></div> <div> <p>New <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbutton-web-component%2F%23badge">badge</a> section.</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fbutton-web-component%2F%23behavior-and-interaction">Behavior and Interaction</a> section added, outlining the component states, interaction states, and semantic usage.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fcolor-picker-web-component%2F">Color Picker</a></div> <div>Added details on default and simplified color picker types and the behavior and interaction.</div> </div> <div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdate-picker-web-component%2F">Date Picker</a><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdate-range-picker-web-component%2F">Date Range Picker</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdate-time-picker-web-component%2F">Date/Time Picker</a></p> </div> <div>Formatting: If you can’t support the user’s date format, opt for an alternative format with a four-digit year, such as DD/MM/YYYY or MM-DD-YYYY.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdialog-web-component%2F">Dialog</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdialog-web-component%2F%23actions-in-the-footer">Actions in the footer</a>: More than 2 actions are now allowed in the footer toolbar.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F">Form</a></div> <div> <p>List of <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23supported-components">supported components</a> added</p> <p>Enhanced <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23responsive-behavior">Responsive Behavior</a> section:</p> <ul> <li>Default layouts per size</li> <li>Additional layout details</li> <li>Form title only wraps (no truncation)</li> </ul> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23globalization-and-localization">Right-to-left (RTL) example</a> added</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fform-web-component%2F%23guidelines">Guidelines</a> added:</p> <ul> <li>Designating fields as “optional”</li> <li>Units of measurement</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fmessage-box%2F">Message Box</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fmessage-box%2F%23confirmation-for-delete">Confirmation for “Delete”</a>: If the delete action isn’t critical, you may opt to use a regular confirmation dialog instead of a warning icon.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fnotification-center%2F">Notifications</a></div> <div>This guideline has been reworked to reflect the latest cross-product design for notifications.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fprogress-indicator-web-component%2F">Progress Indicator</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fprogress-indicator-web-component%2F%23semantic-states">Semantic States</a>: If you use a value state, you must describe it with a label or text, or in the surrounding content.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider-web-component%2F">Range Slider</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider-web-component%2F%23types">Types</a>: New “Custom Scale” section.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fselect-web-component%2F">Select</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fselect-web-component%2F%23select-with-icon">Using icons</a> for select options isn’t recommended.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fshell-bar%2F">Shell Bar</a></div> <div>This guideline has been reworked to reflect the latest cross-product design for the shell bar.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fside-navigation%2F">Side Navigation</a> (New)</div> <div>The side navigation component provides a vertical menu that provides access to different sections or pages within an application. It is opened via the hamburger menu in the shell bar.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fslider-web-component%2F">Slider</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fslider-web-component%2F%23types">Types</a>: New “Custom Scale” section.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftab-bar-web-component%2F">Tab Bar</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftab-bar-web-component%2F%23semantic-tabs">Semantic Tabs</a>: To comply with the 2-senses accessibility principle, display a semantic icon on all semantic tabs and use a tab text that reflects the semantic meaning.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fui-elements%2Ftag-web-component%2F">Tag</a> (New)</div> <div>New guideline for the web component implementation of the tag.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fuser-menu%2F">User Menu</a></div> <div>The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon in the shell bar.</div> </div>

Page Types

Floorplans

<div> <div>Topic</div> <div>Update</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fpage-types%2Ffloorplans%2Fobject-page%2F">Object Page Floorplan</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fpage-types%2Ffloorplans%2Fobject-page%2F%23responsiveness-2">Responsiveness:</a> Updated guidance on layout columns and content density for form content in the object page.</div> </div>