Show TOC

What's New in SAPUI5 1.38Locate this document in the navigation structure

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

In the following sections, we list 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.

Documentation Improvements

Thanks a lot to all of you who have used the Demo Kit feedback function! We have received lots of comments, many of which regarding our tutorials, and are continuously improving the documentation based on your findings.

Please carry on giving us your feedback: even though we cannot update the documentation straight away, your feedback will be considered in the next version!

New or reworked documentation chapters that are not mentioned in the following sections:
The following libraries are deprecated as of this version:
  • sap.ui.commons

  • sap.ui.ux3

  • sap.makit

The following themes are also deprecated as of this version:
  • sap_ux

  • sap_platinum

  • sap_goldreflection

For more information, see Deprecated Themes and Libraries.
jQuery Upgraded to Version 2.2.3
jQuery has been upgraded to version 2.2.3. This upgrade may have an impact on apps developed with SAPUI5. For more information, see the following chapters:
New Features
  • We have 46 new icons, and some existing icons have been redesigned - check the Icon Explorer in the Demo Kit for details.

  • Multiple preprocessors for XML views

    We have enhanced the XML view so that it is now capable of running more than one preprocessor per hook. Additionally, the new hook viewxml has been introduced. For more information, see Preprocessing XML Views.

  • SAPUI5 OData V4 model

    We are providing an initial version of the SAPUI5 OData V4 Model. This model supports the following:
    • Read access

    • Updating properties of OData entities via two-way-binding

    • Operation (function and action) execution

    • Grouping data requests in a batch request

    • Server-side sorting and filtering


    This is the first version of the SAPUI5 OData V4 model. Due to its limited feature scope, we recommend you do not use this release to develop applications that are to be used in production systems. Please look at the detailed documentation of the features, as certain parts of a feature may be missing which you might expect as given. While our intention was to be compatible with existing controls, existing controls might not work due to small incompatibilities compared to sap.ui.model.odata.(v2.)ODataModel, or due to missing features in the model. Up to now, only limited tests with controls have been done with the SAPUI5 OData V4 model. The interface for applications has been changed to make usage of the model easier and more efficient. A summary of these changes is documented in the section Changes Compared to OData V2 Model.

    For more information see OData V4 Model.

  • The annotations that are used by smart controls are now shown in the API Reference and are also explained in more detail. For more information, see the documentation for the relevant controls in the API Reference for the sap.ui.comp library in the Demo Kit.

New Controls
  • sap.m.FormattedText: You can use this control to display formatted texts in HTML format.

  • sap.m.MenuButton: The control opens a hierarchical menu and enables quick triggering of the last action of the menu item selected. In Regular mode it always opens the menu, whereas in Split mode it can be also used directly as a button to trigger the currently displayed menu item’s action. In Split mode it can display either the default menu item or the last selected one.

    Regular Mode

    Split Mode

  • sap.m.ObjectMarker: The ObjectMarker control represents the status of an object with icon and/or text. It can be interactive (as a link) or non-interactive. It has the following predefined types:
    • Flagged

    • Favorite

    • Draft

    • Locked

    • Unsaved

    An object might have multiple ObjectMarkers at the same time but the editing states (Locked, Draft, and Unsaved) are mutually exclusive.

  • sap.m.RangeSlider is a new input control that is used to select a range of values. The RangeSlider has two slider handles that can be moved along a predefined numerical range scale. This control extends the sap.m.Slider and introduces additional functionality.

  • sap.m.StepInput: The StepInput control allows the user to change the input value with a predefined step. The value can be changed using the increment/decrement buttons or keys on the keyboard. On the desktop, when using the keyboard PgUp and PgDn keys, the value increases/decreases two steps at a time.

  • sap.ui.comp.smartmicrohart.SmartMicroChart: This control is used to create different types of micro charts based on OData metadata. With this control, you can define annotations once for different micro chart types. The SmartMicroChart control contains a wrapper that interprets the chart type of the Chart annotation and delegates this information to the corresponding smart micro charts, SmartAreaMicroChart or SmartBulletMicroChart control.

  • sap.ui.comp.smartmicrochart.SmartBulletMicroChart: The SmartBulletMicroChart control creates a sap.suite.ui.microchart.BulletMicroChart based on OData metadata and the user-specific implementation.

  • sap.ui.comp.SmartMicroChart.SmartAreaMicroChart: The SmartAreaMicroChart control creates a sap.suite.ui.microchart.AreaMicroChart based on OData metadata annotations and the user-specific configuration.

  • sap.ui.layout.ResponsiveSplitter is a layout control that is used to visually divide the content of its parent. The control is responsive and can adjust its contents to any screen size. On smaller screens, pagination is used to allow navigation to all splitter panes.

  • Visual Interaction toolkit (sap.ui.vk library): The following controls have been added:

    • sap.ui.vk.LayerProxy: The LayerProxy control allows you to create a proxy object for a layer, so that you can work with that layer in the scene.

    • sap.ui.vk.ProgressIndicator: The ProgressIndicator control allows you to add a progress bar that indicates the download and rendering progress of a file.

    • sap.ui.vk.Notifications: The Notifications control allows you to add an icon in your application that displays the number of errors and warnings that may have resulted from loading a 2D image or 3D file. The icon can be clicked to display more information about the errors and warnings.

