What's New in SAPUI5 1.32

Testing

In this tutorial, you learn how to test application functionality using the testing tools that are delivered with SAPUI5. While going through the steps of this tutorial, you will write tests using QUnit, OPA5, and the mock server. Additionally, you will learn about testing strategies, Test Driven Development (TDD), and much more: Testing

App developers can use smart templates to create SAP Fiori applications based on OData services and annotations requiring no JavaScript UI coding. An app based on smart templates uses predefined template views and controllers that are provided centrally, so no application-specific view instances are required. The SAPUI5 runtime interprets metadata and annotations of the underlying OData service and creates the corresponding views for the SAP Fiori app at startup.

The predefined view templates and controllers ensure UI design consistency across similar apps. Additionally, the metadata-driven development model significantly reduces the amount of frontend code per app, so the developer can focus on the business logic.

Smart templates comprise templates for "List Report" and "Object Page".

For more information, see Developing Apps with SAP Fiori Elements.

New Libraries for Draft Handling and Smart Template Reuse Components

The new libraries sap.ui.generic.app and sap.ui.generic.template are now available. sap.ui.generic.template uses sap.ui.generic.app and provides template reuse components, such as TemplateComponent, which creates and initializes smart template components.

An overview page is a SAP Fiori application, based on OData services and annotations, which provides an overview of a specific area and enables end users to interact with business data and perform key actions.

The sap.ovp library is now available with this version. This library provides template reuse components, such as the different card types and an application template thatcreates and initializes the cards in the application.

App developers can create overview pages using the Overview Page wizard in SAP Web IDE.

For more information, see Overview Pages

An open source Google Chrome Developer Tools extension that helps app developers to inspect, analyze and support SAPUI5-based apps. It offers the following key features:

• Inspect SAPUI5 controls and review their properties, bindings, and data model

• Modify control properties on-the-fly and see how this affects the rendering and behavior

• Find relevant framework information for SAPUI5-based apps

The UI5 Inspector can be downloaded as a standard extension from the Chrome Web Store. Once installed, it is then available in the Google Chrome developer tools (by choosing F12) and becomes active when an SAPUI5 app is loaded.

For more information, see UI5 Inspector.

• Visual Interaction toolkit (sap.ui.vk library):

  The Visual Interaction toolkit (sap.ui.vk library) provides controls that enable the visualization and manipulation of 3D models in your browser. The controls in the toolkit allow you to:

  • Specify the content resources to be loaded into the Viewer, how those resources are loaded, and the locations to load resources from

  • Display the tree of nodes from your model

  • Display procedures and steps in a 3D scene, and play these procedures and steps

  More features are available in addition to the ones described in the preceding list. For a full list of controls in the sap.ui.vk library and a detailed description about how to use each control, see the API Reference for sap.ui.vk in the Demo Kit.

  You can easily get started with the Visual Interaction toolkit using the Viewer control - a composite control that connects and presents the essential Visual Interaction toolkit controls. The Viewer control can be configured to specify which controls to display by default. The following screenshot shows a simple Viewer application loaded with a 3D model. The application has been configured to display a Viewport, a SceneTree, and StepNavigation.

  
  The Visual Interaction toolkit supports the loading of the following file formats:

  • .vds

  • .png

  • .jpg

  • .gif

• sap.m.TimePicker: A composite control, consisting of an input field used to type the time, and a dropdown, which contains the picker itself. The user can enter the time using the keyboard on desktop devices.

  

  In compact mode, the time-related fields can be easily and quickly filled by scrolling, tapping or using the arrows. A mask containing placeholder symbols is integrated into the input field. This helps users to enter correct symbols and also validates them.

  

  This control is responsive and works seamlessly on mobile devices.

• sap.m.DraftIndicator: The DraftIndicator control shows the current draft state – either saving or already saved. There is also an integration use case that enables app developers to show a draft state inside the footer of the semantic page - this has been implemented as part of the draft handling concept. The DraftIndicator does not block the current screen, meaning other operations can be triggered in parallel.

  

• One Page Acceptance Tests (OPA)

  • To improve error handling, a test throwing an exception in OPA’s check/success or matcher functions now fails immediately when the exception is thrown. OPA will not execute further waitFor statements added by the failed test. Subsequent tests of a failed test will still be executed.

  • You can now use sap.ui.test.matchers.BindingPath to check whether a control has a binding context with the exact same binding path.

  • OPA is now compatible with QUnit 2.x. As of now, the QUnit assert object is mapped to the OPA assert object. You should now call functions like strictEqual(), ok(), and equal() on the Opa5.assert object to make sure that the tests still work when QUnit is upgraded to version 2.x.

  For more information, see Integration Testing with One Page Acceptance Tests (OPA5).

