What’s New in Guideline Version 1.142

<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%2Fui-elements-sap-design-system">UI Elements in the SAP Design System</a> (New)</div> <div>Overview page that introduces our key implementation technologies – SAPUI5 and SAP Web Components – and describes how guidance for these technologies is presented in the component guidelines.</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%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fsmart-templates">SAP Fiori Elements - Overview</a></div> <div>This page has been updated with a link to the SAP Developer with a link to the <a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2Ftest-resources%2Fsap%2Ffe%2Fcore%2FfpmExplorer%2Findex.html%23%2Ftopic%2Fintroduction">SAP Fiori Development Portal</a> where you can explore the design capabilities of SAP Fiori elements for OData V4 and the various options for the building blocks, and to experiment with their behavior – both standalone and when used in standard floorplans.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fsap-products%2Fsap-s4hana-only%2Fai-assisted-error-explanation">AI-Assisted Error Explanation</a></div> <div>AI-assisted error explanation helps users understand and resolve the errors or warnings that they encounter 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%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fai-features%2Fai-input-assistance">AI Input Assistance</a></div> <div> <p>AI input assistance eases data entry for a new or existing object by recommending values for the input fields, based on previous input or business data.</p> <p>It’s available in applications developed with SAP Fiori elements for OData V4.</p> </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%2Favatar%2F">Avatar</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Favatar-group%2F">Avatar Group</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fdatetime-picker%2F">Date/Time Picker</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Finput-field%2F">Input</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fmessage-strip%2F">Message Strip</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fpopover%2F">Popover</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider%2F">Range Slider</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fsegmented-button%2F">Segmented Button</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fslider%2F">Slider</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftoggle-button%2F">Toggle Button</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%2Fp13n-dialog-popup%2F%23columns">P13n Dialog</a></div> <div>Updated with new toggles on the <em>Columns</em> tab for controlling the content displayed there.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fanalytical-table-alv%2F">Analytical Table</a></div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fanalytical-table-alv%2F%23key-identifier">Content Formatting – Key Identifier</a>:</p> <ul> <li>Updated guidance for strings with IDs: Show the ID together with the corresponding description in one column whenever possible.</li> </ul> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fanalytical-table-alv%2F%23actions">Actions</a>:</p> <ul> <li>Update on the placement of actions (as for <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fgrid-table%2F%23actions">grid table actions</a>).</li> <li>When using a dedicated column for row actions, no column header is required for accessibility purposes.</li> </ul> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fanalytical-table-alv%2F%23group-1">Grouping</a>:</p> <ul> <li>Updated general guidance: Don’t use grouping to display hierarchical data structures.</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fgrid-table%2F">Grid Table</a></div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fgrid-table%2F%23key-identifier">Content Formatting – Key Identifier</a>:</p> <ul> <li>Updated guidance for strings with IDs: Show the ID together with the corresponding description in one column whenever possible.</li> </ul> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fgrid-table%2F%23actions">Actions</a>:</p> <ul> <li>Update on the placement of actions.</li> <li>When using a dedicated column for row actions, no column header is required for accessibility purposes.</li> </ul> </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> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23actions">Actions</a>:</p> <ul> <li>Update on the placement of actions.</li> <li>When using a dedicated column for row actions, no column header is required for accessibility purposes.</li> </ul> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fresponsive-table%2F%23group-1">Grouping</a>:</p> <ul> <li>Updated general guidance: Don’t use grouping to display hierarchical data structures.</li> </ul> </div> </div>

<div> <div>Topic</div> <div>Update</div> </div> <div> <div>Avatar<br>Avatar Group<br>Date/Time Picker<br>Input<br>Message Strip<br>Popover<br>Range Slider<br>Segmented Button<br>Slider<br>Toggle Button</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>