Show TOC

What's New in SAPUI5Locate this document in the navigation structure

With this release the UI development toolkit for HTML5 (SAPUI5) is upgraded from version 1.26 to 1.28.

The following sections highlight the main new features and enhancements to SAPUI5. For a complete, detailed list of all new and enhanced functions, see the Change Log in the Demo Kit.

New Features

All of these features can be used on their own or in combination with each other. For more information, see the sap.ui.core.mvc.XMLView examples in the Explored section of the Demo Kit.

Expression Binding: This new feature allows you to use expressions in bindings. This reduces the need to program formatters for views, especially when using XML templating. For more information, see Expression Binding.
Example
<!--Set to visible if the status is critical and the amount is above the threshold (note escaping of &&)-->
visible="{= ${status} === 'critical' &amp;&amp; ${amount} > 10000 }"
 
<!--Text for amount level using language-dependent texts from the resource model.-->
text="{= ${/amount} > 10000 ? ${i18n>/high} : ${i18n>/normal} }"
 
<!--Set to visible if the rating is VIP, ignoring case or if the order amount is greater than 10,000.-->
visible="{= ${/rating}.toUpperCase() === 'VIP' || ${/orderAmount} > 10000 }"
 
<!--Set to visible if the rating contains VIP, ignoring the case. -->
visible={= RegExp('vip', 'i').test(${/rating}) }
  
<!--Text is maximum of three values.-->
text="{= Math.max(${/value1}, ${/value2}, ${/value3}) }"
 
<!--Control is enabled only if the order status is set.--> 
enabled="{= ${/orderStatus} !== null }"

Composite Types: This new feature allows types to operate on composite bindings. The new Currency type, for example, uses this technology.

Message Handling: New message manager and message model, including a new message popover control.

Standard Margins & Container Paddings: You can now use predefined CSS classes to manage the margins and container paddings in your application. Take a look at the following documentation and sample links to learn more:

Routing: The following improvements have been made:

  • The following new classes have been created for routing:

    • sap.ui.core.routing.Targets

    • sap.ui.core.routing.Views

    • sap.ui.core.routing.Target

    • sap.m.routing.Targets

    • sap.ui.core.routing.Router

    • sap.ui.core.routing.TargetHandler

  • Views can now be displayed without modifying the hash with Targets.

  • Multiple views can now be displayed with one route using Targets.

  • Routing now consists of more modules, for example, the view creation and view placement have been separated from the router.

  • Some APIs for routes have been renamed and moved to Targets.

  • Class sap.m.routing.RouteMatchedHandler is now deprecated.

The improved routing is fully backward compatible with routing configurations, meaning you can perform step-by-step migrations.

Clickjacking Protection: In order to protect applications against clickjacking attacks, there are now settings available to control circumstances under which an SAPUI5 application is allowed to run inside frames. For more information, see Frame Options and Whitelist Service.

Handlebars: The included Handlebars library has been upgraded to version 2.0.

New Controls

sap.m.MessagePage: This control is primarily designed to be used when a page is empty because no data is available, but can be used for other full-page messages as well.

Figure 1: MessagePage

sap.m.MessagePopover: This control provides a popover containing a summarized list with messages that can be consumed by the user through several different features like filtering and drilling down to the details.

Figure 2: MessagePopover

sap.m.OverflowToolbar: This control provides you with the option to move buttons that do not fit in the visible area to an overflow menu. The OverflowToolbar also provides a new layout data called sap.m.OverflowToolbarLayoutData that can alter the default behavior of controls by forcing them to always stay in the overflow menu, or to never move in there. Currently, only controls of type sap.m.Button can be moved to the overflow menu.

Figure 3: OverflowToolbar

sap.m.Title: This new control is a simple line of text which should be used for section headings. It provides semantic information about the level in the page structure of the section the heading belongs to, and is needed for usability purposes.

sap.suite.ui.commons.HarveyBallMicroChart: This new control allows you to display a fraction value versus total as a micro chart. You can set one of the predefined sizes and also optionally set the width of the control. You can use either semantic or palette colors for the fraction.

