JET v7.0.1 Release Notes

20 May 2019


To view Release Notes from a prior release of JET, select the specific below

These release notes cover the following topics:

Things you need to know first

  • Library Dependency updates: In this major release, multiple library versions have been updated. Make sure you read about these updates and make any appropriate updates to your application as needed.

  • API, Component and Theming(CSS) changes are listed under the Significant changes section. Deprecated items should be reviewed and updated in your application as soon as possible. All deprecated API, CSS classes, and features, will be removed from the distribution in a future release. Please update your code as soon as possible to help avoid being impacted by the removal in the future.

  • The JavaScript API Docs and TypeScript API Docs have now been combined into a single document. Also included in this new format, are two checkboxes that allow you to see deprecated and legacy JavaScript Only API's. The deprecated API's are API that has been announced as deprecated and will be removed from the distribution in a future release. You should review your application for any use of these API and move to a suggested alternative as soon as possible. The legacy JavaScript Only API are those API that we do not plan to provide TypeScript definitions for. For most of these there is an alternative already provided, which does have Type information available (ex. *DataSource vs. *DataProvider), However some of these are still in the process of being converted to DataProvider or new implementations.

  • Upgrading an existing JET application to v7.0.0 is best done by following the steps defined in the Migration Chapter of the Developers Guide.

  • Cookbook updates: The JET Cookbook has been updated to use the most recent syntax where ever possible. Read the What's New section of the JET Developers Guide for a good explaination of the new code syntax.

New Features included in v7.0.1

New UI Components and Component Features

oj-gantt

Data Visualization Component Template Slots

Template slots have been introduced to provide a more declarative alternative to many of the renderer properties currently supported by the Data Visualization components. These template slots extend the binding context of the parent component with the same context object that is currently passed to the corresponding renderer function. The full list of template slots is below:

Slot Name Renderer Property Component(s)
tooltipTemplate tooltip.renderer oj-chart, oj-diagram, oj-gantt, oj-led-gauge, oj-n-box, oj-picto-chart, oj-rating-gauge, oj-spark-chart, oj-status-meter-gauge, oj-sunburst, oj-tag-cloud, oj-thematic-map, oj-timeline, oj-treemap
pieCenterTemplate pieCenter.renderer oj-chart
rowAxisLabelTemplate rowAxis.label.renderer oj-gantt
centerTemplate center.renderer oj-status-meter-gauge
rootNodeContentTemplate rootNodeContent.renderer oj-sunburst
nodeContentTemplate nodeContent.renderer oj-treemap

Significant JET changes since 6.2.0

This section lists significant consumer-facing changes that have been made to JET since v6.2.0. Where bugs or ERs were used to track the change, they are included below. The following list does not include changes that are internal implementations, or changes made to samples, demos, or test collateral. It is expected that application code will not need to be modified to uptake v7.0.1.


Component Changes

Event Listener Properties

The use of event listener properties (e.g. inputText.onValueChanged or button.onOjAction) for documented component events has been deprecated. Event listeners should only be set using attributes:


    <oj-input-text on-value-changed="[[handleValueChanged]]"></oj-input-text>

    <oj-button on-oj-action="[[handleOjAction]]"></oj-button>
              

or by calling addEventListener:


    inputText.addEventListener('valueChanged', function(event) {
      ...
    });

    button.addEventListener('ojAction', function(event) {
      ...
    });
              

Data Visualization Components Drag and Drop Behavior

Previously, data visualization components that support drag and drop (e.g. Chart) determine the drag source to be the element directly under the mouse (or touch point) when the dragstart event is fired, which is not necessarily the same element directly under the mouse (or touch point) when the preceding mousedown (or touchstart) event is fired. Now, the drag source is determined by the target of the mousedown (or touchstart) event rather than that of the dragstart event.

oj-dialog new dialog-title property

The dialog component has added a 'dialog-title' property for setting the title within the dialog's header slot. Use of the 'title' attribute for setting the dialog's title is deprecated.

oj-chart's pie-center.renderer context

The PieCenterContext now also has a totalValue property, which is the total of all values in the pie chart.

oj-menu new close() method

The menu component has added a close() method to programmatically close the menu.

Selection

The selection property on the following components has been deprecated in favor of the new selected property:

