What’s New

Updated: September 24, 2018
SAPUI5 Version 1.56

What’s New in Guideline Version 1.56

Intro

This article provides an overview of the topics that have been added or changed with the guideline version 1.56.

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

  • Updates to reflect new or changed UI controls available with the corresponding SAPUI5 version (SAPUI5 Version 1.56).
  • 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.

General Concepts

SAP Fiori Launchpad

Launchpad Shell Bar

Users can now open apps in “lean mode”. This avoids inconsistent behavior when working with different tabs or windows in parallel, and improves peformance. In lean mode, the shell only shows contextual services for the app. General features (such as the enterprise search, notifications, and functionality in the Me Area) are switched off.

For more information, see Launchpad Shell Bar – Lean Mode.

SAP Fiori Launchpad Services

Under Settings – User Activities, users can now switch tracking of their usage data on or off, and clear their usage history. If tracking is deactivated, they no longer see the Recent Activity and Frequently Used lists in the Me Area.

For more information, see SAP Fiori Launchpad Services – User Activities in Settings Dialog

Tile

Customers can now opt to also use the smaller (smartphone) tile size on desktop/tablet devices (key user setting).

For more information, see Tile – Responsiveness.

Other General Concepts

Export to Spreadsheet  New!

“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet. You can use it to enable users to work with the app data in common spreadsheet applications.

For more information, see Export to Spreadsheet.

Manage Objects – Create, Edit, Delete

Better differentiation between “Add” and “Create” cases:

  • Add: Add an existing object
  • Create: Create a brand new object on the database

For more information, see Manage Objects – Naming Guidelines.

UI Element States  New!

This article provides an overview of the different states that can apply to UI elements:

  • Control states (such as “enabled” or “hidden”)
  • Value states (such as “error” or “warning”)
  • Visual states (such as “hovered” or “pressed”)
  • Additional states (such as “required”)

The article describes the purpose of each state, how it behaves, and how it should be used. There’s also guidance on how the different states can be combined.

For more information, see UI Element States.

Layouts, Floorplans, and Frameworks

Layouts

Dynamic Page (Layout + SAP Fiori Elements)

  • Enhancements for expand/collapse header feature and pin.
  • Updated floorplan examples.

For more information, see Dynamic Page Layout.

Flexible Column Layout

Floorplans

Analytical List Page (SAP Fiori Element)

  • Article images were updated to reflect the change in the header layout (pin available for freezing the expanded state of the header).
  • An example of filter title truncation was added to the Visual Filter Bar section.
  • From SAPUI5 version 1.56, users can apply filtering at table level. For details, see Table-Only View.
  • The recommended format for chart titles in the visual filter bar has changed. For details, see Using Interactive Charts.

For more information, see Analytical List Page (SAP Fiori Element).

Initial Page Floorplan

With SAPUI5 version 1.56, the initial page layout is based on an object page with the dynamic header. Please use this layout for all new apps. The former layout is deprecated.

For more information, see Initial Page Floorplan.

Object Page Floorplan

  • The dynamic header in the object page is now mandatory and should be used instead of the old object page header.
  • Header information and object page header facets are now described as part of the object page article.
  • SAP Fiori elements: do not use the current “page variant” implementation for object pages.

For more information, see Object Page Floorplan.

UI Elements

Analytical Table (ALV)

  • Guidelines were added for “no data” texts in empty tables.
  • Enhanced sort guidelines, including the sort order for the object status.
  • Guidelines were added on sorting aggregated columns. For details, see Aggregate under View Settings.
  • New section on exporting table data to a spreadsheet using the export to spreadsheet function.

For more information, see Analytical Table.

Area Micro Chart

  • The area micro chart now supports the colors from the vizFrame chart palettes.
  • The responsiveness of the labels has been updated. For details, see the Components section.

For more information, see Area Micro Chart.

Combo Box

You can now use the layout options of the form to display the unit of measurement next to the combo box control.

For more information, see Combo Box – Unit of Measurement.

Date/Time Picker

  • The time picker now also has sliders for minutes and seconds, and not just for hours.
  • You can set step intervals for the values offered on the sliders for minutes and seconds.

