Show TOC

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

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

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.

Security Vulnerability Fixed

A security issue has been identified and fixed. For more information, see SAP Note 2204160 Information published on SAP site.

Tutorials
  • Mock Server: In this tutorial we'll explore some advanced features of the mock server. If no OData service is available or if you simply don't want to depend on the OData back-end connectivity for your development and tests, the mock server can mimic the OData back-end calls: Mock Server.

  • Worklist App: In this tutorial we'll build a simple worklist app using the worklist app template. This app could be used by a shop owner to manage his product stock levels, for example: Worklist App.

  • 3D Viewer: In this tutorial you'll learn how to create applications with 3D viewing capabilities using the controls in the Visual Interaction toolkit (sap.ui.vk library): 3D Viewer.

  • Walkthrough: The Walkthrough tutorial has been updated with some corrections based on user feedback. Many thanks to all readers who got in touch with us! Steps 26 and 27 in particular have been completely rewritten: Walkthrough.

New and Improved Features
  • ODataTreeBinding: ODataTreeBinding supports server-side application filters which should be used for the $count/$inlinecount and data-retrieval in operation mode "auto". This helps to reduce the amount of data that is processed later on in the client and thus improves the performance.

  • Support for sequentialized asynchronous OData requests: With the OData model V2, you can now use the new sequentializeRequests setting to sequentialize asynchronous requests for OData providers that cannot handle multiple parallel requests at the same time.

  • One page acceptance test (OPA):
    • Starting a UIComponent using iStartMyUIComponent: You can now run OPA tests in the same frame or window. For more information, see Getting Started with OPA5.

    • Actions: Did you always find it difficult to press a button or insert a text into an input field when writing your OPA tests? Starting with this SAPUI5 version, the first two OPA actions Press and EnterText are available to make your life easier.

  • App templates: We added some minor improvements to the app templates, like asynchronous view creation in routing, and updated the version of the application description (manifest.json). For more information, see App Templates: Kick Start Your App Development.

  • SAPUI5 application index: The application index is now updated automatically after an import if the Business Add-In CTS_IMPORT_FEEDBACK is called. The documentation also contains detailed information indicating when the application index is updated automatically and when you have to schedule the calculation report manually (and in what mode). For more information, see SAPUI5 Application Index.

  • Whitelist Service for SAPUI5 Clickjacking Framing Protection: As described in SAP Note 2245332 Information published on SAP site, you can use a whitelist service for clickjacking framing protection to guard SAPUI5 apps. Just configure the whitelist service as described in SAP Note 2142551 Information published on SAP site. SAPUI5 apps can then only be used in an iFrame if the host server was specified in the whitelist.

