JET v4.1.0 Release Notes

v4.1.0 revision #39607 (20 Nov 2017)


These release notes cover the following topics:

View the Release Notes for the prior release (v4.0.0)

New Features included in v4.1.0

oj-diagram

oj-list-view

  • Added a new selection-required attribute that ensures there is at least one item selected in the list. Please see jsdoc for more details.
  • Added support of inline template. Please see itemTemplate slot and 'as' attribute for more details.

oj-tab-bar

  • Tab bar now supports reordering of items using drag and drop. Please see cookbook demo for more details.
  • Supports progressive truncation, means truncates the tab label with ellipsis based on available width. Please see cookbook demo for more details.
  • Added support to make tab removable by adding a close icon. Please see cookbook demo for more details.

Significant JET changes since 4.0.0

This section lists significant consumer-facing changes that have been made to JET since v4.0.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 v4.1.0.


Component Changes

oj-tab-bar

For better accessibility, oj-tab-bar uses wai-aria role as "tablist" instead of "toolbar". This helps in linking tab item with respective content section. Please see cookbook demo for more details.

oj-label

oj-label's help icon is not rendered if help.definition and help.source are "", null, or undefined. In the prior release the help icon was rendered when these properties were not null or undefined. So as an example, in the prior release, if help.definition = "" and no help.source was specified, you'd see the help icon next to the label, and that was a bug.

API Changes

Component Events

When using custom element syntax, all JET CustomEvents with the exception of <property>Changed events are now created with bubbles: true. These events will bubble upwards through the DOM tree unless the stopPropagation function is called.

oj-dialog

The dialog (title) was incorrectly documented as a component property. Note that developers should use the HTML (title) attribute instead.

oj-tree-view

Tree View now supports the expanded attribute to programmatically expand the items.

oj-select-one, oj-select-many, oj-combobox-one and oj-combobox-many

  • The options attribute now supports data provider. This attribute accepts:
    1. an array of oj.Option and/or oj.Optgroup.
      • Use oj.Option for a leaf option.
      • Use oj.Optgroup for a group option.
    2. a data provider of oj.Option. This data provider must implement both oj.IteratingDataProvider and oj.FetchByKeys.
      • value attribute in oj.Option must be the row key in the data provider.
      • options-keys attribute is not supported, please use oj.ListDataProviderView with data mapping instead.
      • A maximum of 15 rows will be displayed in the dropdown. If more than 15 results are available then users need to filter further.
  • The options-keys attribute is deprecated. Please use oj.ListDataProviderView with data mapping for the options attribute instead. Depending on options-keys means that the signature of the data does not match what is supported by the options attribute. When using Typescript, this would result in a compilation error.

Composite

The oj.Composite.register method's descriptor.css parameter has been deprecated in favor of using require-css, a RequireJS CSS plugin, for loading CSS. Applications should switch over to using require-css, especially for cases where composite styles contain external references.

Framework Changes

Data Binding

With the switch to custom elements, JET is providing a more consistent way to data bind attribute values and add control flow logic. We will be deprecating the knockout data-bind syntax in a future release and previewing the new recommended syntax which now exposes new data binding elements for text oj-bind-text, conditions oj-bind-if, and looping oj-bind-for-each. These binding elements do not have properties or methods and will be removed from the DOM after bindings are applied so they avoid interfering in page layouts (e.g. flex) and as additional DOM elements for JET components to deal with.

Attribute binding on any HTML element is also available with this JET release. Applications can prefix any attribute name with a ":" character to enable data binding to arbitrary HTML attributes. The attribute binding support will set the unprefixed attribute in the DOM with the result of the evaluated bound expression. Please note that attribute binding is one way only and should use the [[...]] syntax. In the case of component attributes, applications are recommended to bind the attribute names directly and avoid the use of the ":" prefix. The style attribute binding supports Object types unlike the native HTML version and allows setting of style subproperties using dot notation, e.g. style.font-weight="[[...]]".

These new data binding features can be used by importing the ojknockout module into your application. Please see the Binding Provider cookbook demos for more information and links to documentation.

Slot Binding

The oj-slot element used inside composite Views has been renamed to oj-bind-slot. The oj-slot element has been deprecated in favor of the new oj-bind-slot element. All usages and APIs remain the same. Please see the API doc for more information on usage.

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.
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
[sudo] npm install -g npm@latest-4
Form Controls 26669973 If specifying a NumberConverter with a value attribute that is a literal value, the value will not coerce to a number. It will remain a string. E.g.,
<oj-input-text id="inp" value="5" converter="[[myNumberConverter]]">
document.getElementById("inp").value
will return "5".
Expression-bind the value instead of using a literal value. We expect this is how the vast majority of users use the form controls anyway. E.g.,
<oj-input-text id="inp" value="{{myValue}}" converter="[[myNumberConverter]]">
document.getElementById("inp").value
will return a number.
JET Custom Elements N/A In place modification of Array properties do not cause [property]Changed events to be fired. Array properties should be updated by using ko observables, updating a copy of the Array property after calling .slice(), or refreshing the component afterwards to ensure the component is notified of changes.
JET Custom Elements N/A The knockout text binding is not currently supported on JET custom elements. The knockout text binding should be used on a child span element or comment node of the JET custom element instead.
JET Custom Elements 26571960 Setting the disabled attribute on a JET custom element regardless of value, will disable the component in IE11. The disabled attribute can only be set in the inital DOM for JET custom elements. Any updates to data bound attribute will continue to notify the component of changes, but all subsequent element.setAttribute('disabled', ...) calls will be ignored. The application should use the disabled property setter insetad after the component has been initialized.
JET Custom Elements N/A Returning false from event listeners does nothing. Following the DOM event listener API, the application should call event.preventDefault() to prevent to cancel the default behavior.
JET Custom Elements JET-16992 Data binding and set/getProperty methods are only supported for component properties. We plan on supporting data binding for all element properties in a future release.
JET Custom Elements N/A In Firefox, Internet Explorer and Edge browsers, the following message may appear in the browser console: Custom Elements: `Element#attachShadow` was not patched. This message is being generated by the custom-elements polyfill and can be safely ignored. This message has been removed in version 1.0.4 of the custom-elements polyfill.
Composite Components KO 2141 If using a JET Composite Component in a page that does have Knockout dependencies, removing the Composite element from the page may cause a memory leak. Ensure that any Composite Components are used within ojModule bindings or make sure to explicitly call ko.cleanNode before the Composite element is removed.
ojThematicMap 26784591 Data change animations for custom element thematic map does is not currently supported. N/A.
Attribute Binding 27078426 The ':' prefix notation for global attributes on JET and native HTML elements is not currently working inside composites and will be fixed in 4.2. Use knockout attribute binding instead.
oj-rating-gauge, oj-status-meter-gauge 27091258 The API incorrectly lists a read-only attribute for these two components. The correct attribute name is readonly. The corresponding property, property change event and property change listener attribute names are readonly, readonlyChanged and on-readonly-changed, respectively. N/A.
oj-bind-for-each, oj-bind-if, oj-bind-text N/A. When using any of these three components in a page, the knockout applyBindings call must be made on a parent element rather than on the oj-bind- element itself. Calling applyBindings directly on an oj-bind- element will not cause the associated code to execute. N/A.