What's New in SAPUI5 1.36

• The OData Model V2 now supports binding against function import parameters. If the function import returns result data, then this result data can also be accessed and bound. For more information, see OData V2 Model.

• You can use jQuery.sap.measure to measure the performance of your JavaScript code. You can retrieve the results via APIs. You can calculate averages and use filters or categories. For more information, see Performance Measurement Using jQuery.sap.measure.

• Gantt charts are a state-of-the-art function that can be used in various application domains, particularly in planning and scheduling. In resource-based planning, for instance, a Gantt chart can be used to show the plan using intuitive graphics, making it easier to view resource availability. In addition, it also helps when monitoring the actual execution of the plan and enables interactive resource-based planning by drag&drop. In project management, it is often used to display the project structure in a hierarchical way, showing milestones and relationships between activities.

  The GanttChart control provides a rich set of features, such as displaying one or more Gantt charts, various events for user interaction (e.g. drag&drop or mouse click events), multiple basic shapes (e.g. rectangles, milestones, triangles, relationships) and more sophisticated shapes (e.g. utilization line chart, utilization bar chart) drawn in the chart area, comprehensive tree table features provided by the underlying TreeTable control, and powerful configuration capabilities (e.g. shape colors and patterns, application-specific buttons) as well as zooming and scrolling. In addition, a consuming application can implement its own shapes for the chart area. The Gantt chart control does not contain any business logic, meaning consuming applications have to define their own user interaction and business semantics.

  

  • sap.gantt.GanttChartWithTable: The GanttChartWithTable control contains a tree table to the left and a chart to the right. It can display a data hierarchy in the tree table and visualize its specific data along a time axis in the chart area.

    All controls that can be used inside the tree table are also supported in the Gantt chart.

    The application can control the visibility of the toolbar above the tree table, the display of buttons and menu items, as well as the time axis display, such as planning period and zoom level. The application can also control the display of shapes contained within the chart area, such as shape types and colors.

    

  • sap.gantt.GanttChartContainer: The GanttChartContainer control contains more than one GanttChartWithTable control and a global toolbar. It can affect the behavior of all embedded GanttChartWithTable controls, such as zoom level, view layout, and default settings.

    The global toolbar provides default buttons, such as buttons for zooming, settings, and layout. The application can define additional buttons or hide default buttons as needed. Multiple views can be laid out vertically or horizontally, and the scrolling (both horizontally and vertically) can be synchronized, depending on the settings. Default options are provided in the settings to control the behavior of the control, such as Indicate Current Time, Show Cursor Line, Show Divider Line, Synchronize Time Scroll, and Synchronize Row Scroll.

    

• RadialMicroChart: You can use the new RadialMicroChart to display values in a circular chart with a percentage value in the center.

  

  Different properties are provided allowing you to configure the percentage value. The control supports a responsive design. Depending on the available space and favored size of the chart, you can influence the chart's size and representation. You can also use a property to define the color of the circle.

• Performance improvements:

  • When possible, data requests will now be send out before rendering is triggered to improve overall end-to-end times.

  • Initial auto-expand to n levels is now supported in TreeTable for OData-based services with fewer requests based on a new OData annotation.

• Relative time formatter for sap.ui.core.format.DateFormat: The new formatting options short and narrow for the relativeStyle allow a concise display of a relative date like 3 years ago or 2 hours ago.

• ABAP NUMC types are now supported in annotation processing and OData types as follows:

  • ABAP NUMC types can be represented in OData services as Edm.String with OData v2 SAP Extension 'sap:display-format="NonNegative"' and constraint 'maxlength' set.

  • ODataMetaModel also provides the OData v2 SAP Extension 'sap:display-format="NonNegative"' as v4 annotation '"com.sap.vocabularies.Common.v1.IsDigitSequence": { "Bool" : "true" }'. For more information, see Meta Model for OData V2.

  • AnnotationHelper.format considers the 'com.sap.vocabularies.Common.v1.IsDigitSequence' annotation and 'maxlength' constraint when creating a binding. For more information, see Annotation Helper.

  • sap.ui.model.odata.type.String reacts to the 'com.sap.vocabularies.Common.v1.IsDigitSequence' annotation and 'maxlength' constraint when processing its values.

