What’s New in Guideline Version 1.122

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Morning Horizon Colors</strong><br><strong>Evening Horizon Colors</strong></div> <div> <p>Additional information on alignment with SAP visual brand identity.</p> <p>Added link to the <a href="https%3A%2F%2Fbrand.sap.com%2Fcolor">SAP brand visual identity for colors</a>.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Ffoundations%2Fvisual%2Fcolors%2Fmorning-horizon">Morning Horizon Colors</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Ffoundations%2Fvisual%2Fcolors%2Fevening-horizon">Evening Horizon Colors</a></div> </div> <div> <div><strong>Iconography – Horizon</strong></div> <div> <p>Additional information on alignment with SAP visual brand identity.</p> <p>Added link to <a href="https%3A%2F%2Fbrand.sap.com%2Ficons">SAP brand visual identity for icons</a>.</p> <p>Updated links and information for:</p> <ul> <li>The icon change log and downloading SVG versions</li> <li>Horizon icon collection info pages, including information on how to request icons</li> </ul> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Ffoundations%2Fvisual%2Ficonography%2Ficonography-horizon">Iconography – Horizon</a></div> </div> <div> <div><strong>Typography – Horizon</strong></div> <div> <p>Added information on the brand version of font 72.</p> <p>Added link to the <a href="https%3A%2F%2Fbrand.sap.com%2Ftypography">SAP brand visual identity for typography</a>.</p> <p>Note that the brand version is <strong>not intended for use in SAP products</strong>.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Ffoundations%2Fvisual%2Ftypography%2Ftypography-horizon%2372-brand-and-product-versions">Typography – Horizon: 72 Brand and Product Versions</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Shell Bar</strong></div> <div>The article has been updated to reflect the latest requirements in SAP’s product standard for UX consistency[internal_only] (<a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-016">UXC-016: Shell</a>)[/internal_only].</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fshell-bar%2F">Shell Bar</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>AI Acknowledgement <em>NEW</em></strong></div> <div>Users need to be informed about embedded AI services. This includes disclaimers, changes to AI services, and maintenance messages.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fai-acknowledgment%2F">AI Acknowledgement</a></div> </div> <div> <div><strong>AI Button</strong></div> <div>Example added: Use of the AI button in a content generation scenario.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fai-button%2F%23behavior-and-interaction">AI Button – Behavior and Interaction</a></div> </div> <div> <div><strong>AI Notice</strong></div> <div>AI text generation: How to make users aware of AI involvement and its implications.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fai-notice%2F">AI Notice</a></div> </div> <div> <div><strong>AI Progress Indicator <em>NEW</em></strong></div> <div>The AI progress indicator provides information about the status of a user’s request while they wait for AI content to be generated.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fai-progress-indicator%2F">AI Progress Indicator</a></div> </div> <div> <div><strong>AI Prompt Input <em>NEW</em></strong></div> <div>Input field for entering custom AI prompts. Custom prompts are instructions the user writes from scratch in natural language for AI to follow when generating outputs.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fai-prompt-input%2F">AI Prompt Input</a></div> </div> <div> <div><strong>AI Text Highlight <em>NEW</em></strong></div> <div>AI text highlighting enables users to to recognize the difference between AI-generated text and human-authored text.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fai-text-highlight%2F">AI Text Highlight</a></div> </div> <div> <div><strong>Guided Prompts <em>NEW</em></strong></div> <div>Guided prompts are structured UIs that allow users to instruct generative AI models by adjusting a set of predefined parameters.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fguided-prompts%2F">Guided Prompts</a></div> </div> <div> <div><strong>InnerSource Process for SAP AI Experiences</strong></div> <div>This article has been withdrawn. The process is currently under review.</div> <div> </div> </div> <div> <div><strong>Quick Prompts <em>NEW</em></strong></div> <div>Quick prompts are predefined actions that trigger AI services, and can be integrated into workflows. Examples include fixing spelling and grammar, or summarizing a text.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Fquick-prompts%2F">Quick Prompts</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Object Page</strong></div> <div>It is now possible to use grid tables within an object page.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fpage-types%2Ffloorplans%2Fobject-page%2F%23tables">Object Page Floorplan – Tables</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Flexible Column Layout <em>NEW</em></strong></div> <div>Guideline for the web component implementation of the flexible column layout.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fpage-types%2Fpage-layouts%2Fflexible-column-layout-web-component%2F">Flexible Column Layout</a></div> </div> <div> <div><strong>Time Picker</strong></div> <div> <p>Guideline for the web component implementation of the time picker.</p> <p>Note: The guideline describes the <strong>target design</strong>. The web component doesn’t yet offer all the specified time picker features.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Ftime-picker-web-component%2F">Time Picker</a></div> </div> <div> <div><strong>Toast</strong></div> <div>Don’t apply semantic styling to the message toast.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Ftoast-web-component%2F">Toast</a></div> </div> <div> <div><strong>Web Card System <em>NEW</em></strong></div> <div>Target design for the new modular and highly-flexible web card system.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fweb-card-system%2F">Web Card System</a></div> </div> <div> <div><strong>Web Card System – Card Header <em>NEW</em></strong></div> <div>Describes the usage of the card header elements in the web card system.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fweb-card-system%2Fcard-header%2F">Web Card System – Card Header</a></div> </div> <div> <div><strong>Web Card System – Media <em>NEW</em></strong></div> <div>Describes the usage of the media block in the web card system.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fweb-card-system%2Fmedia-in-web-card-system%2F">Web Card System – Media</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Flexible Column Layout <em>NEW</em></strong></div> <div>Guideline for the web component implementation of the flexible column layout.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fpage-types%2Fpage-layouts%2Fflexible-column-layout-web-component%2F">Flexible Column Layout</a></div> </div> <div> <div><strong>Time Picker</strong></div> <div> <p>Guideline for the web component implementation of the time picker.</p> <p>Note: The guideline describes the <strong>target design</strong>. The web component doesn’t yet offer all the specified time picker features.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Ftime-picker-web-component%2F">Time Picker</a></div> </div> <div> <div><strong>Toast</strong></div> <div>Don’t apply semantic styling to the message toast.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Ftoast-web-component%2F">Toast</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>List Report Header</strong></div> <div> <p>With SAP Fiori elements for OData V4, you can control the visibility in the</p> <p><em>Share</em></p> <p>menu of the</p> <p><em>Send E-mail</em></p> <p>and</p> <p><em>Share: Microsoft Teams</em></p> <p>options at both application level and page level.</p> <p>The <em>Share: Microsoft Teams</em> menu can include the <em>As Card</em> option.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23share-menu">List Report Header (SAP Fiori Elements) – Share Menu</a></div> </div> <div> <div><strong>Object Page Header</strong></div> <div> <ul> <li>SAP Fiori elements for OData V4 now: <ul> <li>Uses the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fui-elements%2Flightbox%2F">lightbox</a> control to allow a larger view of the image</li> <li>Gives you control over the visibility of items in the <em>Share</em> menu</li> </ul> </li> <li>SAP Fiori elements for OData V2 now allows for a message strip in the object header.</li> </ul> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fobject-page%2Fobject-page-header-sap-fiori-elements">Object Page Header (SAP Fiori Elements)</a></div> </div> <div> <div><strong>Table Features</strong></div> <div> <p>With SAP Fiori elements for OData V2:</p> <ul> <li>You can now ask application developers to ensure the width of table columns is adjusted to the contents of both the column and the column header.</li> <li>When a table column contains a combination of fields, such an ID and a description or a field group, the quick sort allows users to specify a sort and sort order for each field in the column.</li> </ul> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-122%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-features-sap-fiori-elements">Table Features (SAP Fiori Elements)</a></div> </div>