Improved Features
  • One page acceptance test (OPA):

    The Press and EnterText actions now support a larger number of controls and can now be executed on embedded controls by specifying the control suffix.

  • SAPUI5 application index: The index is now based on the layered repository and is updated automatically in most cases. For the other cases we recommend that you schedule the update report every 30 minutes using the default mode (expiration period of 24 hours). For more information, see SAPUI5 Application Index.

Improved Controls
  • sap.m.ComboBox:
    • Is now supported on mobile phones. The list of available values will open as a full-screen dialog on small devices.

    • The new loadItem event makes it possible to defer initialization of items in the ComboBox dropdown list control to a point in time when the items are required. This helps to improve performance.

  • sap.m.DatePicker, sap.m.DateTimePicker, sap.m.PlanningCalendar, and sap.ui.unified.Calendar: You can now set minimum and maximum dates to limit the range of available dates.

  • sap.m.GenericTile: The GenericTile control has a new responsive design that significantly improves the user experience, it has also been optimized for larger smartphones. The GenericTile adjusts its size to fit all the different display sizes of the current devices supported by SAPUI5 (see Browser and Platform Support). The main changes are the tile size, font size, padding, the new ImageContent control, and new samples showing the variety of use cases for the GenericTile.

    The sap.m.ImageContent control can be used to include images in a tile. It can be embedded in the content area of the GenericTile control.

    For more information, see Generic Tile.

  • sap.m.List and sap.m.Table: The new keyboardMode property for the List and Table controls determines the keyboard handling for these controls. The Navigation value of the property enables a mode that allows you to navigate within a large number of items, for example, table cells, using the tab key, whereas the Edit mode can be used to edit a limited number of items.

  • sap.m.MaskInput: You can now use escape characters in the MaskInput definition to be able to use the predefined rule characters as immutable ones.

  • sap.m.MessagePopover has been improved and can now be resized. Resizing is only possible when the MessagePopover is opened from the footer on a desktop.

  • sap.m.NotificationListItem: The control has two improvements:
    • The control responsiveness is updated for better usability on large screens (more than 640 pixels width) – the buttons are now located on the right side of the text.

    • The Show More button for toggling expand/collapse mode can now be hidden with the use of the new property hideShowMoreButton.

  • sap.m.Popover has four new values for its PlacementType:
    • PreferredBottomOrFlip

    • PreferredLeftOrFlip

    • PreferredRightOrFlip

    • PreferredTopOrFlip

    They determine the preferred position of the Popover and how it behaves when there is insufficient space for it on the screen. These properties allow the Popover to flip over and cover some of the content below it.
  • sap.m.TextArea can now grow and shrink to adapt to the entered text.

  • sap.m.TimePicker: The TimePicker control now has configurable step precision for minutes and seconds.

  • sap.m.UploadCollection: To upload a new version of a file to the UploadCollection list, the openFileDialog method is available. You can provide a pushbutton in the header area and if one entry in the UploadCollection list is selected, the API method will be called.

  • sap.m.ViewSettingsDialog: The ViewSettingsDialog control now gives you the opportunity to modify filter detail page items on the fly with the help of the new event filterDetailPageOpened. This event is fired each time after the filter detail page is accessed, notifying the outside world that the page is loaded along with the information for which filter the respective details are displayed. This allows a handler to be attached that alters the filter detail items aggregation.

  • sap.suite.ui.microchart: The controls now have a responsive design and can adapt their appearance and functions either to the devices they are used on or to the available space provided by the parent control.

  • sap.tnt.SideNavigation: Root items with no children can now be opened with a single click when the SideNavigation control is in collapsed mode.

  • sap.tnt.ToolPage: Animation is now added when expanding and collapsing the SideNavigation control within the ToolPage.

  • sap.ui.commons.ColorPicker supports HSL (Hue Saturation and Lightness) mode. This mode works better with modern browsers and it does not require intermediate conversion back to RGB. Additionally, there is a new input field for the alpha (transparency) value for more precise color definition.

  • sap.ui.comp (Smart Controls):
    • sap.ui.comp.smartchart.SmartChart:The SmartChart control now offers two additional features that you can switch on if you want to use them. The control now provides the breadcrumb trail of a drilldown and also lets you drill upwards within that path.

      The control also provides a changed drilldown function: When you select one or more data points, the Drill Down button becomes a Details button. When you click this button, you will see more details related to the selected data. From here, you can also navigate to semantic objects, for example, to related apps.

      The usability of the chart type selection has been improved.

      For more information about this control, see the API Reference and the sample in the Explored app in the Demo Kit.
    • sap.ui.comp.smartform.SmartForm: You can now set an XL breakpoint for the SmartForm control as you could previously only with the sap.m.Form. sap.ui.comp.smartform.Layout now offers the properties labelSpan and emptySpan as well as columns and a breakpoint also for screens of extra-large sizes.

    • sap.ui.comp.smarttable.SmartTable:
      • If you use the SmartTable control with a responsive table (sap.m.Table), and the columns contain a property annotated with Criticality that returns the CriticalityType annotation, an ObjectStatus control is used to display the status. The application using this control can control whether an icon is displayed by using the CriticalityRepresentationType annotation.

      • If you use the SmartTable control with a responsive table (sap.m.Table), and the cells contain the URL of an image, the image will automatically be displayed in a default size of 3 rem using the IsImageUrl annotation.

      • If you use the SmartTable control with a responsive table (sap.m.Table), and the columns contain a property annotated with the SemanticKey annotation, they will automatically be displayed as sap.m.ObjectIdentifier. The TextArrangement annotation controls whether the ID and the description are displayed as the title of the ObjectIdentifier control and in which order. In addition, if there is a link to SemanticObject, the ObjectIdentifier title will be clickable and display or navigate to the SmartLink targets.

      • A new property showFullScreenButton allows you to expand the table to full screen mode using the respective toolbar button.

      • The SmartTable control now allows you to show and follow navigationProperty fields for EntityType and automatically performs a $expand operation for these fields.

      • If you group columns in the personalization of analytical tables, the grouping is now automatically added as a separate column (Show Field as Column checkbox). This allows you to see the grouped values for each row of the table.

      • For measure columns within an analytical table, the total sum of a column is now persisted in the variant of a table.

      • You can now create an additional title for the SmartTable control.

    • sap.ui.comp.filterbar.FilterBar:
      • If you add new filters from the fields listed, they will now be automatically visible on the expanded filter bar. You no longer have to select the Add to Filter Bar checkbox.

      • You can now create an additional title for the FilterBar control.

    • sap.ui.comp.navpopover.SmartLink: If a SmartLink control has only one target, it will directly take you to the target of a link. In this case, the popover will not be displayed.

    • sap.ui.comp.variants.VariantManagement:
      • You can now change the behavior of the SAP-delivered standard variant and select Execute on Select in the Manage Variants dialog. This will fire the query automatically.

      • A page variant of the VariantManagement control is now available that can handle the persistency of multiple smart controls and provides the variant management in a central place.

    For more information about smart controls, see sap.ui.comp.

  • sap.ui.layout.Form and sap.ui.layout.SimpleForm: You can now add a toolbar to a form container or the form itself.

  • sap.ui.table.DataTable has been deleted.

  • sap.ui.table.TreeTable now supports AutoExpand paging if it is bound to an OData model.

    By setting numberOfExpandedLevels as a binding parameter (e.g. in the bindRows call of the TreeTable), you now can specify the initial expansion depth. This feature is only available for OData services exposing a property marked with the annotation hierarchy-node-descendant-count-for. This also means the service has to respect a $filter statement on the annotated Level property, and returns the entries sorted. You can find the specification for this and all other hierarchy annotations in the SAP Community Network under SAP Annotations for OData Version 2.0

  • sap.ui.unified.Menu: To significantly increase the usability of sap.ui.unified.Menu, a delay has been added to the closing of submenus.

  • sap.ui.vk.NodeHierarchy: The NodeHierarchy control now has a new method called findNodesById, which allows you to search for specific nodes in a 3D scene using the VE ID data in nodes as the search parameter.

  • sap.uxap.ObjectPageHeader ObjectPageHeader can be integrated with the SideContent scenario. A new sideContentButton aggregation has been added. This aggregation has a new button, which appears after the actions buttons and triggers opening the side content for additional information.

  • sap.uxap.ObjectPageLayout:
    • It supports scrolling to a particular section, based on its ID. This allows easier access to all parts of the application and consistent navigation back to a previous position within the ObjectPage.

    • Performance is improved for the use case with no Blocks. The ObjectPage now supports lazy loading with the stashed property of the ObjectPageLazyLoader. As a result, you avoid the additional creation of XML views for each Block.