sap.suite.ui.commons.DeltaMicroChart: This new control allows you to display two values as well as an automatically calculated delta as a micro chart. You can set one of the predefined sizes and also optionally set the width of the control. Semantic colors can be applied to the delta. You can define custom labels for the values in the chart.

sap.ui.comp.navpopover.SmartLink: This new control provides a popover with navigation links to related applications, for example, more detailed information about customer data.

sap.ui.comp.smartform.SmartForm: This new control makes it possible to render a form using OData metadata annotations. Depending on user authorizations, the form enables users to switch from display to edit mode, add and group fields, rename field labels, and implement a user input check, for example.

SAPUI5 Flexibility Services have been enhanced with features that allow you to adapt screens for multiple users using the SmartForm control, for example, by adding and grouping fields.

sap.ui.comp.smartfield.SmartField: This new control offers a wrapper for other controls using OData metadata to determine which control has to be instantiated.

Control Improvements

sap.m.Column: A new WithoutHeader popin display option has been added, which allows you to hide headers if needed.

sap.m.MessageBox: New options and features added, such as initialFocus, textDirection, verticalScrolling, horizontalScrolling, and details.

sap.m.MultiInput: A new enableMultiLineMode API has been introduced, which displays the MultiInput control in multi-line display mode when set to true.

sap.m.ObjectHeader: The responsive ObjectHeader has a new design depending on the device, which is based on media breakpoints. In the new design, the sap.m.IconTabBar control is always displayed below the ObjectHeader.

sap.m.ObjectListItem: A dedicated icon is now available to indicate whether the object is locked.

sap.m.SegmentedButton: Enhanced binding of the selected button (new items aggregation).

sap.suite.ui.commons.ColumnMicroChart: You are now able to define labels and show them using semantic colors in the corners of the chart.

sap.ui.unified.Calendar: A multi-calendar view is now available, allowing you to place several calendars within a single view to support date picks across months without navigation.

sap.ui.layout.form.SimpleForm: A new width property has now been added.

sap.ui.unified.FileUploader: Performing an upload with multiple: true and useMultipart: false is handled by several requests, one for each file.

sap.ui.table.TreeTable: New paging support with lazy loading of tree nodes using OData hierarchy annotations and new auto expand feature which expands the tree to a specified level. Export to Microsoft Excel also enabled.

sap.ui.table.Table: An auto BusyIndicator has now been added.

sap.suite.ui.commons.ProcessFlow: Mobile enablement has now been implemented for this control. As part of this enablement, the responsiveness has been adapted. The initial zoom level is now responsive and depends on the container size of the ProcessFlow control.

sap.ui.comp.smarttable.SmartTable: The SmartTable control now supports editing scenarios.

P13nColumnsPanel: The new visibleItemsTreshold property in the P13nColumnsPanel as part of the P13nDialog control limits the number of table columns selected by the end user during table personalization to avoid slow performance.

SAPUI5 Tools

The HTTP handler for SAPUI5 applications now supports cache busting at application or component level (report /UI5/APP_INDEX_CALCULATE needs to be scheduled). The SAP Fiori launchpad uses this cache busting to ensure that the users do not have to clear the browser cache manually after application updates on the server. For more information, see SAP Library for User Interface Add-On 1.0 for SAP NetWeaver on SAP Help Portal at http://help.sap.com/nw-uiaddon. Under Application Help, open SAP Library and search for Cache Buster for SAP Fiori.

To study the coding and the effect of cache busting for application resources, now the sample application SIMPLETEST is available.

Documentation Improvements

Documentation of Coding Issues to Avoid: This new documentation section lists some of the most important issues that must be avoided when creating applications using SAPUI5 (see Coding Issues to Avoid).

Demo Kit: The following improvements have been made to the Explored section:
  • You can now toggle the samples to full-screen display.
  • You can now open the samples in a new browser tab.
  • Most of the samples can now be downloaded as standalone, fully runnable web applications.