JET v9.0.0 Release Notes

Alpha Development Release Only


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

  • Starting in JET 9, HTML tags MUST be properly closed using proper HTML syntax, else your app will fail to run. This is a change due to a security fix picked up as part of upgrading to JQuery 3.5.1. As an example, while in the past "<vb-msg/>" would have been fine, now your HTML code must have "<vb-msg></vbmsg>".

  • IMPORTANT! Alpha releases are only for teams/developers that understand that the code they are working with WILL CHANGE and will require coding changes in the future. It is a chance to look at a future release at a very early stage of release.

    Please visit the JET Alpha Release Notes wiki. for information about a specific Alpha release.

  • Redwood by Default!!
    All UI components and functionality is using the Redwood Design System by default in this release! If you woud like to use the Alta theme with JET v9.0.0, please see the Migration chapter of the JET Developers Guide for guidance.

  • More...

New Features included in v9.0.0

  • All UI components now have the new Redwood look and feel
  • CSS Variable support
  • Progressive Loading components
  • Improved animation patterns
  • Translated runtime resources for the Icelandic locale (ISO code IS)
  • ...

New UI Components and Component Features

  • Waterfall Layout
  • Listitem Layout
  • Improved Form Layout
  • Input Search
  • Range Slider
  • Stream List
  • Selector
  • Refresher
  • Improved Panel designs
  • ...

Significant JET changes since 8.2.0

This section lists significant consumer-facing changes that have been made to JET since v8.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 v9.0.0.


Component Changes

FileUploadTransport

The FileUploadTransport interface has been deprecated. oj-progress-list and the associated ProgressItem interface were deprecated in 8.0.0. Applications should use oj-list-view with custom item content to handle usecases that were previously addressed by oj-progress-list.

oj-combobox-many

The rawValue property of the oj-combobox-many component was documented as being string-valued, however in practice, the actual value was either a string or an Array<string> depending on the circumstance. The type is now documented as Array<string> and the behavior has been normalized so that the Array always contains the current value and the text typed into the field, which will correspond to the last value in the Array.

oj-status-meter-gauge: new labelled-by and described-by attributes

The oj-status-meter-gauge component has added the following new attributes:

  • labelled-by: used to establish a relationship between this component and another element for accessibility. A common use is to tie the oj-label and the oj-status-meter-gauge together to facilitate correct screen reader behavior.
  • described-by: used to establish a relationship between this component and another element. Typically this is not used by the application developer, but by the oj-label custom element's code. One use case is where the oj-label custom element code writes described-by on its form component for accessibility reasons. To facilitate correct screen reader behavior, the described-by attribute is copied to the aria-describedby attribute on the component's dom element.

oj-rating-gauge: new labelled-by and described-by attributes

The oj-rating-gauge component has added the following new attributes:

  • labelled-by: used to establish a relationship between this component and another element for accessibility. A common use is to tie the oj-label and the oj-rating-gauge together to facilitate correct screen reader behavior.
  • described-by: used to establish a relationship between this component and another element. Typically this is not used by the application developer, but by the oj-label custom element's code. One use case is where the oj-label custom element code writes described-by on its form component for accessibility reasons. To facilitate correct screen reader behavior, the described-by attribute is copied to the aria-describedby attribute on the component's dom element.

oj-list-view

The value of selection-mode will no longer have any effect when selection is set programmatically. The selection-mode attribute should only affect when users directly interact with ListView to select item(s).

oj-table

The oj-table component now implements the 'application' role for accessibility. This enables screen reader users to make selections, edit contents, and scroll more data into view with the standard keyboard behavior of the component.

Inline Messaging in Redwood

The Messages api contains summary and detail. In the Redwood designs the detail is shown in the form component's inline messages, and the summary is not shown. If you created a message with only the summary, like in a form component's messagesCustom attribute, then no message will be displayed to the user. Instead, create a Message with only the message detail.

Component Metadata changes

A JSON Schema for validating component.json files (compatible with Draft 7 of the JSON Schema specification) is now shipped as part of the JET release. It is available at: dist/metadata/components/schemas/component-schema.json

API Changes

oj-list-view

Applications can now register an itemAction event which will be fired whenever user performs an action gesture on an item.

ItemContext in oj-list-view now includes a metadata object of type oj.ItemMetadata<K>.

oj-tree-view

ItemContext in oj-tree-view now includes a metadata object of type oj.ItemMetadata<K>.

oj-tree-view item.selecatble API is set to false when item.focusable is also false.

oj-tree-view will now render a parent node when an empty child array is provided.