For more information, see Date/Time Picker.

Form / Simple Form

  • Layout: New column layout option for balancing the content of form groups across multiple columns.
  • Guidelines: New section on label alignment (labels above values vs. right-aligned labels next to the values).
  • Guidelines: New section on adding units of measurement after an input control.

For more information, see Form / Simple Form.

Grid Table

For more information, see Grid Table.

Icon Tab Bar

  • Behavior and Interaction: You can now drag and drop tabs from the tab bar to the overflow menu and vice versa (see Changing the Order of Tabs).
  • Styles: To save space and reduce visual noise, you can now force the icon tab bar into a compact mode, or let it react dynamically to the application’s global density setting (see Tab Density).

For more information, see Icon Tab Bar.

List

For more information, see List.

Mask Input

You can now use the layout options of the form to display the unit of measurement next to the mask input control.

For more information, see Mask Input – Unit of Measurement.

Message View

If there is only one message to display, the message view control no longer navigates automatically to the message details. This feature was removed with SAPUI5 version 1.56 in response to user feedback.

Micro Chart

  • All the micro charts now support the colors from the vizFrame chart palettes.
  • Information and guidelines were added for the “No data” visualization.

For more information, see Micro Chart and the individual micro chart articles:

Multi-Combo Box

You can now use the layout options of the form to display the unit of measurement next to the multi-combo box.

For more information, see Multi-Combo Box – Unit of Measurement.

Multi-Input Field

  • Guidelines: Recommendation to show an error message if the user selects an item that has already been selected.
  • Guidelines: You can now use the layout options of the form to display the unit of measurement next to the multi-input field.

For more information, see Multi-Input Field – Guidelines.

Planning Calendar

  • The working and non-working days can now differ for each row in the planning calendar to reflect different schedules. For details, see List Item.
  • Users can copy and paste appointments within the planning calendar using keyboard combinations.
  • Drag and drop can now also be used to move appointments between rows, create new appointments, and change the duration of an appointment.

For more information, see Planning Calendar.

Popover

Behavior and Interaction: A new “setBlocked” property is available to prevent users from performing actions while the popover is closing.

For more information, see Closing a Popover.

Responsive Table

  • The table toolbar, column headers, and filter info bar can now stick to the top during scrolling (recommended). However, this is subject to certain limitations. For more information, see Scroll.
  • Column alignment: Secondary information in a column should always follow the alignment of the primary information.
  • Property information for the “highlight” feature was added/corrected in different sections.
  • Offer actions for multiple items in the table header (set to “sticky”), rather than in the footer toolbar.
  • Sort guidelines were added:
    • Default sort settings
    • Sort order for different data points, including the object status
  • New section on exporting table data to a spreadsheet using the export to spreadsheet function.

For more information, see Responsive Table.

Select

You can now use the layout options of the form to display the unit of measurement next to the select.

For more information, see Select – Unit of Measurement.

Select Dialog

You can now disable the growing feature (recommended).

For more information, see Select Dialog – Guidelines – Content.

Slider / Range Slider

You can now define custom values as labels, and map these labels to the scale for the range slider. This allows you to use descriptive values, such as dates.

For more information, see Slider – Custom Values and Range Slider – Custom Values.

Table Select Dialog

  • A Reset button is now available for clearing the entries in a multi-select dialog.
  • You can now disable the growing feature (recommended).
  • The info bar showing the selected items is now “sticky”, and no longer scrolls away when the user scrolls down the list.

For more information, see Table Select Dialog.

Tree

  • Guidelines were added for “no data” texts in empty trees. For details, see the content formatting section.
  • New section on exporting tree data to a spreadsheet using the export to spreadsheet function.

For more information, see Tree.

Tree Table

For more information, see Tree Table.

Services and Resources

Design Stencils

Floorplans and Layouts

  • Launchpad (update)

UI Elements

  • Chart (update)
  • Chart // Micro Chart (Update)Date/Time Picker (update)
  • Dynamic Side Content (update)
  • Form (update)
  • Micro Process Flow  New!
  • Object Page (update)
  • Panel  New!
  • Value Help Dialog (update)
  • Visual Filter Bar (update)

For more information, see Design Stencils.