What’s New in Guideline Version 1.70

Intro

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

[internal_only]

Designing Intelligent Systems

Topic
Update
Topic Link

Ranking

Details have been refined to offer more specific guidance.
Ranking

[/internal_only]

Layouts, Floorplans, and Frameworks

Layouts

Topic
Update
Topic Link

Object Page Floorplan

Content Area – Blocks
If you need to show and hide blocks, use a S how More / Show Less toggle button (not a panel container).Global Edit
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.
Object Page Floorplan

UI Elements

Topic
Update
Topic Link

Avatar

Initials

can now have 3 letters.

You can replace the icon avatar with a custom icon. Use this option to display the most suitable icon for your use case.

You can now set the placeholder background color to one of 10 accent colors, or let the system assign it randomly.

An optional border is now available.

Avatar
App teams can now define the style of the separator between the breadcrumb links.
Breadcrumb – Styles

Date Picker

The

month and year views

can now be used separately as a month picker and year picker.

An additional year ranges view has been added to help select a year more quickly.

You can now add a footer toolbar to the date picker. However, this is not recommended for most use cases.

Date Picker
Grid List

Only use grid list items for the grid list, and not other types of list item (such as the standard list item).

In multiple selection mode, users can now use Shift+click to select a range.

Grid List

List

In multiple selection mode, users can now use Shift+click to select a range.
List – Selection Mode

Panel

Usage: Panels are not allowed in the content area of an object page.
Panel – Usage

Quick View

You can now define a fallback icon that is displayed when the intended image or icon can’t be loaded.
Quick View – Layout

Responsive Table

In multiple selection mode, users can now use Shift+click to select a range.
Responsive Table – Select
Section on responsiveness was updated to reflect improved support for tablet and phone.
Search – Responsiveness

Select

The dropdown area has now a maximum width of 600 px to avoid over-wide dropdowns.

Text within the option list can now wrap to multiple lines.

Select – Width

Select Dialog

You now have the option to let users

resize and drag

the dialog.

New feature for remembered selection: In single-select dialogs, clicking the remembered item again closes the dialog. The user no longer needs to click Cancel.

Select Dialog

Single Planning Calendar

The single planning calendar now offers a month

view

.

You now have the option to set working hours, hide non-working hours, and let users toggle between working hours and the full day view.

Single Planning Calendar

Switch

Article was reworked to reflect the new switch type that can be built with sap.m.text + sap.m.objectstatus.

Note that for localization reasons, text is not allowed inside the switch.

Switch

Tree

In multiple selection mode, users can now use Shift+click to select a range.
Tree – Selection Modes

[internal_only]

Services and Resources

[/internal_only][internal_only]

Topic
Update
Topic Link

SAP Fiori Design Stencils

Font 72: download file updated

SAP icon font: Updated to version 4.5

SAP Business Suite icon font: Updated to version 1.057

SAP Fiori Design Stencils – Overview

for Sketch

Updated stencil version for 1.70 (details)
Design Stencils for Sketch – Download

for Axure RP

Updated stencil version for 1.70 (

details

)

Note: From guideline version 1.70, Axure RP9 is required to download the stencils.

Design Stencils for Axure RP – Download

for Adobe XD

As of release 1.70, we no longer provide stencils for Adobe XD. Please use the stencils for Axure RP or Sketch instead.
n/a

[/internal_only]

About Guideline Updates

With each new guideline version, we deliver two types of update:

Note: Our policy is to update only the latest guideline version. If you are working with an earlier SAPUI5 release, also consider checking out the most recent guideline version to get the latest general guidance.