In JET 10.0.0, oj-tree-view will no longer set the item's key as an ID due to an accessibility issue. If your application / automated tests have a need to identify tree nodes, they will need to be adjusted to use the getContextByNode API.

oj-rating-gauge

The orientation property of oj-rating-gauge has been deprecated. Usage of vertical rating gauges is no longer recommended.

oj-form-layout and the form components

oj-form-layout and the form components now have a user-assistance-density attribute. It is ignored in the Alta theme. The values are 'compact', 'efficient', and 'reflow'. If 'compact', there is no reserved space under the fields and the help, hints, messages will all be shown in a notewindow. If 'efficient', there will be one line of reserved row under each form component and the required, help, hints and messages will all show inline. If 'reflow', there will be no reserved rows under each form component, and the required, help, hints and messages will all show inline. oj-form-layout's user-assistance-density property value is propagated to its form components if the form components user-assistance-density is not set.

help-hints.source in the Redwood theme is currently not rendering anything, but will render "More Info..." in the inline messaging area in a future release.

oj-form-layout now has a readonly attribute. If set, it is provided to its form components if the form components readonly is not set.

oj-select-single

The selectedItem property of the CollectionTemplateContext has been deprecated in favor of the new currentRow and handleRowAction properties, which provide additional functionalities. Please see the API doc and the demos for more information.

oj-table

Applications can now register a rowAction event which will be fired whenever user performs an action gesture on a row.

Display-options

The sub-property help-instruction has been deprecated. For sub-properties converter-hint, messages, and validator-hint, some option values have been deprecated. New value display has been added. If you don't want to show the hint or message, set it to 'none'. Otherwise, it will show according to the user-assistance-density options.

Theme Changes

New Redwood Theme

Redwood is the new Oracle user experience design language, and it is the recommended theme if you are building a new application.

Nothing deprecated in JET 9 or earlier is guaranteed to work in Redwood or continue to work in later releases, so if you are migrating you must remove any deprecated API's to use Redwood.

CSS Variables

CSS variables are supported in the Redwood theme, but they are preview in JET 9, so feel free to play around with them, but variables may be removed or renamed when you pick up the next version of JET. We hope to have them production in JET 10.

CSS variables are nice because they are a standard, you can do theming without a preprocessor, and the cascade lets you change values per instance. However CSS variables are not supported on all browsers and using CSS variables can be a performance hit. In the css directory we provide oj-redwood-cssvars.css and oj-redwood.css, the latter file goes through a preprocessor at build time to remove the css variables.

Theming Redwood

Theming support in Redwood uses CSS Variables instead of Sass, see the CSS Variable version of theme builder. The instructions tab includes steps to try it out. Redwood theming is preview in JET 9, so feel free to play around with it, but you may need to make changes when you pick up the next version of JET. We hope to have it production in JET 10.

Alta Support

The Alta theme will still be supported in JET 9 and 10 at a minimum. It's possible it will be supported beyond that, but it's TBD. Alta themes will not support CSS variables, theming Alta with sass will still be supported in JET 9 and 10 at a minimum.

Components introduced in jet 9 or later may not be supported in Alta. New APIs on existing components introduced in jet 9 or later are not guaranteed to work in Alta.

Public Style Class Changes

New Utility classes

Not all new utility classes work in Alta

  1. padding and margins: use our margin and padding classes, zero and larger values have been added in jet 9.
  2. font-size and font-weight: use the new typography classes
  3. links: use the new link classes
  4. color: use our new  text color or icon font color classes
  5. background-color: use our new  background color classes
  6. border: use our new divider or previously existing panel classes

Form controls can now use width convenience classes to create a medium or small field

In the Redwood theme the default width of a form control component is 100%. These width and max width convenience classes are available to create a medium or small field. These classes are:

  • oj-form-control-max-width-sm
    <oj-input-text label-edge="inside" label-hint="name" value="text" class="oj-form-control-max-width-sm"> </oj-input-text>
  • oj-form-control-max-width-md
    <oj-input-text label-edge="inside" label-hint="name" value="text" class="oj-form-control-max-width-md"> </oj-input-text>
  • oj-form-control-width-sm
    <oj-input-text label-edge="inside" label-hint="name" value="text" class="oj-form-control-width-sm"> </oj-input-text>
  • oj-form-control-width-md
    <oj-input-text label-edge="inside" label-hint="name" value="text" class="oj-form-control-width-md"> </oj-input-text>

