Intro

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

General Concepts

Handling Busy States

Updated guideline: The “flower” animation is no longer used, resulting in improved app performance.

For more information about the loading behavior for apps, see handling busy states.

Mass Editing

Updated guideline: The article now covers mass editing for:

  • Dates
  • Input fields with value help
  • Multi input fields

For more information, see mass editing.

Notification Center

New article! The notification center provides a real-time overview of all notifications from various sources (such as the workflow inbox, or SAP CoPilot).

  • The nofication center is part of the SAP Fiori launchpad shell (viewport), so users can access it at any time, regardless of the app they are working on.
  • Users can order the notifications, take action, or navigate to the source.
  • The 5 latest notifications appear as a preview on the SAP Fiori launchpad.

For more information, see notification center.

SAP Fiori Elements, Floorplans & Frameworks

Dynamic Page Layout | sap.f.DynamicPage

New article! The dynamic page is a new, generic layout control that has been designed to support various floorplans and use cases:

  • Fully responsive
  • Successor of the full screen layout
  • Consistent snapping header concept
  • Footer bar for finalizing or closing actions
  • Standard layout for SAP Fiori elements (formerly known as smart templates)

For more information, see dynamic page layout.

List Report Floorplan

New feature: The list report floorplan now uses the dynamic page layout:

  • The header title contains global actions.
  • The header content (filter bar) can be collapsed.
  • Finalizing (or closing) actions are located in a footer toolbar.

For more information, see the list report floorplan. 

List Report (Smart Templates/SAP Fiori Elements)

New features:

  • You can now differentiate between global actions and finalizing (or closing) actions. Finalizing actions are placed on the footer toolbar.
  • Cells in the responsive table can now contain smart micro area charts and smart micro bullet charts.
  • App-specific actions in the table toolbar can now be enabled or disabled, depending on whether they are relevant for the items currently selected.

For more information, see list report (smart templates / SAP Fiori elements). 

Object Page (Floorplan + SAP Fiori Elements)

Updated guideline: The feature list for the object page template (SAP Fiori element) has been updated.

For more information, see object page (floorplan + SAP Fiori elements).

Responsive Splitter | sap.ui.layout.ResponsiveSplitter

New article! The responsive splitter is a new control for the tool landscape for the SAP HANA Cloud Platform. It allows you to structure complex applications by splitting them into separate, resizable areas that can be displayed side-by-side.

For more information, see responsive splitter.

Worklist Floorplan

Updated guideline: The article now includes a new section “Worklist Floorplan with the Dynamic Page Layout”.

For more information, see worklist floorplan.

UI Elements

Header Toolbar | sap.m.Toolbar

New article! The header toolbar is used for global actions that are relevant for the whole page. This toolbar is always visible, and doesn’t scroll away.

For more information, see header toolbar.

Lightbox | sap.m.LightBox

New article! You can now use the lightbox control to let users display an image in its original size.

For more information, see lightbox.

Multi-Combo Box | sap.m.MultiComboBox

New feature: The behavior of the control has been improved for mobile devices.

For more information, see multi-combo box.

Responsive Table | sap.m.Table

Updated guideline:

  • content formatting cheat sheet is now available.
  • The introduction explains the term “data point” in greater detail.
  • An example has been added in the section Column Header – Best Practices.
  • The description for the property “enableBusyIndicator” has been improved.

For more information, see responsive table.

Smart Table | sap.ui.comp.smarttable

New feature: You can now use the GroupBy property to group analytical tables by default.

For more information, see smart table.

Table Overview

Updated guideline: Information relating to the tree control was added.

For more information, see table overview.

Timeline | sap.collaboration.components.feed.Component

New features:

  • The control is now fully responsive, allowing it to be used on larger screens.
  • The timeline can be grouped into expandable/collapsible sections.

For more information, see timeline.

Toolbar Overview | sap.m.OverflowToolbar

New feature: To improve the usability of all applications, we now distinguish between global actions and finalizing (or closing) actions:

  • Global actions for the whole page are placed in the header toolbar.
  • Finalizing or closing actions are placed in the footer toolbar.

All toolbar articles reflect the new behavior and include examples.

For more information, see overview toolbar, header toolbar, and footer toolbar.

Tree | sap.m.Tree

New article! A new basic tree control is now available:

  • Simple tree with icon, text, and counter per item
  • To be used in master lists, dialogs, popovers, and so on
  • Supports single selection and multi-selection
  • Option to add navigation indicators

For more information, see tree.

Upload Collection | sap.m.UploadCollection

New feature: The upload collection control now allows users to sort and filter the list of attachments.

For more information, see upload collection.

Services and Resources

Design Stencils

The design stencils for Axure RP have been updated to the latest SAPUI5 version 1.42 (including SAPUI5 icon font).

For more information, see design stencils.