Oracle JET

https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/
Admin
Oracle JET is a toolkit for frontend developers to build apps and web components, offering a choice...
Tokens:8,518,802
Snippets:49,339
Trust Score:9.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Oracle JET CLI Globally

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Provides the command to install the Oracle JET command-line interface globally using npm. Includes verification steps and troubleshooting for common installation issues.

```shell
[sudo] npm install -g @oracle/ojet-cli

# Verify installation
ojet help

# Verify version
ojet --version

# Update npm if outdated
[sudo] npm install -g npm
```

--------------------------------

### Oracle JET CLI Commands with Yarn Installer

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Illustrates how to specify Yarn as the package installer for various Oracle JET CLI commands when not configured globally.

```shell
ojet create --installer=yarn
ojet build --installer=yarn
ojet serve --installer=yarn
ojet strip --installer=yarn
```

--------------------------------

### Create and Serve Oracle JET Apps with npx

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Demonstrates using npx to execute specific versions of the Oracle JET CLI for creating and serving applications. This method avoids global installations and allows easy switching between CLI versions.

```shell
// Create and serve an Oracle JET 15.0.0 app
$ npx @oracle/ojet-cli@15.0.0 create myJET15app --template=basic --vdom
$ cd myJET15app
$ npx @oracle/ojet-cli@15.0.0 serve
```

```shell
// Create and serve an Oracle JET 18.1.0 app
$ npx @oracle/ojet-cli@18.1.0 create myJETapp --template=basic --vdom
$ cd myJETapp
$ npx @oracle/ojet-cli@18.1.0 serve
```

--------------------------------

### List Globally Installed NPM Packages

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Command to list all globally installed npm packages, useful for checking if the Oracle JET CLI or other development tools are already present on the system.

