Updated: March 8, 2017

What’s New in Guideline Version 1.38?


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

Highlights from Version 1.38 of the SAP Fiori Design Guidelines

General Concepts

Mass Editing

New article! Mass editing allows users to change multiple (homogenous) objects simultaneously. By aggregating all values of each of these facets, users can quickly chose to either keep or overwrite them.

For more information, see mass editing.

Smart Templates, Floorplans & Frameworks

Analysis Path Framework

Updated guidelines:

  • Context-sensitive user assistance can be enabled for the APF configuration modeler.
  • Users now have the option to choose the smart filter bar to configure global filters with the APF configuration modeler.

For more information, see analysis path framework.


Updated guideline: Improved floorplan article based on feedback from the SAP Fiori Design community.

For more information, see wizard floorplan.

UI Elements

Analytical Card

New article! Overview of all VizFrame charts that may be used in the overview page, including correct usage, limitations, and recommendations for the following chart types:

  • Line chart
  • Bubble chart
  • Donut chart
  • Column chart
  • Stacked column chart
  • Vertical bullet chart

For more information, see analytical card.

Charts | sap.viz.ui5.controls.VizFrame

New articles!

New charts

  • Combined column and line with time axis.
  • Combined column and line with time axis and dual axis.

New features

  • Hatched areas in columns, bars, stacked columns, stacked bars, bullets are now available to represent projected values.
  • Ability to display the first and last value on top of a line chart.
  • Improve visual design for hierarchies.

For more information, see chart.

Combo Box | sap.m.Combobox

New feature: Improved mobile handling. When the user taps on the dropdown arrow of the combo box, the option list opens in full width.

For more information, see combo box.

Input Field | sap.m.Input

New feature: Ability to add multiple values via copy/paste or drag-and-drop, and information on managing those values via value help dialog.

For more information, see input field.

Map Container | sap.ui.vk.MapContainer

New article! The map container is a predefined feature set for maps. It fits most use cases and makes it easier for app developers to work with maps.

For more information, see map container.

Menu Button | sap.m.MenuButton

New article! The menu button differs visually from a regular button by featuring an expand icon, which triggers a dropdown menu.

For more information, see menu button.

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

New guideline: Information on the features “highlight path” and “business focus”.

For more information, see process flow.

Responsive Table | sap.m.Table

New guideline: When used via keyboard, the responsive table now supports two different modes:

  • Navigation (default, as before): For fast navigation around the app, with a short tab chain.
  • Edit: For (mass) editing scenarios, with a long tab chain.

For more information, see responsive table.

Upload Collection | sap.m.UploadCollection

New features:

  • Uploading a new version
  • Clickable attributes

For more information, see upload collection.

Value Help Dialog | sap.ui.comp.valuehelpdialog.ValueHelpDialog

Updated guideline: The value help dialog now allows the user to select multiple values at once via copy and paste from a clipboard.

For more information, see value help dialog.

Variant Management | sap.ui.comp.variants.VariantManagement

New feature: The smart variant management now works as a page variant. It includes filter settings and table layouts in a single variant.

For more information, see variant management.

Range Slider | sap.m.RangeSlider

New article! The range slider is a user interface control that enables the user to select a value range in a predefined numerical interval.

For more information, see range slider.