Intro

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

General

Topic Update Topic Link
Revised Guideline Navigation Structure To accommodate a growing number of topics and in response to reader feedback, we have restructured the left-hand navigation tree for the guidelines.

For details of the changes, see Updated Navigation Structure for Guideline Version 1.88.

Navigating the Guidelines

Get Started

Topic Update Topic Link
Navigating the Guidelines The former Get Started article has been renamed to Navigating the Guidelines and updated to reflect the new guideline navigation structure. Navigating the Guidelines
Why Design Guidelines? The former Beginner’s Guide to the Design Guidelines topic has been renamed to Why Design Guidelines? and now appears directly under Get Started in the navigation menu. Why Design Guidelines?

Look, Feel, and Wording

Topic Update Topic Link
Look, Feel, and Wording  New! Overview topic for the Look, Feel, and Wording section. Look, Feel, and Wording
UX Illustrations  New! UX illustrations are visual elements that can be paired with a text to make content more relatable and easier to understand. In SAPUI5, illustrations can be used in illustrated messages for empty states. Learn about the role of illustrations, the different illustration sizes, and best practices for using them. UX Illustrations

General Patterns

Topic Update Topic Link
Delete Objects  New! Dedicated topic that outlines the deletion flows for 4 scenarios:

  • Delete an object from a list report
  • Delete an object from an object page
  • Delete an item from a table in an object page
  • Delete an item from a subpage.
Delete Objects
Draft Handling New section for the “Keep Draft” dialog. When leaving a page in edit mode, the user can decide whether to keep or discard the current draft. Draft Handling – “Keep Draft” Dialog
Empty States  New! Empty states are situations where there is no content to display. This new article looks at the different types of empty states and the basic design pattern. There’s also guidance on how to best construct messages and combine message and image elements to engender a positive user experience. Empty States
General Patterns  New! Overview topic for the General Patterns section. General Patterns
Simple Objects (Create, Edit) Article restructured and rewritten. Simple Objects (Create, Edit)
Situation Handling The redesigned “My Situations” app now uses the flexible column layout to incorporate situations from various business scenarios.

Layout details were added for the situation page, including the content of the situation page header, situation details, solution proposals, and related actions.

New Switching Situations section with guidance on how to use the interactive situation icon and the corresponding situation pop over.

Situation Handling

Layouts and Floorplans

Topic Update Topic Link
Layouts and Floorplans  New! New overview topic that outlines how layouts and floorplans are used to build application pages. Layouts and Floorplans
Object Page Floorplan Forms: Use one form per subsection, updated guidance for action placement.

Tables:

  • Handling of titles in sections/subsections:
    • Sections with only one table: remove the table title
    • Subsections with only one table: hide the subsection title
  • Recommendation for lazy loading: Initially show 10 items
    (previous guidance: 5-10 items)
  • Additional info on embedding analytical tables, grid tables, or tree tables.
  • Navigation to List Report section changed to Navigation to Another Page.
    Navigation target must not always be a list report.
When to Use Which Floorplan  New! Quick feature overview of the different floorplan types and when to use each one. When to Use Which Floorplan
Wizard Floorplan New developer hint: Change the height of the wizard in the code to “auto”.
Otherwise, the wizard will use its own scrollbar instead of using the dynamic page scrollbar.
 Wizard Floorplan – Dynamic Page

UI Elements

Topic Update Topic Link
Calendar Legend: Use consistent highlight colors across a product area. Calendar – Legend
Expandable Text  New!  The expandable text control provides access to truncated texts. Expandable Text
Form / Simple Form Guidance on action placement added.

Expand/collapse: Avoid using expand/collapse behavior in forms.

Form / Simple Form
Export to Spreadsheet Implement the shortcut Shift+Ctrl+E for the Export As… function. Export to Spreadsheet – Menu Button
Illustrated Message  New! The new illustrated message control allows you to use a combination of message text and UX illustration. Its primary use case is to improve the user experience for empty states.

Illustrated Message
Invisible Message  New! New article on when to use the existing invisible message control. The control provides information to users of assistive technologies when dynamic changes are only shown on a visual level (for example, when a search result list appears). Invisible Message
Link Link with icon: Icon is supportive only. A tooltip is not required. Link – Link with Icon
Message Box Delete confirmation: If several objects are being deleted, don’t include the object ID and description in the message. Message Box – Confirmation for Delete
Planning Calendar Legend: Use consistent highlight colors across a product area. Planning Calendar – Legend
Responsive Table Updates on keyboard shortcuts:

  • Select: If the focus is on a row, SPACE selects the corresponding item.
  • Delete Single Item Rows: If the focus is on a row, the keyboard DEL key triggers the Delete button.
  • Line Item Navigation: If the focus is on a row, the ENTER key triggers navigation.
  • Edit Line ItemsIf the focus is on a row, the F2 key triggers the Edit button.
  • Add items: Recommended: Also enable ENTER as a shortcut for triggering the Create button.
  • Personalization: Add the shortcut Ctrl+Comma for opening the personalization dialog.