• sap.m.FlexBox: The FlexBox control now allows wrapping items into multiple lines and influencing the layout of these lines. The sizing behavior of flex items can be adjusted with minimum or maximum width and height values.

• sap.m.MultiInput: This control now has the new property maxTokens, which defines the maximum number of tokens that are allowed within the MultiInput.

• sap.m.SearchField: This control now has a new suggestions feature. When a user enters something in the search field, the application can now display a list of suggestions.

  

• sap.m.TimePicker: A user can now edit or delete values directly from the input field on mobile devices.

• sap.m.UploadCollection: You can now download an item from the upload collection list. For this feature, two new methods have been added, one to the UploadCollection and the other to the UploadCollectionItem. This means you can choose from where you want to call the method. Both methods allow you to define if the default download location of the browser is used or if the file dialog is called via a parameter to store to a different location. For more information, see Upload Collection.

• sap.m.Wizard: You can now add titles for steps (in addition to icons) that are shown in the progress navigator of a wizard. Titles help users to relate the progress navigation part to the step content easily.

  

• sap.ui.layout.DynamicSideContent: You can now configure the position of the side content to appear either to the left or to the right of the main content.

• sap.ui.layout.form.Form and sap.ui.layout.form.SimpleForm: Toolbars can now be used in Form or FormContainer headers.

  

• sap.ui.layout.form.SimpleForm: This control now has the new property backgroundDesign, which can be used to switch between different backgrounds.

• sap.ui.comp.smartchart.SmartChart: The SmartChart control now allows you to navigate to the related semantic object for your chart when you select the relevant part of the chart, such as a column. For this purpose, the SmartLink control has been implemented along with a new button (Jump To) in the toolbar.

  In addition, the control provides the following new features in the toolbar:

  • Chart type shown as icon

  • Zoom in and out

  • Maximize and minimize

  • Toggle legend visibility

  All actions performed in the chart itself (rather than in Settings) can now also be saved as variants.

• sap.ui.comp.smartform.SmartForm: The adjustLabelSpan and singleContainerFullSize properties of SimpleForm have been added to the SmartForm control.

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

• sap.ui.vk library: The following improvements have been implemented in the visual interaction toolkit:

  • The NodeHierarchy control now has the new methods fineNodesByName and findNodesByMetadata, which allow you to search for specific nodes in a 3D scene.

  • The NativeViewport control now allows for viewing a wider range of file formats that are natively-supported by browsers. For more information, see Native Viewport.

The app templates now have an option to generate apps that run standalone, independently of the SAP Fiori launchpad. When used in this way, apps get a separate index.html file to start the app. For more information, see App Templates: Kick Start Your App Development and Folder Structure: Where to Put Your Files.

• Overview pages now support conditional formatting. For example, using the SAPUI5 formatter, cards in overview pages can now show 1K instead of 1000.

• You can now display numeric KPIs in the headers of all card types, not just analytic cards. The number displayed in a KPI header is derived from an aggregation of values in the OData service, as defined in the manifest.json file. In addition, the header displays a title, the unit of measurement, the trend, and percentage of change.

  

• Object streams opened from stack cards can now be comprised of any type of card, not only quick view cards – one type per object stream. For example, clicking on a stack card can open a stream of list cards or table cards.

• You can now navigate from cards directly to a URL destination, in addition to intent-based navigation to applications.

• When opening an overview page from another application, you can use URL parameters to open the overview page in context of that application. The URL parameters are passed on to the global filter to obtain a relevant, cohesive view of the data.

• Cards now support the following OData capabilities: $filter, sort and $select.

As of this version, SAPUI5 supports Microsoft Windows 10, Microsoft Internet Explorer 11, Microsoft Edge, Edge on touch devices, Edge on Microsoft Windows Phones, and SAP Fiori Client 1.6.