New Controls
  • sap.m.Breadcrumbs: A breadcrumb is a type of secondary navigation that indicates the page's position in the site hierarchy. These visual aids indicate the user's location within the site hierarchy and helps them find their way around. Breadcrumbs are always located at the top left side of the page.

  • sap.m.MaskInput: The sap.m.MaskInput control is used to govern what a user is allowed to enter in an input field. The mask has a fixed length format set upon instantiation and the user input has to conform to it. We recommend using this when the user enters text or numbers with specific formatting, such as a phone number, ZIP code, credit card number, etc.

    When creating a new mask, you can change the configuration of some default properties. For example, the default placeholder symbol _ can be changed to something else. Note that the sap.m.MaskInput control extends sap.m.Input and has all the normal properties of an input field.

  • sap.m.NotificationListGroup: The NotificationListGroup is a control used to group a list of NotificationListItems. The group consists of a header containing title, group's author picture, group's author name, time stamp and a priority stripe, a body containing a list of notifications, and a footer containing a collapse/expand button, list of action buttons and a priority stripe. The sap.ui.core.Priority property defines the priority of the group, which can either be defined by the developer or automatically calculated by the group (based on the highest priority of its notifications).

  • sap.m.NotificationListItem: The NotificationListItem is a control used to display a notification, and it extends the ListItemBase control. The notification consists of a title, description, author picture, author name, time stamp, priority, close button and a list of action buttons. All these parts are both optional and configurable. The sap.ui.core.Priority property defines the priority of the notification and is visualized on the left side of the container with a stripe displayed in a different color depending on the priority.

  • sap.m.PlanningCalendar: You can use the planning calendar to show the appointments of team members in a specified time period.

  • sap.m.TabContainer: The sap.m.TabContainer control is a generic tab container for managing multiple tabs.

    The control contains a TabStrip area where the user can choose which tab to read or edit. Every tab has a close/decline button (visible on mouse hover) that removes the item from the screen and an asterisk (*) indicator that notifies if there are unsaved changes in a particular tab. This can be handled by the application developer. In order to navigate through many tabs, there are also left and right arrows. New tabs can be easily added using the + button in the upper right corner.

    Another way for users to find their tab is to look in the Select list where all the tabs from the TabStrip are listed.

  • GenericTile control moved to sap.m: With this release, the GenericTile, TileContent, FeedContent (formerly JamContent), NewsContent, NumericContent, and SlideTile (formerly DynamicContainer) controls have been moved from the sap.suite.ui.commons library to the sap.m library.

    If you have already included one of these controls before SAPUI5 1.34, a wrapper ensures that the embedding still works for each control. To benefit from all the enhancements or new features for one of these controls as of SAPUI5 1.34, you need to switch to the controls in the sap.m library. With SAPUI5 1.34, all these controls in the sap.suite.ui.commons library are marked as deprecated.

    During the move, the following controls have been renamed:
    • JamContent to FeedContent

    • DynamicContainer to SlideTile

    For more information, see Generic Tile.
  • sap.ui.comp.smartchart.SmartChart: The SmartChart control can be used to create complex diagrams. You can select a chart type, such as a pie chart, column chart or a chart with an x and a y-axis or two y-axes, and define the dimensions and measures for your chart and how you want to display them. A drilldown enables the user to display even more information about a dimension.

    Further features are provided by using other smart controls in combination with the SmartChart control: You can save a chart as a variant using the SmartVariantManagement control or make chart-specific personalization settings using the sap.m.P13nDialog control.

    In the personalization dialog, a new Chart panel has been added. You can also sort the data in your chart or filter it based on the conditions you define.

  • New sap.suite.ui.microchart library: With the new MicroChart library (sap.suite.ui.microchart), all the available MicroChart controls of the sap.suite.ui.commons library have been moved to their own library.

    If you have already included a MicroChart control before SAPUI5 version 1.34, a wrapper ensures that the embedding still works for each control. To benefit from all the enhancements or new features for the MicroChart controls as of SAPUI5 1.34, you need to switch to the controls in the new library. With SAPUI5 1.34, all the MicroChart controls in the sap.suite.ui.commons library are marked as deprecated.

    During the move, the following controls and their elements have been renamed:
    • MicroAreaChart to AreaMicroChart

    • ComparisonChart to ComparisonMicroChart

    • BulletChart to BulletMicroChart

    For more information, see sap.suite.ui.microchart .

  • New Library sap.tnt: This new library contains controls that provide the basic structure of a tools app.
    • sap.tnt.NavigationList: An control which provides a choice of different items ordered as a list. The navigation has a maximum of two levels - the items can have subitems but subitems cannot have other subitems. NavigationList items that contain subitems can be expanded or collapsed.

    • sap.tnt.SideNavigation: A container which consists of flexible and fixed parts, where each part contains a NavigationList. When there is not enough space for the items in the flexible part, a vertical scrollbar appears. On tablet devices, the scrollbar is replaced by scroll arrows but scrolling via swipe is also available. When the height of the whole control is less than 256px, the scrollbar becomes joined for the two parts. The SideNavigation has two modes: expanded and collapsed.

    • sap.tnt.ToolHeader: A horizontal container based on sap.m.OverflowToolbar. It is most commonly used to display buttons, labels, selects and other various input controls. In addition, the ToolHeader allows the developer to specify where the overflow button is placed via the ToolHeaderUtilitySeparator class.

    • sap.tnt.ToolPage: A layout control used to put together the parts of a basic tools app - ToolHeader, SideNavigation and content area. The ToolPage control also checks the type of the device on which it is displayed and sets the expanded state of the SideNavigation. This can be controlled by the developer using the sideExpanded property of the ToolPage.

  • sap.ui.layout.BlockLayout: You can use the BlockLayout control to display several objects in different visual sections. This control features horizontal and vertical subdivisions and full-width banners as seen frequently in contemporary Web design. Background colors are attached directly to these blocks of the layout. By placing pictorial and textual elements side by side in different blocks, a relation of content is established. Special full-width sections of the BlockLayout allow horizontal scrolling through a set of blocks. In our Demo Kit the BlockLayout serves as a flexible container for diverging content, such as headings, explanatory texts, code snippets, remarks, and examples. You can use the BlockLayout control to display diverging objects on one page. We recommend that you do not use BlockLayout to display properties or features of one content item but use the ObjectPage instead. This control also has the option of switching between two backgrounds - one is transparent and the other uses four predefined colors. These are automatically mapped to the different blocks and their arrangement helps to optically separate and decouple the contents of the single blocks.