Select: For single selection master-detail scenarios, always use “single selection master” mode. “Single selection left mode” is not recommended.

Selection: Never disable the selection checkbox.

Columns: Additional guidance on optimizing the column width for tables that have only a few columns.

Drag and Drop: App teams must provide corresponding keyboard support.

Add ItemsAdditional guidance on item states (new, recent, added).

Sort: Ensure that tables are sorted meaningfully when they first load.

Responsive Table
Single Planning Calendar Legend section was added. Single Planning Calendar – Legend
Smart Field Validation for combo boxes: You can now check if the value entered is available in the drop-down list.

Do not use the importance property.

Smart Field
Smart Form  New! New guideline topic for the existing smart form control. Smart Form
Smart List  New! New guideline topic for the existing smart list control. Smart List
Smart Table  Terminology for properties has been adapted to distinguish between OData properties (OData entity property) and SAPUI5 properties (property).

The Show Details/Hide Details section has been enhanced and examples added.

Additional limitations on use of the Maximize/Minimize feature for showing tables in full screen mode.

App-Specific Actions: Guidance on toolbar border design added.

Column Layout:

  • The initial column width can be calculated automatically.
  • End users can now resize columns in the responsive table.
  • The CssDefaults annotation now also works with the responsive table (apps can set an explicit column width).

Content:

  • More differentiated guidance on using the smart toggle and smart field, including performance considerations.
  • Updated annotation table:
    Status Information: Criticality added; input field not recommended
    Text and ID: Sort/filter/group by ID only
    Dates: Edm.DateTime added

Responsiveness: Developer hint added.

  • Changing the layout of the pop-in area
  • Do not use the annotation UI.Importance
Smart Table
UI Elements New overview topic for UI elements. Includes a link list of all UI elements, grouped by category for easier scanning/searching. UI Elements
Variant Management Save View Dialog: Apply Automatically option is not recommended if the selection is likely to result in long loading times. Variant Management – Save View Dialog

SAP Fiori Elements Framework

Topic Update Topic Link
Object Page Header You can enable actions that navigate the user to another page or application based on the value of a specific field. Object Page Header – Conditional Navigation Actions
Object Page Content Area You can add dynamic side content to the right of an object page subsection.

Conditional navigation actions: In the toolbar for an object page form, you can enable actions that navigate the user to another page or application based on the value of a specific field.

Object Page Content Area
Object Page Footer Bar Apply action: Now, when a subobject is open in the flexible column layout with three columns, the Apply action closes the column with the subobject and returns the user to the object page.

Message popover button: The message button now conforms to design guidelines in the following ways:

  • The color of the message button reflects the most critical message level.
  • The message popover displays error message count.
  • Messages without a criticality level are treated as information messages.
Object Page Footer Bar
Table Types You can now add an analytical table to a list report.

Table Types – Intro
Table Toolbar You can enable actions that navigate the user to another page or application based on the value of a specific field. Table Toolbar – Conditional Navigation Actions
Table Features Column width: The content of a table column determines its width. You can change this.

Column importance:

  • By default, the importance of columns is set to none.
  • Columns set to none are handled the same way as columns with medium importance.
  • The exception to this is with SAP Fiori elements for OData V2 for list report columns that contain key fields. Their default importance is high.
Table Features

Table Rows

Conditional navigation actions: You can enable actions that navigate the user to another page or application based on the value of a specific field.

Avatar and other images: You can set tooltip text to display when the focus is on the avatar.

Table Rows

Designer Toolkit

Topic Update Topic Link
Designer Toolkit  New! Overview topic for the Designer Toolkit section. Designer Toolkit
SAP Fiori Design Stencils SAP icon font download updated to version 4.9.

Font 72: New download links for Font 72 monospace (desktop and web).

SAP Fiori Design Stencils – Overview
   Sketch What’s New in Sketch Stencil Version 1.88 Design Stencils for Sketch
   Axure RP What’s New in Axure RP Stencil Version 1.88 Design Stencils for Axure RP
   Adobe XD    What’s New in Adobe XD Stencil Version 1.88 Design Stencils for Adobe XD

About Guideline Updates

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

  • Updates to reflect new or changed UI controls available with SAPUI5.
  • Ongoing updates on how to best apply the SAP Fiori design (such as overarching concepts, floorplans, and additional decision support). These updates are introduced with a given guideline version, but are not necessarily dependent on a specific SAPUI5 version.

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.