After much anticipation, we are happy to announce that versions 1.32, 1.34, 1.36, and 1.38 of the SAP Fiori Design Guidelines are now available!

The SAP Fiori Design Guidelines are based on the corresponding versions of the SAP UI Development Toolkit for HTML5 (SAPUI5). They offer a single point of reference to anyone involved in designing SAP Fiori apps. Although the SAPUI5 documentation already describes the visual design and control behavior to some extent, this alone doesn’t necessarily guarantee a great user experience. SAP Fiori apps follow consistent and endorsed interaction patterns – and these are described in detail in the guidelines. Dedicated articles on layouts, patterns, and controls offer concrete guidance on designing UIs for specific use cases and help you make the connection between design considerations and the corresponding SAPUI5 controls.

With these four new versions, we are excited to introduce you to many new and improved control features, helpful overviews and resources, and a beautiful new design. Check out what’s new in each of the versions below.

• What’s New with Version 1.32
• What’s New with Version 1.34
• What’s New with Version 1.36
• What’s New with Version 1.38 

What’s New in Version 1.32?

This version contains important new articles and many improvements on existing guidelines. Check out some highlights below:

Smart Templates

Smart templates provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns. The goals are to ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of frontend code for building SAP Fiori apps. The following floorplans are currently available with smart templates: list report, object page, and overview page.

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. Within SAP Fiori, the progress indicator is used as a “meter” or mini chart. It indicates a current object status and is not related to any process that is currently running.

Time Picker

With the time picker, the user can select a localized time using the 12-hour or the 24-hour clock.

To get the detailed and complete overview of all new and updated articles, check out What’s New in Version 1.32.

What’s New in Version 1.34?

This version contains tons of brand new articles and updates, including information on the breadcrumb, handling busy states, invisible text, multi-instance handling, and much more. Check out some highlights in the video below:

Fiori Launchpad Anchor Bar

On the homepage of the SAP Fiori launchpad, the tile groups are now listed in the anchor bar at the top of the page. As a result, the group panel no longer exists, and the tile catalog has moved to the Options menu in the top right corner of the screen.

Combo Box

The new two-column combo box layout lets you show additional information next to the values, such as currencies next to countries, or prices next to products. The width of the option list now automatically adapts to fit its content.

Multi-Instance Handling

The multi-instance handling floorplan allows users edit and view multiple items at once. If a user selects several items in a list, they are opened simultaneously in a tabbed container.

For a detailed list of changes and additions, check out What’s New in Version 1.34.

What’s New in Version 1.36?

Updated features and improved articles for topics including the global search, smart link, message page, feed and notes, and much more. Check out some highlights below:

Using Tooltips

Tooltips are appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do not have a label or, in rare cases, to display additional information. For additional guidelines on how to use tooltips, check out this article!

Global Search (SAP Fiori Launchpad)

Search results can now be visualized as pie or bar charts (multiselection is possible).

Get the complete list of updated features and improved articles, check out What’s New in Version 1.36.

What’s New in Version 1.38?

New articles on mass editing, the menu button, the analytical card, the map container, and more. Check out some highlights in the video below:

Mass Editing

Mass editing lets users change multiple objects simultaneously. The new guideline explains when and when not to use mass editing. A combo box or select control in a dialog can be used to edit all column values in one go. Users can opt to keep existing values, or overwrite them.

Range Slider

The new range slider control lets users select a value range within a predefined numerical interval. Users simply drag one end of the range using the circular grips, or click or tap any point on the bar.

Choosing Charts

To help designers find their way through the diverse choice of charts available, the SAP Fiori Design Guidelines now contain a new chart overview, Choosing the Correct Chart Type. The overview explains which charts best suit a particular focus, depending on what you actually need to illustrate.

Check out the new articles, information on updates features, and improved guidelines in What’s New in Version 1.38.

Want more? Check out the Explore page to get an overview of all the different UI elements, floorplans, smart templates, and more. We hope you enjoy discovering the SAP Fiori Design Guidelines!