• XSRF token handling in OData Model V2: The XSRF token will now be fetched via an asynchronous HEAD request to improve the performance.

• Data state for bindings: Bindings can now have a data state which is accessible via an API.

• XML Templating

  • The new require statement lets template authors specify the modules required for processing the templates. This prevents template view users from having to require these modules. For more information, see require

  • The new alias statement in XML templating reduces the typing effort. For more information, see alias.

  • Extension points can be used in XML templating to extend the standard with custom content. For more information, see Extension Points.

  • The XMLPreprocessor.IContext interface has been extended to let custom formatter functions access arbitrary path segments in binding paths. For more information, see Replacement of Bindings.

• Annotation Helper

  • It is now possible to integrate translatable texts into XML templates by using simple bindings to a hard coded model name.

  • The sap.ui.model.odata.AnnotationHelper is now automatically required in XML templating.

  • AnnotationHelper supports annotations for an EntitySet.

  • AnnotationHelper provides a method to create property settings (constant or binding info) from binding expressions.

  • The documentation now explicitly mentions that xx-bindingSyntax needs to be set to complex to avoid warnings on the console.

  For more information, see Annotation Helper.

• SAPUI5 Application Index: If you run the index calculation report with the option for repositories based on a defined expiration period, the report also processes any repositories that have been changed by transports since the last recalculation. For more information, see SAPUI5 Application Index.

• Using the SAPUI5 Application Index REST API: To execute the SAPUI5 application index REST API, you now use ICF node /sap/bc/ui2/app_index instead of ICF node /sap/bc/app_index. For more information, see Securing the SAPUI5 Repository.

• Recalculating Meta Data and Resetting Cache Buster Information: To recalculate the meta data and to reset the cache buster information, you can now add /do-update-meta-data to the URL of your app or component. This replaces /resetcachebuster, which is now deprecated. For more information, see Cache Buster for SAPUI5 Application Resources.

• Object Page:

  • Four-column layout on XL screens: The object page can have more columns on larger XL screens (that have a width of 1440px or more). This new feature works out-of-the-box and does not require anything to be set, but note that it only works if you are using blocks as content holders in a subsection. Now the content in a block can take up to four columns. In addition, the block has an auto setting used to calculate the optimal size of each block in relation to its surrounding blocks. For more information, see the samples in the Explored app in the Demo Kit.

  • Two-column layout on L screens: A new property useTwoColumnsForLargeScreen allows overriding the default behavior on large screens that shows three columns so that two columns are displayed instead.

  • Responsive prioritization: It is now possible to define priorities for sections and subsections using the importance enumeration (Low/Medium/High). A responsive behavior for the different screen sizes has been implemented. Also, a new property showOnlyHighImportance has been added in the ObjectPageLayout control, which alters the behavior of the importance rules so that regardless of the screen size, only the High importance content of a section or subsection is displayed. In addition, the Expand button has been implemented to manually expand or collapse the low priority content in sections. The More and Less buttons can be used to manually show or hide all subsections that are hidden or displayed.

• Field Groups: Controls can now be assigned to logical groups which will trigger an event if this group is left.

• Relative Date / Time Formatter: We now provide new options to provide relative date and times (e.g. seconds, minutes etc.)

  

• New Design for Busy Indicator: The visual design of the local and global busy indicator has been updated.

  

• sap.m.ComboBox: Improved rendering performance by internally using sap.m.SelectList instead of sap.m.List.

• sap.m.MessagePopover: The text size has been increased on desktop devices. A new showArrow property has been added, which opens the MessagePopover in Combobox mode, without the arrow.

• sap.m.MultiInput: Improved usability by always showing in multi-line mode on phones.

• sap.m.MultiInput and MultiComboBox: Added support for copy-and-pasting tokens to Excel.

• sap.m.OverflowToolbar:

  • Prioritization: You can set a priority to each OverflowToolbar item using the new priority property of the LayoutData element. The priority defines the overflow order of the items when the size of the OverflowToolbar is not enough. The default priority of each OverflowToolbar item is High. All priorities are accessible through the sap.m.OverflowToolbarPriority type.

  • Grouping: The new group property of the LayoutData element enables OverflowToolbar items to overflow together even if they are on different positions. The default value of the property is 0, meaning that the element does not belong to any group. When group elements have different priorities, the priority of the group is defined by the maximum priority of its elements.