Smart Templates
General Features:
  • Actions for line items in tables

    You can now enable certain types of actions within a line item column in a table in both the list report and object page views. Actions you can enable at the line item level include those that trigger a back-end call through the OData service, for example, approve or unblock, or those that trigger navigation, for example, to a different application.

  • Rating indicator in tables

    You can now include a read-only rating indicator in the list report or in a table in the object page view. This allows you to visually represent the value of a field with the corresponding number of stars (configurable). This field can indicate, for example, a rating or classification for a specific object or item.

  • Progress indicator in tables

    You can now include a progress indicator in the list report or in a table in the object page view. This allows users to visualize the level of completion of, for example, a project or a goal. Optionally, you can set up the following:
    • Whether a single color is used in the progress bar (default: blue), or multiple colors are used to indicate criticality (example: red to indicate that stock levels are very low)

    • The value used to calculate the percentage value displayed

  • External navigation

    You can now enable navigation from line items in a table to a different app using intent-based navigation. This feature is available for the list report and tables in the object page view.

List Report View:
  • Deletion of one or more items

    Users can now select and delete one or more items directly from the list report view.

  • Images in tables

    You can now display images in table columns.

  • Harmonized variant management option

    Variants created by the user for the smart filter bar and smart table can now be saved together using the variant for the smart filter bar.

  • Disabling editing status filter

    You can disable the editing status filter for the list report.

