This article provides an overview of the topics that have been added or changed with the guideline version 1.32. The content is based on the controls available with SAPUI5 version 1.32.

General Concepts

Action Placement

New article! Information on action placement for global and local actions within the footer toolbar, chart toolbar, table toolbar, table row, and more.

For more information, see action placement.

Draft Handling

The articles Locking and Draft Handling have been merged and improved. Changes include:

• New sections and more detailed information about the editing status.
• More detailed information on displaying statuses.
• New interaction flows, dialogs and states for expired locks.
• New message patterns for multiple items actions.

For more information, see draft handling.

Flag and Favorite

New information on the object header: If you use the responsive object header, both the flag icon and the favorite icon are shown right behind the object title.

For more information, see flag and favorite.

Navigation

The edit and display behavior was extended with a draft version concept. The draft version can be bookmarked for later editing.

For more information, see navigation.

Removing Leading and Trailing Whitespace

New article! This article explains how to manage leading and treading whitespace (blanks) when copying and pasting text into input controls (such as input fields, text areas, and so on).

For more information, see removing leading and trailing whitespace.

SAP Fiori Launchpad

Enterprise Search (formerly known as global search)

New personalized search feature tracks the search interactions of the user to create result rankings that are better suited to the individual needs of the user. Through the new advanced search feature, the extension of the filter dialog enables the user to set up individual filters, such as specific time ranges.

For more information, see enterprise search.

Home Page

New interaction for removing tiles from the home page and for accessing tile actions. In the edit mode, users now have two dedicated icons and clickable areas.

For more information, see SAP Fiori launchpad home page.

Overview

New article! An overview of the SAP Fiori launchpad and its main components.

For more information, see SAP Fiori launchpad overview.

Services

New guidelines for displaying loading information and errors in the user preferences dialog.

For more information, see SAP Fiori launchpad services.

Smart Templates, Floorplans & Frameworks

Master List

New exception added for multiple-item selection: If one of the selected items is in draft mode and the details of this item are displayed, actions are enabled for this item.

New workflows for deleting single or multiple items.

For more information, see master list.

Overview – Floorplans, Smart Templates and Frameworks

Article improvement: In addition to giving an overview of all floorplans used in SAP Fiori, this article now contains an overview of all smart template floorplans, as well as information on the different frameworks used by SAP Fiori.

Introduction to Smart Templates

New article! 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 term “smart” refers to the annotations that add semantics and structures to the provided data, and the way in which the templates understand these semantics.

List Report (Smart Template)

New article! The smart template list report floorplan is an instance of the general list report floorplan implemented as a reusable template. The list report floorplan allows users to work with large lists of items and take action.

Object Page (Smart Template)

New article! The object page floorplan allows the user to display, create, or edit an object. This is now the recommended floorplan for representing both simple and complex objects in SAP Fiori. Use the pre-built smart template to speed up development if the supported feature set matches your requirements.

Overview Page (Smart Template)

New article! Based on a specific domain or role, the overview page (OVP) is a new data-driven SAP Fiori app that provides all the information a user needs to view, filter, and react to data in a one-stop-shop page. The OVP employs cards (containers of content) based on smart template technology as a UI framework for organizing large amounts of information on an equal plane within the page.

For more information, see smart template overview page.

UI Elements

Analytical Table | sap.ui.table.AnalyticalTable

New guideline: To avoid problems when scrolling vertically, set all rows to the same height.

For more information, see analytical table.

Feed Input | sap.m.FeedInput and sap.m.FeedListItem

The articles on the feed input and the feed list item have been merged and improved.
A new section on handling multiple types of notes has been added.

For more information, see feed input.

Filter Bar/Smart Filter Bar | sap.ui.comp.filterbar.FilterBar & sap.ui.comp.filterbar.SmartFilterBar

Information on the filter bar and the smart filter bar has been consolidated and improved.

For more information, see filter bar/smart filter bar.

Grid Table | sap.ui.table.Table

New guideline: To avoid problems when scrolling vertically, set all rows to the same height.

For more information, see grid table.

Icon Tab Bar | sap.m.IconTabBar

New information: Text-only tabs are no longer affected by truncation: You now have more freedom and do not have to worry about longer labels and their respective translations. However, you must ensure that these designs remain accessible on smaller screens.

For more information, see icon tab bar.

Map | sap.ui.vbm.GeoMap and sap.ui.vbm.AnalyticMap

Route

New features: A border line can now be added, and routes can be dashed or dotted.

Legend

New feature: Click event on legend now available.

Thumbnail Mode

The map control can now be minimized to a thumbnail, which can be used for tiles on the SAP Fiori launchpad.

For more information about these features, see maps.

Object Display Components | sap.m.ObjectStatus | sap.m.ObjectIdentifier | sap.m.ObjectNumber

Article Object Display Elements was renamed. Merged and improved guidelines for object status, object identifier, and object number.

Updated guidelines for icon usage for the object status.

For more information, see object display components.

Panel | sap.m.Panel

New design property “BackgroundDesign” allows you to set the background color of the panel.

A link to the API of the control was also added.

For more information, see panel.

Process Flow | sap.suite.ui.commons.ProcessFlow

New detailed description of the property FoldedCorners and its effects.

New feature: Aggregation (property: Type=Aggregated) allows you to visualize nodes as a stack.

For more information, see process flow.

Progress Indicator  | sap.m.ProgressIndicator

New article! The progress indicator is used as a “meter” or as a mini chart. It indicates the current status of an object.

For more information, see progress indicator.

Responsive Table | sap.m.Table

New examples of behavior and interaction for single selection.

For more information, see responsive table.

Smart Filter Bar Annotations | sap.ui.comp.filterbar.FilterBar & sap.ui.comp.filterbar.SmartFilterBar

New article! Information on configuring additional settings or overwriting settings from the OData service.

For more information, see smart filter bar annotations.

Timeline | sap.suite.ui.commons.Timeline

To be consistent with other controls, the plus button was moved to the right.

New section on refreshing: Subtly make the user aware of new posts by using the message strip.

For more information, see timeline.

Time Picker | sap.m.TimePicker

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

For more information, see time picker.

Toolbar | sap.m.OverflowToolbar

Overflow behavior extended: You can now set prioities and grouping for the actions in the toolbar.

For more information, see toolbar overview.

Tree Table | sap.ui.table.TreeTable

New guideline: To avoid problems when scrolling vertically, set all rows to the same height.

For more information, see tree table.

Upload Collection | sap.m.UploadCollection

Bug fix: Uploads are no longer bundled as one single request. This allows users to cancel individual uploads.

New feature: The headline title can now be changed by the application.

Layout: The use of additional attributes and statuses is described in more detail with updated images.

Styles: Detailed description of the property showSeparators and its effects.

New examples: Concrete do/don’t examples for the use of actions.

For more information, see upload collection.

VizFrame | sap.viz.ui5.controls.VizFrame

Chart – Color Palettes

• Article improved after incorporating user feedback.

Time Axis

• Design: Responsive rules and the position of the ticker have changed.
• New chart available: Column chart with time axis.
• New time level supported: Quarters are supported and localized.
• Four new zooming levels
• More customization options for labels
• New option to adjust the value axis

For more information, see time axis.