• sap.m.SimpleForm: Added support for AriaLabelledBy.

• sap.m.Slider: Added option to disable handle tooltip.

• sap.m.UploadCollection: In the 'Upload Pending' scenario, you can now select multiple attachments in one step and add these to the upload list. The control supports canceling the upload of a file of this selection without canceling the other selected files.

• sap.m.Wizard:

  • The new icon property on the WizardStep control enables developers to replace the subsequent step numbering in the progress navigation part of the Wizard control. In order for the icon to be displayed, each step in the Wizard should have this property defined, otherwise the default numbering will be displayed.

    

  • A branching mode has been implemented to enable users to take multiple paths within a single wizard. Different outcomes and steps are displayed depending on input from the previous steps. Dashed lines in the wizard progress navigator indicate that all subsequent steps may vary.

    

  • A new Summary page has been implemented that is displayed after all steps in a wizard are completed. This enables users to review their input at a glance and edit it if needed.

    
• sap.suite.ui.commons.ProcessFlow:

  • Clickable connection labels between process flow nodes have been implemented (ProcessFlowConnectionLabels). If connections are not unique, you can select a connection by clicking the label. You can hide or unhide these labels.

  • You can now group nodes that are semantically equal or have some properties in common by using the aggregated node type sap.suite.ui.commons.ProcessFlowNode. For this reason, the type property has been added to the ProcessFlowNode control. Possible values are single (default) or aggregated, which can be set by the application. Aggregated nodes are displayed with a shadow representing the stacked documents.

• Smart controls: These controls now support multiple schemas with different namespaces. For more information about smart controls, see the control-specific information under sap.ui.comp.

  • sap.ui.comp.smartfield.SmartField: The new property proposedControl is used to make a proposal for a particular control that is to be used by SmartField. Currently sap.m.ObjectNumber and sap.m.ObjectIdentifier can be selected.

    The new event valueListChanged is fired when the model is updated with the selected data after the values have been selected using value help or type-ahead.

    The toggling between edit and display mode is now handled by the editable property instead of the enabled property of the control.

  • sap.ui.comp.smartfilterbar.SmartFilterBar:

    For MultiInput filter fields, the MultiLine mode has been activated to improve usability.

    Multi-value and unrestricted Date fields are now supported if the annotation sap:filter-restriction="multi-value" is set for date properties.

  • sap.ui.comp.smarttable.SmartTable:

    The SmartTable is now easier to use, even without annotations, thanks to these easy-to-use configuration settings:

    • The new property initiallyVisibleFields is used to specify the columns that are visible when the SmartTable is first started.

    • The new property requestAtLeastFields is used to specify the fields that should always be requested.

    The new PresentationVariant annotation can now be used to do the following:

    • Change existing behavior to consider LineItem annotation from the Visualizations property

    • Use RequestAtLeast property to also enable $select for tables that are not of type AnalyticalTable

    The LineItem annotation is now a fallback option and used only if no PresentationVariant annotation exists.

    The Text annotation is now supported for built-in SmartTable controls (default is descriptionAndId, can be configured using defaultDropDownDisplayBehaviour custom data)

    Several default UI settings have been improved, such as hiding the column visibility menu option from the table header, the right-alignment of date and time fields, and enabling MultiToggle by default (internally for sap.ui.table.* tables).

    Depending on the internal table used, the new noData aggregation can be filled with a string (sap.m.Table and sap.ui.table.Table) or with sap.ui.core.Control (sap.ui.table.Table only). Providing a control for the noData aggregation allows you to display icons, texts, and even more complex layouts if no data is available.

    The new property ignoreFromPersonalisation can be used to specify the fields that should not be shown in the table personalization dialog.

• sap.ui.comp.variants.VariantManagement: If the list of variants contains ten or more items, a simple search is automatically made available to improve usability.

• sap.ui.comp.valuehelpdialog.ValueHelpDialog: The dialog provided by the ValueHelpDialog control now supports smartphone use for the first time.

• sap.ui.layout.DynamicSideContent: The aspect ratio on M breakpoint is changed – the side content area now has a 340px fixed width instead of 33% (for better usability on tablet devices and small screens).

Explored app of the Demo Kit: For better readability of the sample code in the code viewer, line numbering and syntax highlighting have been implemented.