Deprecated classes

  1. oj-panel-[alt1-5] - use the background color classes instead.
  2. oj-fwk-icon-* - use Alta or Redwood icons if you have access to them, or consider using the apex icon font or font awesome. NOTE: oj-fwk-icon* classes may happen to work in Redwood in JET 9 but will be removed eventually. Do NOT use in Redwood.
  3. oj-text-sm and oj-text-xs - Replace oj-text-sm with oj-typography-body-sm. Replace oj-text-xs with oj-typography-body-xs.
  4. oj-text-primary-color, oj-text-secondary-color, oj-text-tertiary-color, oj-text-disabled-color - Use oj-text-color-primary, oj-text-color-secondary, oj-text-color-disabled instead. For oj-text-tertiary-color use oj-text-color-secondary.
  5. oj-icon-circle-border - remove, outer borders on circular icons are no longer recommended
  6. oj-icon-[icon-size] - use oj-icon-circle-[icon-size] instead

Framework Changes

Removal of oraclejet/dist/types/tsconfig.json file

The distributed JET type definitions contained a tsconfig.json that was primarily used to make sure the generated type definitions compiled without any errors before the release. As the tsconfig.json has no practical use to consuming Typescript applications, we will longer distribute it with the JET type definitions.

Deprecation of ojModule and ModuleBinding by oj-module element

The ojModule binding for Knockout.js and the supporting ModuleBinding class have been deprecated in favor of oj-module element.

Deprecation of ojRouter by CoreRouter

The ojRouter has been deprecated in favor of CoreRouter. ojRouter was designed to work with ojModule binding, but it needed lots of "glue" code to make it work with oj-module element. CoreRouter provides a better solution for application routing needs, and works seamlessly with oj-module.

Removal of maf/ subdirectory config files

The obsolete requireJS config files in the maf/ subdirectory of the JET distribution were removed.

Library Changes

Updated versions

dnd-polyfill has been updated to 1.0.2

es6-promise has been updated to 4.2.8

jquery has been updated to 3.5.1. Please see the jQuery release notes for important information about what this may mean for your application. One significant change is that jQuery is now sensitive to unclosed tags. It is recommended that a linting tool such as htmllint-cli be used to do a static analysis of your code. You can search the returned report for "unclosed element" or "tag is not closed" to find the appropriate lines.

knockout has been updated 3.5.1

New versions

ChaiJS 4.2.0 library is now distributed with JET v9.0.0. It is made available for test automation, and is not used by JET components directly.

Mininum version of Typescript

The minimum version of Typescript required to use JET in Typescript applications is now 3.8.3.

Tooling Changes

ojet-cli

There are several breaking changes for all existing ojet applications written in typescript. Please run ojet add typescript before building or serving your project after migrating to 9.0.0. If you are not using ojet-cli, the three main things to be aware of are: a local installation of typescript is now required (npm install --save-dev typescript@3.8.3), your tsconfig.json now needs to have a typeRoots compiler option that is set to ["./node_modules/@oracle/oraclejet/dist/types", "./node_modules/@types"] and your tsconfig.json's include option should no longer reference ./node_modules/@oracle/oraclejet/dist/types/requirejs-plugins.d.ts. The rest of the release notes can be found in the ojet-cli GitHub repository.

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
ojet N/A Certain Typescript applications scaffolded with ojet prior to v8.1.0 will throw a Typescript compilation error during the build process after upgrading to v8.1.0 or later. The error is related to Typescript encountering duplicate type definitions of the RequireJs plugins used by JET (css, text, ojL10n). This is as a result of the requirejs-plugins.d.ts file added in v8.1.0 that centralizes the RequireJs plugin type definitions.
  1. Add "./node_modules/@oracle/oraclejet/dist/types/requirejs-plugins.d.ts" to the "include" array of the application's tsconfig.json
  2. Delete ALL type definitions for the RequireJs plugins used by JET (css, text and ojL10n) within the application. The definitions will primarily be found in the index.d.ts file added to web components by ojet. If the generated index.d.ts file hasn't been modified since creation, it can safely be deleted.
Chrome v83 with oj-gantt Chromium Issue 1091568 On Chrome Version 83.0.4103.97 (Official Build) (64-bit), any attempts at style or dimension changes to tasks after initial render of the oj-gantt will not visually reflect. For example, task colors do not update if one tries to set a new color via svg-style, and task dimensions do not visually update upon zoom interactions. Remove SVG filters from the tasks. The task colors will be a slightly darker shade than before, but task update functionality will be restored. This can be done by setting the "filter" style property to "none" through the svg-style and svg-class-name attributes, e.g. by setting task-defaults.svg-style='{"filter":"none"}'