What’s New in Guideline Version 1.88

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 Items: If 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 Items: Additional 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.