Smart Templates and Overview Page

The smart templates have been enhanced with the following new features:

  • Status colors and icons: To emphasize the criticality of specific status fields or values, a criticality property has been added to the corresponding fields.

  • Value help as dropdown list box: If the entity set of a value help has a stable number of instances, you can render an input field with a value help and a dropdown list box (sap.m.ComboBox and, in cases of multi-selection, a sap.m.MultiComboBox).

  • Header facets: You can use the annotation term UI.HeaderFacets to define which information is to be displayed in the header. For example, you can now define content blocks with several fields and contact details. In addition, you can apply content blocks for the shipping address, price, and category.

  • Editable table in object page: In Edit mode, you can now change the values in table fields on the object page directly. The new feature works with draft-enabled object pages and with editable fields only. You cannot use this function to make display fields editable.

  • Multi-select single-action: You can now select multiple items on the list report and execute an action. If applicable, the system then displays a message dialog with error information for the selected items.

  • Full user name in draft administrative data: For drafts with unsaved changes or status Locked in the list report, the corresponding popover now displays the first name and surname of the user who last changed the item. For the object page, the feature is also available. You can display the full administrative data by clicking on the Status icon in the header next to the title.

  • Share menu in object page: The object page now supports the Share menu which is rendered in the object header. The menu contains the actions Send Email and Save as Tile. In addition, if SAP Jam is configured accordingly in your system, the menu can also display the Share in Jam action.

  • Enable light theme in the object page header: The object page now supports the light header theme together with highlighting and semantic colors. The semantic colors are essential for the correct display of many header facets, for example numeric values, or status as key figures.

Navigation Service

This new service allows cross-application navigation referencing a semantic object in another application and can, for example, be used by the smart templates. It uses the sap.ushell.services.CrossApplicationNavigation navigation service. The following artifacts are available in sap.ui.generic.app:
  • sap.ui.generic.app.navigation.service.NavError

  • sap.ui.generic.app.navigation.service.NavigationHandler

  • sap.ui.generic.app.navigation.service.SelectionVariant

Overview Page

For the overview page, we added the following features:

  • Personalization: End users can now change the order of cards on the overview page by dragging and dropping cards and they can define which cards are displayed on the overview page using the new Manage Cards entry in the Options menu.

  • Accessibility: Overview pages now support the High Contrast Black theme, as well as other accessibility features such as keyboard navigation and screen reader support.

  • Globalization: Support for right-to-left languages has been added.