```shell
$ npm list --depth=0 -g
C:\Users\JDOE\AppData\Roaming\npm
+-- json-server@0.16.3
+-- node-gyp@9.0.0
+-- typescript@4.2.3
`-- yarn@1.22.18
```

--------------------------------

### Get Capability Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FlattenedTreeDataProviderView

Illustrates checking for specific DataProvider capabilities, such as 'fetchByKeys', and acting based on the returned capability information.

```javascript
let capabilityInfo = dataprovider.getCapability('fetchByKeys');
if (capabilityInfo.implementation == 'iteration') {
  // the DataProvider supports iteration for fetchByKeys
  ...
```

--------------------------------

### Create Oracle JET Virtual DOM App

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Command to create a new Oracle JET application using the virtual DOM architecture. This command requires the Oracle JET tooling to be installed beforehand.

```shell
ojet create your-First-JET-VDOM-app --template=basic --vdom
```

--------------------------------

### Create Oracle JET Pack and Add Components

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Commands to create a JET Pack for grouping components and then adding multiple components (both function and class-based) to that pack.

```shell
ojet create pack yourJETPack
ojet create component oj-class-component-1 --pack=yourJETPack
ojet create component oj-function-component --vcomponent=function --pack=yourJETPack
ojet create component oj-class-component-2 --vcomponent=class --pack=yourJETPack
```

--------------------------------

### Oracle JET CLI Commands for Testing Setup

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/test-and-debug-oracle-jet-apps

This section covers essential Oracle JET CLI commands used for creating an application, adding a component, serving the app, and enabling the testing framework.

```APIDOC
Command: npx @oracle/ojet-cli create <appName> --template=basic --vdom
  Description: Creates a new Oracle JET application using the basic template with VDOM support.
  Parameters:
    appName: The name of the application to create.
    --template: Specifies the application template (e.g., 'basic').
    --vdom: Enables Virtual DOM support.

Command: cd <appName>
  Description: Navigates into the root directory of the created application.

Command: npx ojet create component <componentName>
  Description: Creates a new Oracle JET component within the application.
  Parameters:
    componentName: The name of the component to create.

Command: npx ojet serve
  Description: Serves the Oracle JET application, building it and making it accessible in a browser.

Command: npx ojet add testing
  Description: Adds testing capabilities to an Oracle JET application. This command configures the testing environment, installs dependencies (like Jest and Preact Testing Library), and sets up necessary configuration files and directory structures for testing.
```

--------------------------------

### ojet serve Command Options

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/understand-web-application-workflow

Describes the various command-line options available for the `ojet serve` command, including port configuration, live reload, build process, theming, and server URL.

```APIDOC
ojet serve Command Options:

  server-port:
    - Description: Server port number.
    - Default: 8000

  livereload-port:
    - Description: Live reload port number.
    - Default: 35729

  watch-files:
    - Description: Enable the watch files feature. Defaults to true. Disabling also disables live reload. Configure polling interval via `watchInterval` in `oraclejetconfig.json` (default 1000ms).
    - Usage: `--watch-files=true` or `--watch-files=false` or `--no-watch-files`

  livereload:
    - Description: Enable the live reload feature. Defaults to true. Depends on `watch-files`.
    - Usage: `--livereload=true` or `--livereload=false` or `--no-livereload`

  build:
    - Description: Build the app before serving. Defaults to true. Suppress build with `--build=false` or `--no-build`.
    - Usage: `--build=true` or `--build=false` or `--no-build`

  theme:
    - Description: Theme to use for the app.
    - Default: redwood

  themes:
    - Description: Themes to use, separated by commas. The first element is the default if `--theme` is not specified.
    - Usage: `--themes=theme1,theme2`

  server-only:
    - Description: Serves the app without launching a browser. Useful for cloud environments.
    - Usage: `--server-only`

  server-url:
    - Description: Specify the server URL to serve from.
    - Default: localhost
    - Usage: `--server-url=https://www.example.com/jet`
```

--------------------------------

### Get Help for ojet serve Command

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/package-and-deploy-oracle-jet-apps

Retrieve a complete list of options for the 'ojet serve' command by typing this into the terminal.

```bash
ojet help serve
```

--------------------------------

### Configure npm Proxy Settings

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

These commands configure npm to use proxy servers for network connections. This is necessary for users whose network requires a proxy server to access the internet, ensuring successful npm installations and operations.

```shell
npm config set proxy http-proxy-server-URL:proxy-port
npm config set https-proxy https-proxy-server-URL:proxy-port
```

```shell
npm config set proxy http://my.proxyserver.com:80
npm config set https-proxy http://my.proxyserver.com:80
```

--------------------------------

### Generated API Documentation Directory Structure

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/work-oracle-jet-web-components

This illustrates the file structure created in the 'docs' directory after building a standalone VComponent, containing HTML files, JSON metadata, and supporting scripts and styles for the API reference.

```shell
appRootDir/web/components/standalone-vcomp-func/1.0.0/docs

|   index.html
|   jsDocMd.json
|   standalone-vcomp-func.html
|   standalone.StandaloneVcompFunc.html
|
+---scripts
|   |   deprecated.js
|   |
|   \---prettify
|           Apache-License-2.0.txt
|           lang-css.js
|           prettify.js
|
\---styles
    |   jsdoc-default.css
    |   prettify-jsdoc.css
    |   prettify-tomorrow.css
    |
    \---images
            bookmark.png
            linesarrowup.png
            linesarrowup_blue.png
            linesarrowup_hov.png
            linesarrowup_white.png
            oracle_logo_sm.png
```

--------------------------------

### Get Property Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojComboboxMany

Example of retrieving a property or subproperty value from a component using dot notation for nested properties.

```javascript
let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');
```

--------------------------------

### Javascript Import Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByKeysMixin

Demonstrates the correct way to import and reference the FetchByKeysMixin within a JavaScript application using the define AMD pattern.

```javascript
define(['ojs/ojdataprovider'], function(dataprovider) {
 // Application should call API on dataprovider.FetchByKeysMixin
})
```

--------------------------------

### ExtendedCompoundFilterDef OR Filter Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/ExtendedCompoundFilterDef

An example of an ExtendedCompoundFilterDef that combines two filter definitions using the '$or' operator. It filters by 'ProductName' containing 'Tablet' case-insensitively and 'ProductId' starting with 'TAB'.

```json
{
  "op": "$or",
  "criteria": [
    {
      "op": "$co",
      "value": {"ProductName": "Tablet"},
      "collationOptions": {"sensitivity": "accent"}
    },
    {
      "op": "$sw",
      "value": {"ProductId": "TAB"}
    }
  ]
}
```

--------------------------------

### Resource Component Folder Structure Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/work-oracle-jet-web-components

Illustrates the typical directory structure created for a resource component after using the `ojet create component` command, including the `component.json` file.

```APIDOC
/root folder
  /src
    /components
      /my-resource-pack
        /my-resource-comp
          component.json
```

--------------------------------

### getStart API

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FlattenedTreeCellSet

Gets the start index of the result set for a specified axis ('row' or 'column').

```APIDOC
getStart(axis) : {number}
  Gets the start index of the result set for the specified axis.

  Parameters:
    axis (string): The axis in which to inquire the actual count of the result set. Valid values are "row" and "column".

  Returns:
    number: The start of the index of the result set for the specified axis.
```

--------------------------------

### Create VComponent using ojet CLI

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/creating-vcomponent-based-web-components

Demonstrates the Oracle JET command-line interface (CLI) commands for creating new VComponent-based web components. It shows the basic command and options for class-based components.

```shell
ojet create component hello-world

# For non-virtual DOM apps:

ojet create component hello-world --vcomponent

# For class-based VComponents:

ojet create component hello-world --vcomponent=class
```

--------------------------------

### JET Progress Button Usage Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj-c.ProgressButton

Illustrates the basic structure and common usage patterns for the oj-c-progress-button custom element. This includes examples of a simple button and a button configured with a start icon and loading state.

```html
<oj-c-progress-button id="myButton" label="My Button">
</oj-c-progress-button>
<oj-c-progress-button label="start icon" is-loading="[[loading]]" on-oj-action="[[handler]]" >
  <span slot='startIcon' class='myIconClass'></span>
</oj-c-progress-button>
```

--------------------------------

### Build and Serve Oracle JET App with Webpack

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/understand-web-application-workflow

Commands to build and serve an Oracle JET application that is configured to use Webpack. Note that `ojet serve --release` is not supported; use `ojet build --release` and a static server instead.

```bash
ojet build
ojet serve
```

--------------------------------

### oj-progress Start Label Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojProgress

HTML structure demonstrating the use of the .oj-progress-bar-start-label class for displaying text below the progress bar.

```html
<div class='oj-web-applayout-page'>
  <header class='oj-web-applayout-header'>
  <
  <oj-progress class='oj-progress-bar-embedded' value='{{loadingValue}}'>
    <div class='oj-progress-bar-start-label'>0%
    </div>
    <div class='oj-progress-bar-end-label'>100%
    </div>
  </oj-progress>
</div>
```

--------------------------------

### oj-time-axis Component Usage

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojTimeAxis

Example of how to use the oj-time-axis custom element in an HTML template, specifying scale, start, and end dates.

```html
<oj-time-axis
  scale="months"
  start="2017-01-01T05:00:00.000Z"
  end="2017-12-31T05:00:00.000Z"
  style="height:38px"
  aria-hidden="true">
</oj-time-axis>
```

--------------------------------

### Scaffold Oracle JET Web App with ojet CLI

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/understand-web-application-workflow

This section details how to use the Oracle JET command-line interface (CLI) to scaffold a new web application. It covers the `ojet create` command, its common arguments like `--template` and `--vdom`, and how to use global tooling. The process involves creating a pre-configured app structure ready for development.

```APIDOC
ojet create [directory]
           [--template={template-name:[basic]|template-url|template-file}]
           [--vdom]
           [--use-global-tooling]
           [--help]

Description:
  Creates a new Oracle JET web application using a specified starter template.

Parameters:
  directory: Optional. The name of the directory where the new app will be created.
  --template: Optional. Specifies the starter template to use. Can be a template name (e.g., 'basic'), a URL to a template, or a path to a template file. Defaults to 'basic'.
  --vdom: Optional. A flag to enable Virtual DOM support for the application.
  --use-global-tooling: Optional. Use the globally installed @oracle/oraclejet-tooling instead of installing it locally.
  --help: Displays help information for the ojet create command.

Examples:
  # Create a web app in 'my-First-JET-VDOM-app' using the 'basic' template with VDOM enabled:
  ojet create my-First-JET-VDOM-app --template=basic --vdom

  # Scaffold a web app using globally installed tooling:
  ojet create my-web-app --use-global-tooling --vdom

Success Output:
  Oracle JET: Your app is ready! Change to your new app directory [directory-name] and try ojet build and serve...

Related Commands:
  ojet help: Get additional help with the Oracle JET CLI.
```

--------------------------------

### Node Drag Start Callback

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojDiagram

An optional callback function executed when a node drag operation starts. It receives the 'dragstart' event and context information, including an array of dragged node data contexts. This function allows custom data and drag image setup.

```APIDOC
dnd.drag.nodes.drag-start :((event: DragEvent, context: {nodes: [ojDiagram.DndNodeContext]<K1,D1>[]}) => void)
  - An optional callback function that receives the "dragstart" event and context information as arguments.
    The context information is as follows:

    * nodes {Array.(object)}: An array of data contexts of the dragged data nodes.

    This function can set its own data and drag image as needed. When this function is called, event.dataTransfer is already populated with the default data and drag image.

    Default Value:
    * `null`
```

--------------------------------

### JET Button Usage Examples

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj-c.Button

Demonstrates the basic usage of the oj-c-button component, including setting labels and using slots for start and end icons.

```html
<oj-c-button id="myButton" label="My Button">
</oj-c-button>
<oj-c-button label="start icon">
  <span slot='startIcon' class='myIconClass'></span>
</oj-c-button>
 <oj-c-button label="end icon">
  <span slot='endIcon' class='myIconClass'></span>
</oj-c-button>
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/ResponsiveSpacing

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### JET Timeline Component Usage

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojTimeline

Example of how to use the oj-timeline component in an HTML template. It demonstrates setting start and end dates, axis scales, and data provider.

```html
<oj-timeline
  start='[[oj.IntlConverterUtils.dateToLocalIso(new Date("Jan 1, 2016"))]]'
  end='[[oj.IntlConverterUtils.dateToLocalIso(new Date("Dec 31, 2016"))]]'
  major-axis='{"scale": "months"}'
  minor-axis='{"scale": "weeks"}'
  data='[[dataProvider]]'>
</oj-timeline>
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/MultipleForeignKeys

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### translations.label-baseline-start Property

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojGantt

Defines the default tooltip label for baseline start time information. This property is part of the global translations configuration. See the 'translations' attribute for usage examples.

```APIDOC
translations.labelBaselineStart :string
  Description: Used for the default tooltip label for baseline start time information.
  Default Value: "Baseline Start"
  Since: 4.0.0
  Property Name: translations.labelBaselineStart
```

--------------------------------

### UrlParamAdapter API Documentation

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/UrlParamAdapter

Provides comprehensive API details for the UrlParamAdapter class, including its constructor, generic parameters, and methods. It outlines how to import the module and the purpose of the `pathAdapter` parameter.

```APIDOC
Class: UrlParamAdapter

Oracle® JavaScript Extension Toolkit (JET)
18.1.0
G25382-01

Since: 8.0.0
Module: ojurlparamadapter

Description:
Class to synchronize CoreRouter state with the browser URL using a query parameter. This URL adapter uses a query parameter to synchronize router state with the URL (using `ojr` parameter). All other query parameters are unaffected.

Alternatives to UrlParamAdapter are [UrlPathAdapter](UrlPathAdapter.html) and [UrlPathParamAdapter](UrlPathParamAdapter.html).

Query Parameters:
UrlParamAdapter uses only one query parameter - `ojr`, to maintain the router state. When manipulating query parameters, ensure this is preserved.

Usage:

##### Signature: class UrlParamAdapter<P extends {[key: string]: [any](CustomElementOverview.html#ce-attrs-any-section)} = {[key: string]: [any](CustomElementOverview.html#ce-attrs-any-section)}>

##### Generic Parameters
:   | Parameter | Description |
    | --- | --- |
    | P | Parameters object for the router state |

##### Typescript Import Format
:   ```
    //This class is exported directly as module. To import it
    import UrlParamAdapter= require("ojs/ojurlparamadapter");
    ```

For additional information visit:
* [Using JET with TypeScript](TypescriptOverview.html)
* [JET Module Loading](ModuleLoadingOverview.html)

### Constructor #### new UrlParamAdapter(pathAdapter)
:   ##### Parameters:

    | Name | Type | Argument | Description |
    | --- | --- | --- | --- |
    | `pathAdapter` | CoreRouter.UrlAdapter | <optional> | An optional path adapter to which this adapter will delegate for translating routes to paths (getUrlForRoutes) and vice-versa (getRoutesForUrl). If not defined, [UrlPathAdapter](UrlPathAdapter.html) is used. |

### Methods
* [getRoutesForUrl](#getRoutesForUrl)
* [getUrlForRoutes](#getUrlForRoutes)
```

--------------------------------

### Example Usage of Responsive Padding

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/AppShellWebPadding

Illustrates the application of responsive padding classes to div elements, demonstrating padding on the start and vertical edges for different screen size ranges.

```html
<div class="oj-web-applayout-content-nopad"> 
  <div class="oj-md-web-padding-start oj-sm-web-padding-vertical" style="border-right: 1px solid gray"></div> 
  <div class="oj-md-web-padding-end oj-sm-web-padding-vertical"> 
  </div>
</div>
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/ResponsivePrefixes

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### oj-gantt Task Usage Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojGanttTask

Demonstrates how to use the oj-gantt-task element within a template slot for the oj-gantt component to define task properties like ID, start, and end dates.

```html
<oj-gantt task-data="[[taskDataProvider]]">
  <template slot="taskTemplate">
    <oj-gantt-task
      task-id="[[$current.data.ID]]"
      start="[[$current.data.begin]]"
      end="[[$current.data.finish]]">
    </oj-gantt-task>
  </template>
</oj-gantt>
```

--------------------------------

### Create New JET Typescript Project

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/TypescriptOverview

Command to create a new JET project from a starter template with Typescript enabled.

```bash
ojet create AppName --template=(blank|basic|navbar|navdrawer) --typescript
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/AppShellWebPadding

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### JET Timeline Item Usage Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojTimelineItem

Demonstrates how to use the oj-timeline-item element as a child of an oj-timeline component's itemTemplate slot. It shows how to bind data properties like series-id, start, and end.

```html
<oj-timeline data="[[dataProvider]]">
  <template slot="itemTemplate">
    <oj-timeline-item
      series-id="[[$current.data.series]]"
      start="[[$current.data.start]]"
      end="[[$current.data.end]]">
    </oj-timeline-item>
  </template>
</oj-timeline>
```

--------------------------------

### Oracle JET UI Components: Masonry Layout

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchFirstCapability

API documentation for the oj-masonry-layout component, used for creating responsive grid layouts.

```APIDOC
ojs/ojmasonrylayout
  <oj-masonry-layout>
    - Component for creating a masonry grid layout.
  oj.ojMasonryLayout
    - JavaScript API for oj-masonry-layout.
```

--------------------------------

### Pagination Information Methods

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/PagingTableDataSource

Methods to retrieve current pagination state and counts. Includes getting the start and end item indices for the current page, the current page number, and the total number of pages.

```APIDOC
getEndItemIndex : {number}
  Get the current page end index. Returns -1 if there are no rows in the current page.

  Returns:
    The current page end index.

getPage : {number}
  Get the current page.

  Returns:
    The current page.

getPageCount : {number}
  Get the page count.

  Returns:
    The total number of pages.

getStartItemIndex : {number}
  Get the current page start index.

  Returns:
    The current page start index.
```

--------------------------------

### Fetch First Data Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FlattenedTreeDataProviderView

Demonstrates how to use the fetchFirst method to obtain an AsyncIterable and fetch data blocks sequentially using the next() method.

```javascript
let asyncIterator = dataprovider.fetchFirst(options)[Symbol.asyncIterator]();
let result = await asyncIterator.next();
let value = result.value;
let data = value.data;
let keys = value.metadata.map(function(val) {
  return val.key;
});
// true or false for done
let done = result.done;
```

--------------------------------

### getLevelCount: Get Result Set Level Count

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/CollectionHeaderSet

Retrieves the actual number of levels for a result set on a specified axis. Levels are counted starting from the outermost header at index 0 and incrementing inwards.

```APIDOC
getLevelCount() : number
  Gets the actual number of levels of the result set for the specified axis. The levels
  are the counted from the outermost header indexed at 0, and moving inwards toward the
  databody would increment the level by 1.

  Returns:
    the number of levels of the result set
  Type:
    number
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchFirstCapability

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### JET Diagram Link Usage Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojDiagramLink

Demonstrates the usage of the oj-diagram-link element within an oj-diagram's linkTemplate slot. It shows how to bind link data and configure link properties like start and end connectors.

```html
<oj-diagram link-data='[[linkDataProvider]]' node-data='[[nodeDataProvider]]'>
 <template slot='linkTemplate' data-oj-as='link'>
   <oj-diagram-link  startConnectorType='[[link.data.start]]' endConnectorType='[[link.data.end]]'>
   </oj-diagram-link>
 </template>
</oj-diagram>
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByKeysMixin

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### JET Component Property: two-digit-year-start

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojInputDate

Defines the starting point of a 100-year period for interpreting two-digit years. Years are placed in the range from `two-digit-year-start` to `two-digit-year-start + 100`. The default value is 1950. For example, if `two-digit-year-start` is 1950, '10' is parsed as 2010.

```APIDOC
two-digit-year-start : number
  Description: Defines the starting point of a 100-year period for interpreting two digit years. During parsing, two digit years will be placed in the range from two-digit-year-start to two-digit-year-start + 100 years.
  Example: if two-digit-year-start is 1950, 10 is parsed as 2010
  Example: if two-digit-year-start is 1900, 10 is parsed as 1910
  Example: if two-digit-year-start is 1, 10 is parsed as 10
  Default Value: 1950
  Property Name: twoDigitYearStart
  Property change event: twoDigitYearStartChanged
  Property change listener attribute: on-two-digit-year-start-changed
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByOffsetGridParameters

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### JET Thematic Map Link Element Usage Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojThematicMapLink

Demonstrates the usage of the oj-thematic-map-link custom element within an oj-thematic-map component. It shows how to pass link data and define the link's start and end locations using a template slot.

```html
<oj-thematic-map link-data='[[linkDataProvider]]' map-provider='[[mapProvider]]'>
 <template slot='linkTemplate'>
   <oj-thematic-map-link  start-location='[[$current.data.start]]' end-location='[[$current.data.end]]'>
   </oj-thematic-map-link>
 </template>
</oj-thematic-map>
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/ResponsiveGrid

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### Create Oracle JET VComponent (Function-based)

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Command to create a new Oracle JET web component using the virtual DOM architecture. By default, this command creates a function-based VComponent.

```shell
ojet create component oj-hello-world --vcomponent
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByKeysCapability

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByOffsetMixin

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### Configure Yarn as Oracle JET CLI Package Manager

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Shows how to configure the Oracle JET CLI to use Yarn as the package manager instead of npm. This can be done per-command or by setting a default in the oraclejetconfig.json file.

```json
{
  ...
  "generatorVersion": "18.1.0",
  "installer": "yarn"
}
```

--------------------------------

### Create Oracle JET VComponent (Class-based)

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/vdom/get-started-virtual-dom-architecture-oracle-jet

Command to create a new Oracle JET web component using the virtual DOM architecture, specifically as a class-based component. The `--vcomponent=class` option enforces class-based creation.

```shell
ojet create component oj-hello-world --vcomponent=class
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/ResponsiveSizing

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### Get Next Date Interval

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/DvtTimeComponentScale

Calculates the end date of a date interval based on a defined scale. Given a start date, it returns the date representing the end of that interval. The input date string must follow the specified datetime format. The returned date also adheres to this format.

```APIDOC
getNextDate(date)
  Parameters:
    date (string): The start date of an interval. Must follow the specified datetime format.
  Returns:
    string: The date representing the end of the interval, formatted according to the specified datetime format.
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByKeysParameters

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByOffsetCapability

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### Get Previous Date Interval

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/DvtTimeComponentScale

Determines the start date of the interval to which a given date belongs. For any input date, this function returns the date representing the beginning of the interval within the defined scale. Input dates must conform to the specified datetime format, and the output date will also follow this format.

```APIDOC
getPreviousDate(date)
  Parameters:
    date (string): The query date. Must follow the specified datetime format.
  Returns:
    string: The date representing the start of the interval that the query date belongs to, formatted according to the specified datetime format.
```

--------------------------------

### Oracle JET Module and Component Loading

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/FetchByOffsetParameters

API documentation for Oracle JET's module loading and component management, including module binding, lifecycle listeners, and animations.

```APIDOC
ojs/ojmodule
  ConventionMethods
    - Defines convention-based methods for modules.
  LifecycleListener
    - Interface for module lifecycle events.
  ModuleAnimation
    - Defines module animation configurations.
  ModuleBinding
    - Manages the binding of modules to DOM elements.
  ojModule
    - Core module loading and management API.

  ojs/ojmodule-element
    <oj-module>
      - Element for loading and displaying modules.
    ModuleElementAnimation
      - Manages animations for module elements.
    ModuleViewModel
      - Base class for module view models.
    oj.ojModule
      - JavaScript API for the oj-module element.

  ojs/ojmodule-element-utils
    ModuleElementUtils
      - Utility methods for module elements.

  ojs/ojmoduleanimations
    ModuleAnimations
      - Provides predefined module animations.
```

--------------------------------

### Gantt Task Property: start

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/18.1/reference-api/oj.ojGanttTask

The start time of the task. This is optional for milestones if start and end dates are the same. Either start or end must be defined for the task to render. Date formats must adhere to the specified Date and Time Formats documentation.

```APIDOC
start :string
  The start time of this task. Optional if task is a single date event like Milestone.
  Either start or end has to be defined in order for the task to properly render.
  See [Date and Time Formats](oj.ojGantt.html#formats-section) for more details on the required string formats.

  Default Value:
    * `""`
```
Tokens:
Raw