What's New in SAPUI5 1.30

This new and interactive learning format introduces you to all major development paradigms of SAPUI5. Each tutorial comes with a detailed documentation and downloadable code in the Explored app in the Demo Kit. The tutorials include a Walkthrough that is starting from a simple 'Hello World' app and going through the main topics in 35 steps. These topics include expression binding, mock servers, reuse dialogs, unit and integration tests, routing and navigation, to name just a few. Other tutorials cover topics data binding, navigation and routing, using smart controls. For more information, see Tutorials.

• The API Reference navigation tree in the Demo Kit has been restructured to display a maximum of two levels of nesting.

• Contextual filtering has been implemented for the navigation tree of the Demo Kit.

• Explored app improvements:

  • It is now possible to bookmark a specific sample file.

  • It is now possible to include additional files in the downloadable sample archive, which are not listed as source files.

  • The source code of the samples files is now displayed with highlighted syntax (using the sap.ui.demokit.CodeViewer control).

• Screen Reader Support: Screen reader support based on the ARIA standard has been added for all sap.m controls, among others. The list of all relevant libraries as well as important aspects related to control development are available in Screen Reader Support for SAPUI5 Controls. The important aspects related to app development are available under Accessibility.

• Islamic Calendar: The Islamic calendar has been added to the available calendar types and is available for the Calendar control. When, for example, the current locale is en_US, but the calendar type is set to Islamic (either globally or on a data binding type or in a date formatter), the date “May 6, 2015” is formatted as: “Raj. 17, 1436 AH”.

• Switching the SAPUI5 version: You can now switch between existing installations of SAPUI5, for example for debugging purposes or compatibility checks. If you open the debug mode in the debugging pop-up using Ctrl + Alt + Shift + P or the debugging panel using Ctrl + Alt + Shift + S, you can choose from all existing installations or specify a custom URL. During the next startup, SAPUI5 will then be loaded from there - without modifying the app.

  Note

  This will only work when the SAPUI5 core is loaded with the standard bootstrapping, it is not supported for SAP Fiori launchpad or cases where customized bootstraps are used.

• You can now use the Runtime Adaptation library to allow key users to adapt the user interface of apps during runtime, for example, by adding, removing, or moving fields and groups. For more information, see UI Adaptation at Runtime.

• sap.m.semantic.SemanticPage: SemanticPage is an enhanced sap.m.Page control. It provides support for content with semantic meaning (for example sap.m.semantic.AddAction, sap.m.semantic.EditAction and sap.m.semantic.SortAction) that has predefined visualization properties and positioning in the page.

  The following new controls are based on the SemanticPage control:

  • sap.m.semantic.MasterPage

  • sap.m.semantic.DetailPage

  • sap.m.semantic.FullscreenPage

  

  Figure 1: Semantic Page
• sap.m.QuickView: The aim of the QuickView control is to display content in the form of a business card. It uses the sap.m.ResponsivePopover control, meaning the content occupies the entire screen when using a mobile phone, whereas a popover is displayed on other devices.

  

  Figure 2: Quick View

• sap.m.QuickViewCard: This control represents a card that can be part of sap.m.QuickView and usually contains information about one person or object. It allows this object to be linked to another object using one of the links in the card.

• sap.m.MessageStrip: A simple control for showing messages as text with semantic color, an icon depending on the message type, and optionally a link (leading to additional information).

  

• sap.ui.layout.DynamicSideContent: The DynamicSideContent control allows additional (side) content to be displayed alongside or below the main content, within the container in which the control is used. It is intended to be used within the sap.m.Page control but it can exist in any container control, either taking the whole width of the screen or a large part of it.

• sap.m.Wizard: The Wizard control is used to break down complex tasks into smaller steps, for example, creation of a business object or a long registration form. It is a container control and has WizardSteps as content aggregations.

  

• sap.uxap.ObjectPageLayout: An object page is a concept for a Web page, representing detailed information about a business object. An object page has a header (sap.uxap.ObjectPageHeaderContent and sap.uxap.ObjectPageHeaderTitle), a navigation bar (sap.uxap.AnchorBar) and is divided into sections (ObjectPageSection) and subsections (ObjectPageSubSection), each showing some information about the object in question. For more information, see Object Page Layout.

• Annotation Helper now supports a lot of OData constant and dynamic expressions (like Edm:if) in annotation specifications. Furthermore, there are additional methods for navigating within the meta model (including annotations). Finally, using the AnnotationHelper outside XML templating has been made easier, by making the second parameter of context-based methods optional. See Annotation Helper.

• Asynchronous View Loading: Views can be loaded asynchronously to improve performance. This is done using the loaded() promise in class sap.ui.core.mvc.View.

• Expression Binding now supports arrays (literal and operator), the in-operator, as well as more global symbols. Expression bindings can be used in composite bindings. As a performance optimization, expression bindings can now also be specified as one-time bindings. See Expression Binding.