Object Page View:
  • Image expansion

    End users of your app can now click an image within the object page to see an expanded view of the image.

  • Plain text facet in object page header

    You can now add a plain text facet to the header area of an object page. The plain text facet allows you to add a single field or block of text to the header.

  • Smart chart in object page

    You can now add a smart chart control to a facet in an object page. You specify the type of smart chart and, if desired, other chart data to be rendered in your app through annotations in your service.

  • Editable header

    You can now make fields in the object page header editable in edit mode by setting a parameter in the app descriptor.

  • Subsections: See more and See less

    You can now hide subsections in facets and provide a See more / See less link for the facet.

Documentation Changes:

The following sections have been expanded and reorganized into subsections:
Overview Pages
Overview pages have been enhanced with the following features:
  • Selection fields: With the UI.SelectionFields configuration in the annotations file, you can define the filter you want to add to the filter bar by default.

  • Data points: Now, you can display as many data points as are present in the backend, in card charts. To limit the number of records, adjust the value of the UI.PresentationVariant.MaxItems property in the annotion file (donut charts use all records, so this limitation isn't needed).

  • You can now create the following cards:

    Column Chart

    Stacked Column Chart

    Vertical Bullet Chart

    Data, such as total product sales over a period of years, can be displayed in a column chart. The number of columns is equal to the number of measures in the annotation file.

    A stacked column chart is similar to the column chart; however, it visualizes multiple measures or dimensions by stacking the data on top of each other in a column.

    With a vertical bullet chart, you can visualize a single measure and compare it to a defined reference value, such as a target unit of measure. This target is displayed a solid black line.

    For more information on these charts, see Analytic Cards

To improve your user experience with overview pages, we've also made several improvements:

  • Axis titles: The x- and y-axis of analytic chart cards won't be shown (except with a bubble chart) if you use a header for your card. If your header contains a good description of the card, then the x- and y-axis descriptions are superfluous. Of course, you'll see both the x- and y-axis if you choose to omit the header.

  • Quick view cards:
    • Interaction buttons in the footer area are now part of sap.m.OverflowToolbar. With this, the quick view cards can now display action buttons based on the width of the card. If more actions are necessary, they will be shown on the overflow toolbar.

    • Since the height of each quick view card is aligned with the content of the card, this means cards can have different sizes. If there is more content than can be shown in the card then you'll be able to scroll vertically, but only within the content area itself. The headers and footers stay fixed.