scrollPolicy on oj-table and oj-list-view

The default behavior of oj-table and oj-list-view has been switched to 'loadMoreOnScroll'. Applications using the legacy TableDataSource would still get the old behavior, otherwise if applications want to explicitly load all the data when oj-table and oj-list-view are initially displayed, they must set the scrollPolicy property to 'loadAll'. Applications that are currently using a Paging Control with the 'loadMore' mode are encouraged to switch. If they do not want to change, they should set the scrollPolicy property to 'loadAll' to avoid any potential complications between Table, ListView and Paging Control.

oj-table selection-mode.row and selection-mode.column now support 'none' value

The table component has added support for 'none' as a valid value for its selection-mode.row and selection-mode.column properties. Similar to the existing List View and Data Grid support, specifying this value will disable selection of the specified type.

Data Visualization Component Automation APIs

The following automation-related methods have been deprecated without replacement:

Component Methods
oj-chart getDataItem, getGroup, getGroupCount, getLegend, getPlotArea, getSeries, getSeriesCount, getTitle, getXAxis, getYAxis, getY2Axis
oj-spark-chart getDataItem
oj-diagram getLink, getLinkCount, getNode, getNodeCount, getPromotedLink
oj-led-gauge getMetricLabel
oj-status-meter-gauge getMetricLabel
oj-legend getItem, getSection, getTitle
oj-n-box getCell, getColumn, getColumnCount, getColumnsTitle, getDialog, getGroupBehavior, getGroupNode, getRow, getRowCount, getRowsTitle
oj-picto-chart getItem, getItemCount
oj-sunburst getNode
oj-tag-cloud getItem, getItemCount
oj-thematic-map getArea, getLink, getMarker
oj-treemap getNode

API Changes

Deprecating Paging Control LoadMore

The 'loadMore' mode in paging control will be marked as deprecated and will not get any new feature updates or support going forward. This mode was originally designed to provide High-Watermark Scrolling support for collection components such as Table, ListView, and DataGrid. Since then, these components have implemented their own native High-Watermark Scrolling APIs, removing the requirements for using paging control with 'loadMore'. However, because paging control may be bound to non collection components such as a generic html list, this mode will still be active on paging control. Additionally, because the Table, ListView, DataGrid default scrolling behavior may use High-Watermark Scrolling, users will need to manually set the scroll-policy in Table, ListView, DataGrid to 'loadAll' if they still want to use the 'loadMore' mode.

Paging Control Translation keys change for the page index range

The Paging Control Translation strings used for the page index range (e.g. (1-5 of 25 items)) currently do not work properly for some languages. To fix this issue, 8 new translation keys and strings are used to cover the various use cases which are included in the jsDoc. For all users, please check your translation strings for the following keys: Users are encouraged to switch to use these new strings if they are having issues with translations. Paging Control will still be compatible with the older translation keys for users with their own translation files.

The old keys:

  • 'msgItemRangeCurrent'
  • 'msgItemRangeCurrentSingle'
  • 'msgItemRangeItems'
  • 'msgItemRangeOfAtLeast'
  • 'msgItemRangeOfApprox'
  • 'msgItemRangeOf'

The new keys:

  • 'fullMsgItemRangeAtLeast'
  • 'fullMsgItemRangeApprox'
  • 'fullMsgItemRange'
  • 'msgItemRangeNoTotal'
  • 'fullMsgItemAtLeast'
  • 'fullMsgItemApprox'
  • 'fullMsgItem'
  • 'msgItemNoTotal'

ExpandedKeySet and ExpandAllKeySet

The ExpandedKeySet, ExpandAllKeySet, ObservableExpandedKeySet classes has been deprecated in favor of the generic KeySetImpl, AllKeySetImpl, ObservableKeySet classes.

ColorAttributeGroupHandler.createAttrDiv

ColorAttributeGroupHandler.createAttrDiv and ColorAttributeGroupHandler.processAttrDiv deprecated in 4.2.0 are being removed in 7.0.0.

Theme Changes

CSS Variables Update

In the JET 6 release notes we discussed our plan to move to CSS Variables, however it will not be available in 7.x. We're still very much committed to using CSS Variables. To see the general direction we're heading please look at the experimental files released in 6.0.

Theming Deprecations