Improved Controls
  • sap.m.ComboBox: You can now use the sap.m.ComboBox to display additional information with a second column by setting "showSecondaryValues".

  • Support of Japanese Emperor calendar in sap.m.DatePicker and sap.ui.unified.Calendar: In the Japanese Emperor Calendar, a new era starts if there is a new emperor. Both sap.ui.unified.Calendar and sap.m.DatePicker now support the Japanese Emperor Calendar.

  • sap.m.MessagePopover: The MessagePopover control now supports automated extraction of the longTextURL if the user uses GET requests in the back end and automatic binding to the default message model.

  • sap.m.OverflowToolbar: The OverflowToolbar control has been visually restyled and improved as follows:
    • The default button style is now represented in the OverflowToolbar popover as a transparent button.

    • The popover arrow has been removed in favor of just a subtle offset.

    • The popover now appears either on top of or below the "..." (See more) button. In addition, its right side (or respectively its left side in RTL mode) is aligned with the button's edge.

  • sap.m.Page: The sap.m.Page control accessibility is now extended with page landmark support. These landmarks are used, for example, by assistive technologies (like screen readers) to provide a meaningful page overview.

  • sap.m.TimePicker: The scroll values can now be scrolled with the mouse wheel on mouse hover.

    Smart correction of the value is now available when the user input does not conform to the defined time format but still matches default fallback time format. Example: If the user enters 12:-- -- in an empty TimePicker input field and presses Enter, the value becomes 12:00 PM automatically.

  • sap.m.UploadCollection: You can use a customizable toolbar instead of the aggregation toolbar in the UploadCollection control. To get the customizable toolbar, the aggregation toolbar has to be set to the sap.m.OverflowToolbar control that can be filled with your preferred SAPUI5 controls. To configure the position of the Add (+) pushbutton, the sap.m.UploadCollectionToolbarPlaceholder type was implemented.

    The new mode property with the following values has been implemented: None, SingleSelect, MultiSelect, SingleSelectLeft, SingleSelectMaster. The mode property defines the selection mode of the UploadCollection control.

  • sap.suite.ui.microchart.BulletMicroChart: The available theme-specific background color transparent of the CommonBackgroundModeType type is now supported for the scaleColor property.

  • Time in smart controls in sap.ui.comp library: >The SmartField, SmartFilterBar, and SmartTable controls now support the Edm.Time OData type. The fields bound to OData properties of this type are represented by the sap.m.TimePicker control. In particular, the filter panel showing the conditions in the SmartFilterBar control allows filtering for time types using the TimePicker control.

  • Filtering in smart controls in sap.ui.comp library: Support of Boolean filters has been improved by using texts as defined in the Boolean OData type.

  • sap.ui.comp.smartfield.SmartField: The new ObjectStatus class of the SmartField control provides status control and gives the option to display status icons based on the UI annotation UI.CriticalityType.

  • sap.ui.comp.smarttable.SmartTable: The fieldChange event has been added to the SmartTable control. It passes on changes of editable fields that have been created internally by the SmartTable control.

    SortOrder of the PresentationVariant annotation is now taken into account for the SmartTable control.

  • sap.ui.comp.smartfilterbar.SmartFilterBar: A validation is now performed for entries made in the relevant MultiInput controls of the SmartFilterBar control before the user presses Go.

  • sap.ui.comp.smartvariants.SmartVariantManagement: Key users can now modify and save a standard variant that is then stored in the layer of the SAPUI5 flexibility services.

    Basic search values are now stored as part of the variants. .

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

  • sap.ui.layout.SimpleForm: The SimpleForm now supports XL breakpoints when using sap.ui.layout.form.ResponsiveGridLayout.

  • sap.uxap: The sap.uxap library that contains the ObjectPage is now also part of the runtime library. Apart from that, the ObjectPage has been enriched with several new features:
    • Lazy loading enabled for IconTabBar mode: The lazy loading feature used to work in the default AnchorBar mode only and was designed to delay the loading of Blocks that are not yet in the viewport. The same now holds true for IconTabBar mode: Blocks that are in other tabs or in the current tab, but are not in the viewport, will be lazy loaded.

    • Expand header with a click: An Expand Header button has been added to the ObjectPageHeader. This makes it possible to show the whole header content even when the user has scrolled down. When you click this button, it disappears and the header content is expanded. If you continue scrolling down, the button becomes visible again.

    • Subnavigation in IconTabBar mode: When in IconTabBar mode, the ObjectPage used to only separate sections in different tabs without providing further navigation inside a tab. It is now possible to get a popover to navigate to a subsection when clicking on a tab for a section with multiple subsections.

    • Content header always expanded: A new alwaysShowContentHeader property has been added to the ObjectPage. When set to true, the ContentHeader will remain expanded even if the user scrolls down the page.
      Note

      This property is considered for desktop only. On mobile devices, the header always needs to snap because of the limited space.

    • Edit Header button: You can now add an Edit Header button. This is not an action button but rather a special button that provides a unified interface for applications using the ObjectPage to switch to edit mode.

    • Unsaved changes indicator has been added to the ObjectPageHeader.

      The new markChanges property enables the icon shown in the image above. A callback is also provided to handle the icon's click event.
      Note

      markChanges is mutually exclusive with markLocked.

    • Importance for ObjectPageHeader actions: You can now set priorities (High, Medium, Low) to action buttons, similarly to how importance works for Sections and Subsections. For example, to make an action button overflow first, mark it with low importance like this: <ObjectPageHeaderActionButton icon="sap-icon://action" text="action" importance="Low"/>

    • Apart from the features described above, several visual enhancements to the ObjectPage have been added, such as child page indication, an indication that a section has subsections, and improved AnchorBar navigation.

Documentation and Demo Kit Improvements

We've noticed that the Demo Kit is increasingly becoming the first and sometimes only point of access to our documentation, regardless of the area in which SAPUI5 is used.

As of this version, we therefore decided to include all of our documentation into the Demo Kit. This means that you can now find chapters that are only relevant for developers working with SAP NetWeaver AS for ABAP or SAP HANA in all SAPUI5 Demo Kits, especially in our SAPUI5 Demo Kit for the SAP HANA Cloud Platform, which you can find under https://sapui5.hana.ondemand.com.

Before this version, these topics were only available in the platform-specific documentation version (see Demo Kit and Platform-Specific Documentation).

We now use the feedback service that is available on the SAP HANA Cloud Platform also in the Demo Kit. The service provides a channel for you to send feedback regarding the controls, samples and documentation. Just try it out - we're very interested in your opinion!