• The features of the descriptor for applications, components, and libraries (manifest.json) have been extended, for example, with declarative model creation, see Descriptor for Applications, Components, and Libraries.

• XML Templating:

  • Debug traces have been introduced to XML templating. See Debugging.

  • The template:repeat statement now supports startIndex and length. Furthermore, the name of the object that is inspected can be used in the filter condition. See repeat.

  • Up to now, the name of a fragment that was to be included in an XML view in XML templating needed to be specified as a string constant. Now you can also specify the name by a binding, see XML Fragments.

• OData Model: By default, two-way changes now only send modified properties in a MERGE request. The change event on bindings that informs about updates is now available.

• The OData Meta Model now also exposes most v2 annotations as their corresponding v4 annotations as well. This enables applications to simply react to the corresponding v4 annotation irrespective of the version actually used for specifying the annotation. The objects in OData Meta Model are arranged in arrays. Instead of using an index that might not be stable with meta model changes, it is now also possible to use expressions to select an object in such an array. See Meta Model for OData V2.

• Restriction on specific OData types removed: The OData types sap.ui.model.odata.type.Single and sap.ui.model.odata.type.Double are now writable, just like the other supported OData types in SAPUI5. sap.ui.model.odata.type.Decimal and sap.ui.model.odata.type.Int64 now support full precision.

• Right-to-Left (RTL) Support: Two new API properties have been introduced - textDirection and textAlign. These properties can be used to ensure proper readability for controls that need to show texts with mixed RTL and LTR directionality. For more information and examples, see API Properties for Right-to-Left Support in Text-Displaying Controls.

• sap.m.Dialog: Two new public properties have been added: resizable and draggable. The default values of these properties are set to false.

• sap.m.MessagePopover: The property markupDescription has been added, which enables the usage of HTML markup as message content.

• sap.m.MultiInput and sap.m.MultiComboBox now support copy and paste from Microsoft Excel or Notepad.

• sap.m.OverflowToolbar: You can now move more controls to the overflow area.

• sap.m.Page: setBusy(true) now covers header and footer correctly, the contentOnlyBusy property has been added to leave them uncovered (as was previously the case, mistakenly), for example, when the user is expected to keep typing text into a SearchField in the subheader while data is being updated. The scrollToElement method for scrolling to a specific child element has been added.

• sap.m.Panel: The property backgroundDesign has been added.

• sap.m.ScrollContainer: The scrollToElement method for scrolling to a specific child element has been added.

• sap.m.TextArea: The valueLiveUpdate property has been added. The value property of sap.m.TextArea is not updated on every keystroke, but only when the user presses Enter or leaves the input field. The change was necessary to fully support the standard data binding with formatters and types. If you still need an immediate update, you have two options: handle liveChange events or enable the boolean property valueLiveUpdate.

• sap.m.UploadCollection:

  • The numberOfAttachmentsText property for overwriting the toolbar text and the 'Upload Pending' scenario have been implemented.

    • The numberOfAttachmentsText property enables applications to overwrite the toolbar text. It sets the title text in the toolbar of the list of attachments. The default value is set to language-dependent Attachments (n). The getItems().length method lets you also retrieve the number of attachments in brackets. If a new title is set, the default is deactivated.

    • The new 'Upload Pending' scenario is provided in addition to the existing UploadCollection scenario (which is also known as an 'Instant Upload'). In this new scenario, you first select the attachments and then upload them in a separate step. To decide which scenario to use, you can select the instantUpload property with the respective value:

      • true for the 'Instant Upload' scenario

      • false for the 'Upload Pending' scenario

      Up to now, only the selection of a single file is supported in this scenario (multiple property = false). If required, you can select further files and add them to the list.

      After making the selection, you need to trigger the upload of the selected files. To do so, call the upload method of the sap.m.UploadCollection control, for example by using a pushbutton in the application.

  • An application can now set file-specific header parameters, for example, file name. For the selection of multiple files in the 'Upload Pending' scenario, the application can call the upload method to trigger the beforeUploadStarts event for each selected file.

• sap.m.UploadCollection.Item: In this class, two new aggregations have been added: attributes (type sap.m.ObjectAttribute) and statuses (type sap.m.ObjectStatus). These aggregations let you display any number of attributes and statuses for each uploaded item.

  The contributor, fileSize, and uploadedDate properties have been deprecated accordingly and will be replaced by the additional attributes.

  Note

  Please remember that if one of these deprecated properties is filled in addition to the attribute with the same name, two attributes with the same title are displayed, as these properties are also displayed as attributes. To make sure that the title does not appear twice, check whether one of the deprecated properties is filled in addition to the attributes.

• sap.m.ViewSettingsDialog: You can now define custom tabs with their content added to the dialog, along with three predefined tabs – for sorting, filtering and grouping.