The following classes are deprecated

  1. oj-helper-flex - This class was originally added when prefixing was needed for cross browser support, it is being deprecated because prefixing is no longer needed. It has always been documented that you must also set the standard syntax display: flex with a class or style because once all jet supported browsers support the standard syntax this class will be removed.
  2. oj-helper-inline-flex - This class was originally added when prefixing was needed for cross browser support, it is being deprecated because prefixing is no longer needed. It has always been documented that you must also set the standard syntax display: inline-flex with a class or style because once all jet supported browsers support the standard syntax this class will be removed.

Sass Variable Changes

The following new variables are introduced

  • $messageCategoryFontWeight - Specifies the font weight for category text in oj-message.

Public Style Class Changes

Public Style Class Deprecations

The following classes were used by CSS based form layout and are deprecated. Use the preferred oj-form-layout component instead of the CSS based form layout approach.

  1. oj-form
  2. oj-form-cols-labels-inline
  3. oj-form-cols-max2
  4. oj-form-control-group
  5. oj-form-layout
  6. oj-form-no-dividers
  7. oj-[size]-form-across
  8. oj-[size]-labels-inline
  9. oj-[size]-label-inline
  10. oj-[size]-labels-nowrap
  11. oj-[size]-label-nowrap

Framework Changes

EditableValue components

The clone method for oj.Message was deprecated in 5.1 and is removed in 6.0. Since we recommend using duck-typing oj.Message instead of using the constructor this method has been removed. The private methodequals is removed from oj.Message and its sub class. The private methodcanDisplayis also removed from oj.Message.

ojvalidation-number and ojvalidation-base dependency changes for Data Visualization Components

All Data Visualization Components previously loaded the ojvalidation-base and ojvalidation-number modules. Going forward, these modules are now only being loaded by the components that specifically need them. ojvalidation-base will be loaded by:

  • ojchart
  • ojgantt
  • ojgauge
  • ojtimeaxis
  • ojtimeline
whereas ojvalidation-number will be loaded by:
  • ojchart
  • ojgantt
  • ojgauge
Application code relying on these validation modules being implicitly loaded by components that no longer do so will need to be updated by declaring these module dependencies explicitly. Note that it is always best practice to explicitly require needed modules rather then relying on implicit loading.

Library Changes

Knockout 3.4.2 has been upgraded to 3.5.0. This library has a security fix that we need as well as some other bug fixes and performance enhancements. One major change in this version is that you can no longer pass in a "null" value as the second argument to the ko.applyBindings() method. A real DOM element must be passed as the second argument.

es6-promise has been updated to 4.2.6

requirejs has been updated to 2.3.6

jQuery has been updated to 3.4.1

Tooling Changes

Removing yeoman and grunt

generator-oraclejet and ojet-cli will remove their support and use of yeoman and grunt in the 7.0.0 release. The ojet CLI will be the only way to use the JET Tooling from that point on.

Known Issues

The following table calls out specific known issues, with workarounds where available.

Category Bug # Description Workaround (if available)
iOS N/A JET hybrid mobile apps created using an earlier JET release may have additional spacing at the top of the page when deployed to iOS 11 devices.
Change the viewport meta tag in index.html to the following:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no"/>
iOS ios-sim 210 ios-sim version 5.1.0 may be installed locally by cordova-ios and serving the app to iOS simulator reports:
"Error: Cannot read property 'replace' of undefined"
cd hybrid/platforms/ios/cordova; npm install ios-sim@latest
iOS ios-deploy 275 Deployment to iOS device succeeds, but the app fails to launch and an error is reported in the terminal.
Upgrade to the latest version of ios-deploy (sudo npm install -g ios-deploy) and use a developer signing identity. Otherwise, launch the app manually on the device.
Android Cordova 9 and Android Pie SDK defaults usesCleartextTraffic attribute to true.
Cleartext HTTP traffic is not permitted
Add the following attribute to the <application> tag. <application ... android:usesCleartextTraffic="true" ... > </application>
npm npm 16901 npm version 5 does not install the oraclejet module when scaffolding a JET hybrid app and building the app reports:
Warning: ENOENT: no such file or directory, open 'node_modules/oraclejet/package.json' Use --force to continue
Upgrade to a more recent release of npm. [sudo] npm install -g npm