What’s New in Guideline Version 1.70

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div> <h4 id="ranking">Ranking</h4> </div> <div>Details have been refined to offer more specific guidance.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Franking">Ranking</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div> <h4 id="object-page-floorplan">Object Page Floorplan</h4> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fpage-types%2Ffloorplans%2Fobject-page%2F">Content Area – Blocks</a><br>If you need to show and hide blocks, use a S <em>how More / Show Less</em> toggle button (not a panel container).<a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fpage-types%2Ffloorplans%2Fobject-page%2F">Global Edit</a><br>Don’t add navigation in edit mode if there’s no anchor bar in display mode and the header contains only a few editable fields.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fpage-types%2Ffloorplans%2Fobject-page%2F">Object Page Floorplan</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div> <h4 id="avatar">Avatar</h4> </div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Favatar%2F">Initials</a></p> <p>can now have 3 letters.</p> <p>You can replace the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Favatar%2F">icon avatar</a> with a custom icon. Use this option to display the most suitable icon for your use case.</p> <p>You can now set the placeholder background color to one of 10 accent colors, or let the system assign it randomly.</p> <p>An optional border is now available.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Favatar%2F">Avatar</a></div> </div> <div> <div> <h4 id="breadcrumb">Breadcrumb</h4> </div> <div>App teams can now define the style of the separator between the breadcrumb links.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fbreadcrumb%2F">Breadcrumb – Styles</a></div> </div> <div> <div> <h4 id="date-picker">Date Picker</h4> </div> <div> <p>The</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fdate-picker%2F">month and year views</a></p> <p>can now be used separately as a month picker and year picker.</p> <p>An additional year ranges view has been added to help select a year more quickly.</p> <p>You can now add a <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fdate-picker%2F">footer toolbar</a> to the date picker. However, this is not recommended for most use cases.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Finternal%2Ffiori-design-web%2Fv1-70%2Fdate-picker">Date Picker</a></div> </div> <div> <div><strong>Grid List</strong></div> <div> <p>Only use grid list items for the grid list, and not other types of list item (such as the standard list item).</p> <p>In multiple selection mode, users can now use <strong>Shift+click</strong> to select a range.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fgrid-list%2F">Grid List</a></div> </div> <div> <div> <h4 id="list">List</h4> </div> <div>In multiple selection mode, users can now use <strong>Shift+click</strong> to select a range.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Flist-overview%2F">List – Selection Mode</a></div> </div> <div> <div> <h4 id="panel">Panel</h4> </div> <div>Usage: Panels are not allowed in the content area of an object page.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fpanel%2F">Panel – Usage</a></div> </div> <div> <div> <h4 id="quick-view">Quick View</h4> </div> <div>You can now define a fallback icon that is displayed when the intended image or icon can’t be loaded.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fquickview%2F">Quick View – Layout</a></div> </div> <div> <div> <h4 id="responsive-table">Responsive Table</h4> </div> <div>In multiple selection mode, users can now use <strong>Shift+click</strong> to select a range.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fresponsive-table%2F">Responsive Table – Select</a></div> </div> <div> <div> <h4 id="search">Search</h4> </div> <div>Section on responsiveness was updated to reflect improved support for tablet and phone.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fsearch%2F">Search – Responsiveness</a></div> </div> <div> <div> <h4 id="select">Select</h4> </div> <div> <p>The dropdown area has now a maximum width of 600 px to avoid over-wide dropdowns.</p> <p>Text within the option list can now wrap to multiple lines.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fselect%2F">Select – Width</a></div> </div> <div> <div> <h4 id="select-dialog">Select Dialog</h4> </div> <div> <p>You now have the option to let users</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fselect-dialog%2F">resize and drag</a></p> <p>the dialog.</p> <p>New feature for <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fselect-dialog%2F">remembered selection</a>: In single-select dialogs, clicking the remembered item again closes the dialog. The user no longer needs to click <em>Cancel</em>.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fselect-dialog%2F">Select Dialog</a></div> </div> <div> <div> <h4 id="single-planning-calendar">Single Planning Calendar</h4> </div> <div> <p>The single planning calendar now offers a month</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fsingle-planning-calendar%2F">view</a></p> <p>.</p> <p>You now have the option to set <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fsingle-planning-calendar%2F">working hours</a>, hide non-working hours, and let users toggle between working hours and the full day view.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fsingle-planning-calendar%2F">Single Planning Calendar</a></div> </div> <div> <div> <h4 id="switch">Switch</h4> </div> <div> <p>Article was reworked to reflect the new switch type that can be built with sap.m.text + sap.m.objectstatus.</p> <p>Note that for localization reasons, text is not allowed inside the switch.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Fswitch%2F">Switch</a></div> </div> <div> <div> <h4 id="tree">Tree</h4> </div> <div>In multiple selection mode, users can now use <strong>Shift+click</strong> to select a range.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fui-elements%2Ftree%2F">Tree – Selection Modes</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div> <h4 id="sap-fiori-design-stencils">SAP Fiori Design Stencils</h4> </div> <div> <p>Font 72: download file updated</p> <p>SAP icon font: Updated to version 4.5</p> <p>SAP Business Suite icon font: Updated to version 1.057</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fresources%2Flibraries%2Fdownloads">SAP Fiori Design Stencils – Overview</a></div> </div> <div> <div> <h4 id="for-sketch">for Sketch</h4> </div> <div>Updated stencil version for 1.70 (<a href="https%3A%2F%2Fwww.sap.com%2Fwp-content%2Fuploads%2Fsites%2F56%2F2019%2F10%2FWhats-New_Sketch_1.70.pdf">details</a>)</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fresources%2Flibraries%2Fcloud-erp%2Fdesign-stencils-for-sketch">Design Stencils for Sketch – Download</a></div> </div> <div> <div> <h4 id="for-axure-rp">for Axure RP</h4> </div> <div> <p>Updated stencil version for 1.70 (</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fwp-content%2Fuploads%2Fsites%2F56%2F2019%2F10%2FWhats-New_Axure-RP_1.70.pdf">details</a></p> <p>)</p> <p>Note: From guideline version 1.70, <a href="https%3A%2F%2Fwww.axure.com%2Fupgrade">Axure RP9</a> is required to download the stencils.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-70%2Fresources%2Flibraries%2Fcloud-erp%2Fdesign-stencils-for-axure-rp">Design Stencils for Axure RP – Download</a></div> </div> <div> <div> <h4 id="for-adobe-xd">for Adobe XD</h4> </div> <div>As of release 1.70, we no longer provide stencils for Adobe XD. Please use the stencils for Axure RP or Sketch instead.</div> <div>n/a</div> </div>