• sap.suite.ui.commons.MicroAreaChart: You can now display multiple lines. Each line can have one of the semantic colors or chart colors.

• sap.suite.ui.commons.BulletChart: Visual enhancements to the thresholds have been added. Now thresholds are also visible above the actual bar.

• sap.suite.ui.commons.HeaderContainer: You can now display the control in the vertical mode if the view property is set to Vertical.

• sap.suite.ui.commons.ComparisonChart: You can now select individual bars.

• sap.suite.ui.commons.ColumnMicroChart: You can now select individual columns.

• sap.suite.ui.commons.ProcessFlow: For better user guidance, clickable chevrons (arrows) have been introduced in the header. These can be used in the case of an overflow, for example, when the complete ProcessFlow control cannot be displayed because the visible area is limited. In such a case, chevrons are added to the header to indicate that some horizontal content is not visible:

  • For desktops, click these chevrons and move the complete process flow by one lane.

  • For mobile devices, the chevrons are just indicators, you scroll the ProcessFlow control by touch as before.

  Next to the chevrons, the number of lanes that are not visible is displayed. For example, the number 2 next to the right-arrow navigation indicates that there are two additional lanes not visible in the displayed area.

• sap.ui.layout.FixFlex: The minFlexSize property has been added.

• sap.ui.table.*: Rendering performance has been improved by 80%.

• sap.ui.table.TreeTable now supports sorting operations.

• sap.ui.comp.smarttable.SmartTable:

  • SmartTable now uses the Importance annotation for the LineItems annotation to display columns with priority high on phones, with priority medium or high on tablets, and with all priorities on the desktop.

  • When using SmartTable with an internal responsive table, you can now set the new demandPopin property to true. This property renders columns that exceed the space available on the screen by displaying popins.

  • SmartTable now checks the custom data section for the columns and reads the columnIndex attribute to determine when the columns that are defined in the XML view are rendered.

  • More OData types (provided in sap.ui.model.odata.type) and some additional V4 annotations are now supported by SmartTable.

  • The usability of the SmartTable control has been improved: There is now only one toolbar shown using a transparent and responsive OverflowToolbar in case there is no customToolbar (the useOnlyOneSolidToolbar property has therefore been deprecated).

  • The Org.OData.Measures.V1.Unit annotation to create measure fields on the user interface is now supported.

• sap.ui.comp.SmartField:

  • SmartField now uses the com.sap.vocabularies.Common.v1.Masked annotation to mask the content of its child input field and the com.sap.vocabularies.ui.v1.MultiLineText annotation to represent a field as a multiline text field.

  • SmartField now also supports standard links using the new url property.

  • Until now, when binding a SmartField against the OData service property of type Edm.Boolean, the value was shown as a CheckBox. If a SmartField is in read-only mode, static texts are now used for visual representation. In addition, a configuration parameter in the SmartField control can define the properties of the static texts of the CheckBox, such as Yes/No or True/False. For the SmartForm control, the custom data can be used for this purpose.

• sap.ui.comp.smartFilterBar.SmartFilterBar:

  • More OData types (provided in sap.ui.model.odata.type) and some additional V4 annotations are now supported by SmartFilterBar.

  • The validation based on types has been enhanced.

  • The new enableBasicSearch property is available to enable the basic search field (if supported by backend system).

• sap.ui.comp.valuehelpdialog.ValueHelpDialog: The dialog provided by the ValueHelpDialog control now offers an improved desktop version and supports tablet use for the first time. The dialog is now easier to use and more flexible and responsive: For example, when you switch from landscape to portrait mode on your tablet, the number of rows in the list is automatically adjusted.

  To reduce initial load times for OData-model-based user interfaces, the ValueHelp fields in the SmartFilterBar, SmartTable, and SmartField controls now support partial and lazy loading of the ValueList annotation (if supported by backend system).

SAPUI5 Application Index (Changed): You have to define the execution of the report /UI5/APP_INDEX_CALCULATE as a background job for the SAPUI5 application index. This report replaces the report /UI5/UPDATE_CACHEBUSTER used in the user interface add-on 1.0 for SAP NetWeaver. The SAPUI5 application index is an indexing and caching mechanism for information related to SAPUI5 applications, components, and libraries in SAPUI5 repositories on the SAP NetWeaver Application Server for ABAP and is used by several different services (such as SAP Fiori launchpad and cache buster). Descriptor and component IDs used in SAPUI5 repositories have to be unique and valid. For more information, see SAPUI5 Application Index.

The jQuery unit testing library QUnit has been upgraded to version 1.16.0. If you have written QUnit-based unit tests, you may need to adapt these.

As of this version, SAP Smart Business in no longer being updated with the SAPUI5 delivery. SAP Smart Business is now part of the SAP Smart Business Foundation Component. You can find the documentation for SAP Smart Business on the SAP Help Portal at http://help.sap.com/ssb.