Oracle JET

https://docs.oracle.com/en/middleware/developer-tools/jet/19/
Admin
Oracle JET is a toolkit for frontend developers to build accessible apps and web components with...
Tokens:3,446,283
Snippets:36,219
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Router Configuration and Initialization

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.Router.html

This example demonstrates how to define states for a router, configure it, and then synchronize it with the application. It shows the basic setup for using oj.Router.

```APIDOC
## Router Configuration and Initialization

### Description
This example demonstrates how to define states for a router, configure it, and then synchronize it with the application. It shows the basic setup for using oj.Router.

### Method
```javascript
var router = oj.Router.rootInstance;
// Add three states to the router with id 'home', 'book' and 'tables
router.configure({
   'home':   { label: 'Home',   value: 'homeContent', isDefault: true },
   'book':   { label: 'Book',   value: 'bookContent' },
   'tables': { label: 'Tables', value: 'tablesContent' }
});

var viewModel = {
   router: router
};

oj.Router.sync().then(
   function() {
      ko.applyBindings(viewModel);
   },
   function(error) {
      Logger.error('Error when starting router: ' + error.message);
   });
```
```

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

### getStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjGantt.html

Gets the value of the `start` property, which is the start time of the Gantt chart. A valid value is required for the Gantt to render properly.

```APIDOC
## getStart

### Description
Gets the value of `start` property. The start time of the Gantt. A valid value is required for the Gantt to render properly. See the Help documentation for more information.

### Method
GET

### Endpoint
/getStart

### Returns
Promise<string>
```

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

### Basic Usage of oj-drawer-layout

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojDrawerLayout.html

This example demonstrates the basic structure of an oj-drawer-layout with start and end drawers, and main content.

```APIDOC
## JET Drawer Layout

Description: A drawer layout can be used for managing content with one or more drawers. A drawer is a panel that can slide from the layout edges into it. Depending on the drawer layout size and configuration, the main content can be re-arranged (reflow mode) or overlaid when the drawer is opened.

```html
<oj-drawer-layout end-opened="true">

   <div slot="start">Start drawer content </div>
   <div slot="end">End drawer content </div>

   Main section content

</oj-drawer-layout>
```

JET DrawerLayout and DrawerPopup look similar, but are intended to be used for different purposes.
Use DrawerLayout when you need to switch from 'reflow' display mode (big screens) to 'overlay' (small screens).
Use DrawerPopup when you need to always show 'overlay' drawers.
```

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

### getStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/CollectionNodeSet.html

Gets the starting index of the result set.

```APIDOC
## getStart()

### Description
Gets the start index of the result set.

### Returns
The start index of the result set.

Type: number
```

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

### Responsive Grid Layout Example

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

Demonstrates a basic responsive grid layout using oj-md-odd-cols-4 and oj-flex classes. This setup creates a layout that adapts to different screen sizes.

```html
<div class="oj-md-odd-cols-4">
   <div class="oj-flex">
     <div class="oj-flex-item">col 1</div>
     <div class="oj-flex-item">col 2</div>
   </div>
</div>
```

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

### getStartDisplay

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-core-pack-test-adapters/classes/DrawerLayoutWebElement.html

Gets the value of the `startDisplay` property, which specifies the display mode of the Start drawer.

```APIDOC
## getStartDisplay

### Description
Gets the value of `startDisplay` property. Specifies display mode of the Start drawer.

### Method
getStartDisplay(): Promise<string>

### Returns
Promise<string> - The value of `startDisplay` property.
```

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

### Static HTML Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojTabBar.html

Example demonstrating how to use static HTML content to define the items in the ojTabBar.

```APIDOC
## Static HTML Content Example

### Description
This example shows how to define the content of the ojTabBar using a simple HTML list.

### Markup
```html
<oj-tab-bar>
 <ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
 </ul>
</oj-tab-bar>
```
```

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

### ModuleRouterAdapter Usage Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ModuleRouterAdapter.html

Example demonstrating how to define an animation callback and create an instance of ModuleRouterAdapter.

```javascript
// define animation callback used to transition between views
var animationCallback = function (context) {
   return context.previousViewModel ? 'pushEnd' : 'fade';
};

// create a new instance of ModuleRouterAdapter
var adapter = new ModuleRouterAdapter(
   baseRouter,
   {
     viewPath: 'views/baserouter/',
     viewModelPath: 'viewModels/baserouter/',
     animationCallback: animationCallback
   }
);

```

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

### start

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/index._internal_.DriverService-1.html

Starts the WebDriver server if it is not already running.

```APIDOC
## start
  * start(opt_timeoutMs?): Promise<string>
  * Starts the server if it is not already running.
#### Parameters
    * ##### `Optional` opt_timeoutMs: number
How long to wait, in milliseconds, for the server to start accepting requests. Defaults to 30 seconds.
#### Returns Promise<string>
A promise that will resolve to the server's base URL when it has started accepting requests. If the timeout expires before the server has started, the promise will be rejected.
```

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

### Create a Custom Theme Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/use-css-themes-oracle-jet-apps.html

Example of creating a custom theme named 'myTheme' using 'stable' as the base theme.

```bash
ojet create theme myTheme --basetheme=stable
```

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

### getStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjTimeline.html

Gets the value of the `start` property, representing the start time of the timeline.

```APIDOC
## getStart

### Description
Gets the value of the `start` property. The start time of the timeline. See the Help documentation for more information.

### Method
`getStart(): Promise<string>`

### Returns
`Promise<string>` - The value of `start` property.
```

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

### Set Key to Start Fetching From

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/ListDataProviderView.html

Example of setting the key from which to start fetching data.

```javascript
dataprovider.from = '1234';
```

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

### Icon Integration Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojTabBar.html

Example showing how to include custom icons within the ojTabBar list items.

```APIDOC
## Icon Integration Example

### Description
This example illustrates how to add custom icons to the list items within the ojTabBar.

### Markup
```html
<oj-tab-bar>
  <ul>
    <li id="foo"><a href="#"><span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"></span>Foo</a></li>
  </ul>
 </oj-tab-bar>
```
```

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

### Basic Usage Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojConveyorBelt.html

A simple example demonstrating how to use the ojConveyorBelt element with oj-button children.

```APIDOC
## Example

```html
<oj-conveyor-belt>
  <oj-button>Alpha</oj-button>
  <oj-button>Beta</oj-button>
  <oj-button>Gamma</oj-button>
  <oj-button>Delta</oj-button>
  <oj-button>Epsilon</oj-button>
  <oj-button>Zeta</oj-button>
</oj-conveyor-belt>
```
```

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

### getStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjTimeAxis.html

Gets the value of the `start` property, representing the start time of the time axis.

```APIDOC
## getStart

### Description
Gets the value of `start` property. The start time of the time axis. See the Help documentation for more information.

### Method
GET

### Endpoint
/getStart

### Returns
Promise<string>
```

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

### HTML Example for Help Instruction Display

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

Illustrates how to configure the display of help instruction text. The default value is an array containing 'notewindow'.

```html
<oj-combobox-many :display-options.prop="{helpInstruction: ['notewindow']}"></oj-combobox-many>
```

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

### oj-time-axis Usage Example

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

This example demonstrates how to use the oj-time-axis component with basic configuration for scale, start, and end dates.

```APIDOC
## Usage

A JET Time Axis is a themable, WAI-ARIA compliant element that displays a range of dates based on specified start and end date and time scale. The Time Axis is intended to be placed in the header of JET DataGrid or Table.

```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>
```
```

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

### Create Sample Pack and Component

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/work-oracle-jet-web-components.html

Example commands to create a pack named 'oj-sample' and add a custom component named 'metric' to it.

```bash
ojet create pack oj-sample
ojet create component metric --pack=oj-sample
```

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

### JET Menu Button Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojMenuButton.html

A basic example of how to implement an oj-menu-button with an oj-menu.

```APIDOC
## JET Menu Button

### Description
This is an example of how to use the oj-menu-button component to create a button that displays a menu.

### Markup
```html
<oj-menu-button id="menuButton">
  <oj-menu id="menu" slot="menu" style="display:none">
      <oj-option>Item 1</oj-option>
      <oj-option>Item 2</oj-option>
      <oj-option>Item 3</oj-option>
  </oj-menu>
</oj-menu-button>
```

### Attributes
- **chroming** (string): Specifies the chroming style of the button.
- **disabled** (boolean): If true, the button is disabled.
- **display** (string): Specifies the display mode of the button (e.g., 'all', 'icons', 'label').
- **label** (string): The text label for the button.
- **translations** (object): An object containing translations for component strings.

### Events
- **ojAction**: Triggered when the button is activated.

### Methods
- **getProperty(propertyHash)**: Retrieves the value of a component property.
- **refresh()**: Refreshes the component's state.
- **setProperties(propertyHash)**: Sets multiple component properties.
- **setProperty(property, value)**: Sets a single component property.
```

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

### getStartId

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.DvtDiagramLayoutContextLink.html

Gets the ID of the node where the link starts.

```APIDOC
## getStartId

### Description
Get the id of the start node of this link.

### Returns
Type: `K1`
```

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

### help.instruction

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojColorSpectrum.html

Provides user guidance text. Supports HTML formatting for rich text display. Defaults to an empty string.

```APIDOC
## Property help.instruction

### Description
A type of user assistance text. User assistance text is used to provide guidance to help the user understand what data to enter or select. In the Redwood theme for clarity only one user assistance text shows to the user. The precedence rules are: * help.instruction shows; * if no help.instruction, then validator hint shows; * if no help.instruction or validator hint, then help-hints.definition shows; * if no help.instruction, validator hint, or help-hints.definition, then converter hint shows. * help-hints.source always shows along side the above.

In the Redwood theme, by default all user assistance text shows inline. For input components, it shows when the field takes focus. In other components it shows all the time. See the user-assistance-density property for other ways the user assistance text can render.
How is help.instruction better than the html 'title' attribute? The html 'title' attribute only shows up as a tooltip on mouse over, not on keyboard and not in a mobile device. So the html 'title' would only be for text that is not important enough to show all users, or for text that you show the users in another way as well, like in the label. Also you cannot theme the native browser's title window like you can the JET notewindow, so low vision users may have a hard time seeing the 'title' window. For these reasons, the JET EditableValue components do not use the HTML's 'title' attribute and instead use the help.instruction attribute.
To include formatted text in the help.instruction, format the string using html tags. The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre. For example the help.instruction might look like:
```
<oj-some-element help.instruction="<html>Enter <b>at least</b> 6 characters</html>"></oj-some-element>
```
If you use formatted text, it should be accessible and make sense to the user if formatting wasn't there.

Default Value:
* `""`

Since:
* 4.0.0

##### Names
Item | Name
--|--
Property | `help.instruction`
```

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

### getStartConnectorOffset

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.DvtDiagramLayoutContextLink.html

Gets the offset for the start connector of the link.

```APIDOC
## getStartConnectorOffset

### Description
Get the offset of the start connector. This is the amount of space that the link should leave between its starting point and the node for the connector to be drawn.

### Returns
Type: `number`
```

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

### Example configObj Output from before_build Hook

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/understand-web-application-workflow.html

This is an example of the console output when the 'before_build' hook is triggered, showing the structure and properties of the 'configObj' passed to the hook.

```text
Cleaning staging path.
Running before_build hook {
  buildType: 'dev',
  opts: {
    stagingPath: 'web',
    injectPaths: {
      startTag: '// injector:mainReleasePaths',
. . .

```

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

### Serve the App for Development

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/use-css-themes-oracle-jet-apps.html

Run 'ojet serve' to start a local development server and view your application with the Redwood theme in the browser.

```bash
ojet serve
```

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

### getStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/CubeHeaderSet.html

Gets the start index of the result set.

```APIDOC
## getStart

### Description
Gets the start index of the result set.

### Returns
- the start index of the result set.

Type
     number
```

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

### Create a Working Project for Theming

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/work-oracle-jet-web-components.html

Use the ojet create command with the basic template to set up a project for theme development. This command initializes a new project directory with the specified name.

```bash
ojet create redwood-plus-theme-source --template=basic
```

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

### Set Offset to Start Fetching From

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/ListDataProviderView.html

Example of setting the offset from which to start fetching data. The offset must be greater than or equal to zero.

```javascript
dataprovider.offset = 5;
```

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

### Instantiating and Using AsyncResource

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/interfaces/index._internal_.EventEmitter.EventEmitterReferencingAsyncResource.html

Demonstrates how to instantiate an AsyncResource, which also triggers the 'init' hook. It shows how to optionally provide a triggerAsyncId and manage manual destruction.

```javascript
import { AsyncResource, executionAsyncId } from 'node:async_hooks';  
  
// AsyncResource() is meant to be extended. Instantiating a  
// new AsyncResource() also triggers init. If triggerAsyncId is omitted then  
// async_hook.executionAsyncId() is used.  
const asyncResource = new AsyncResource(  
  type, { triggerAsyncId: executionAsyncId(), requireManualDestroy: false },  
);

```

```javascript
// Run a function in the execution context of the resource. This will  
// * establish the context of the resource  
// * trigger the AsyncHooks before callbacks  
// * call the provided function `fn` with the supplied arguments  
// * trigger the AsyncHooks after callbacks  
// * restore the original execution context  
asyncResource.runInAsyncScope(fn, thisArg, ...args);

```

```javascript
// Call AsyncHooks destroy callbacks.  
asyncResource.emitDestroy();  

// Return the unique ID assigned to the AsyncResource instance.  
asyncResource.asyncId();  

// Return the trigger ID for the AsyncResource instance.  
asyncResource.triggerAsyncId();

```

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

### Display Help for 'ojet create' Command

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/understand-web-application-workflow.html

Run 'ojet create --help' to view detailed usage information and a list of all available options for the 'ojet create' command.

```bash
ojet create --help
```

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

### Get Start Drawer Display Mode

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjDrawerLayout.html

Retrieves the display mode of the Start drawer. Use this to check how the drawer is configured to appear.

```javascript
getStartDisplay(): Promise<string>
```

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

### Create a JET Pack and Add Components

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

Illustrates creating a JET Pack named 'yourJETPack' and adding multiple components to it, including function-based and class-based VComponents.

```bash
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 

```

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

### start

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

Specifies the start time for the Gantt chart. A valid string format is required for proper rendering.

```APIDOC
## Property: start

### Description
The start time of the Gantt. A valid value is required for the Gantt to render properly. Refer to Date and Time Formats for required string formats.

### Default Value
`""`
```

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

### addExtensions Method

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/index._internal_.Options-2.html

Adds extensions to be installed when starting Firefox.

```APIDOC
## addExtensions
  * addExtensions(...paths: string[]): Options

### Description
Add extensions that should be installed when starting Firefox.

### Parameters
* **...paths** (string[]) - The paths to the extension XPI files to install.

### Returns
Options - A self reference.
```

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

### getDepth

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/CubeHeaderSet.html

Gets the depth of an index starting at a particular level.

```APIDOC
## getDepth(index, level)

### Description
Gets the depth of an index starting at a particular level.

### Parameters
#### Path Parameters
- **index** (number) - Required - the index of the header (absolute within the axis)
- **level** (number) - Required - the level of the header

### Returns
- the number of levels of the result set for the specified axis.

Type
     number
```

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

### Oracle JET Grid System Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/designing-responsive-apps.html

Demonstrates the use of Oracle JET's responsive utility classes (oj-sm-*, oj-md-*, oj-lg-*, oj-xl-*) to define column widths across different screen sizes. These classes adapt the layout based on the viewport.

```html
<div class="demo-grid-sizes demo-flex-display">
  <div class="oj-flex oj-flex-items-pad">
    <div class="oj-sm-9 oj-flex-item"></div>
    <div class="oj-sm-3 oj-flex-item"></div>
  </div>
  <div class="oj-flex oj-flex-items-pad">
    <div class="oj-sm-6 oj-md-9 oj-flex-item"></div>
    <div class="oj-sm-6 oj-md-3 oj-flex-item"></div>
  </div>
  <div class="oj-flex oj-flex-items-pad">
    <div class="oj-sm-6 oj-lg-4 oj-flex-item"></div>
    <div class="oj-sm-4 oj-lg-4 oj-flex-item"></div>
    <div class="oj-sm-2 oj-lg-4 oj-flex-item"></div>
  </div>
  <div class="oj-flex oj-flex-items-pad ">
    <div class="oj-sm-8 oj-md-6 oj-lg-4 oj-xl-2 oj-flex-item"></div>
    <div class="oj-sm-2 oj-md-3 oj-lg-4 oj-xl-8 oj-flex-item"></div>
    <div class="oj-sm-2 oj-md-3 oj-lg-4 oj-xl-2 oj-flex-item"></div>
  </div>
</div>
```

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

### getStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/CubeAxisValue.html

Get the starting index of this value within the axis.

```APIDOC
## getStart

### Description
Get the starting index of this value within the axis.

### Returns:
the starting index of this value within the axis.

### Type
number
```

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

### Configuring display options for help instruction

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojInputText.html

Manage the display of help instruction text with display-options.help-instruction. The default value is 'notewindow'.

```html
<oj-input-text display-options.help-instruction='notewindow'></oj-input-text>
```

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

### cells Property Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojNBox.html

Demonstrates how to set and get the 'cells' property of the NBox component, including examples for setting with a Promise and an array of cell objects.

```APIDOC
## Setting and Getting the 'cells' Property

### Example

```javascript
let elem = document.getElementById('nbox') as ojNBox;

// Set cells to a Promise. Assuming that getCells is a method which returns type Promise<Array<oj.ojNBox.Cell>>
elem.cells = getCells();
// or
elem.set('cells', getCells());

// Set cells to an array of ojNBox.Cell
// Note: Direct assignment like elem.cells = [...] might not compile. Use elem.set() for array assignment.
elem.set('cells', [
  {row: '0', column: '0', label: '(0, 0)'},
  {row: '0', column: '1', label: '(0, 1)'}
]);

// Get cells property value
let cells = elem.cells; // This is guaranteed to be of the type Promise<Array<oj.ojNBox.Cell>> | null

// Reset the value of cells to its default
elem.unset('cells');
```
```

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

### Serve the Working Project with Custom Theme

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/work-oracle-jet-web-components.html

Use the `ojet serve` command to run the working project with your custom theme applied. This command allows you to preview your theme changes before building the consolidated theme.

```bash
ojet serve --theme=redwood-plus

```

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

### Initialize ojInputText with Start Slot Content

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojInputText.html

The 'start' slot is used for adding HTML content before the input area, typically an icon. This example demonstrates adding an image icon to the start of the input field, which can be dynamically updated.

```html
<oj-input-text on-raw-value-changed="[[changeCreditCardTypeIcon]]">
  <img slot="start" :src="[[creditCardTypeIcon]]">
</oj-input-text>
```

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

### help.instruction

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojColorPalette.html

Provides user assistance text to guide the user. Supports HTML formatting for rich text display. Precedence rules define which user assistance text is shown if multiple are available.

```APIDOC
## Property: help.instruction

### Description
A type of user assistance text. User assistance text is used to provide guidance to help the user understand what data to enter or select. In the Redwood theme for clarity only one user assistance text shows to the user. The precedence rules are: help.instruction shows; if no help.instruction, then validator hint shows; if no help.instruction or validator hint, then help-hints.definition shows; if no help.instruction, validator hint, or help-hints.definition, then converter hint shows. help-hints.source always shows along side the above.

In the Redwood theme, by default all user assistance text shows inline. For input components, it shows when the field takes focus. In other components it shows all the time. See the user-assistance-density property for other ways the user assistance text can render.

How is help.instruction better than the html 'title' attribute? The html 'title' attribute only shows up as a tooltip on mouse over, not on keyboard and not in a mobile device. So the html 'title' would only be for text that is not important enough to show all users, or for text that you show the users in another way as well, like in the label. Also you cannot theme the native browser's title window like you can the JET notewindow, so low vision users may have a hard time seeing the 'title' window. For these reasons, the JET EditableValue components do not use the HTML's 'title' attribute and instead use the help.instruction attribute.

To include formatted text in the help.instruction, format the string using html tags. The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre. For example the help.instruction might look like: 
```
<oj-some-element help.instruction="<html>Enter <b>at least</b> 6 characters</html>"></oj-some-element>
```
If you use formatted text, it should be accessible and make sense to the user if formatting wasn't there.

### Deprecated
- Since `18.0.0`: The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.

### Default Value
- `""`

### Since
- 4.0.0

### Type
string
```

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

### Running Mocha Setup Script

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/index.DriverManager.html

Example command to run the Mocha setup script before other tests. The --require flag ensures ts-node is used for TypeScript compilation.

```bash
$ node node_modules/mocha/bin/mocha --require=ts-node/register mocha-setup.ts other-test.spec.ts ...

```

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

### Basic oj-led-gauge Example

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojLedGauge.html

Demonstrates a basic oj-led-gauge with value, min, max, and threshold configurations. Ensure the component is ready before interacting with its properties.

```html
<oj-led-gauge
  value='63'
  min='0'
  max='100'
  thresholds='[{"max": 33}, {"max": 67}, {}]'>
</oj-led-gauge>
```

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

### getViewportStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjGantt.html

Gets the value of the `viewportStart` property, representing the Gantt viewport start time.

```APIDOC
## getViewportStart

### Description
Gets the value of the `viewportStart` property. The Gantt viewport start time. See the Help documentation for more information.

### Method
```javascript
getViewportStart(): Promise<string>
```

### Returns
Promise<string> - The value of `viewportStart` property.
```

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

### Find Element Examples

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements._internal_.OjLegendBase.html

Demonstrates different ways to use findElement with By factories or custom locator functions.

```javascript
var e1 = element.findElement(By.id('foo'));
var e2 = element.findElement({id:'foo'});
Copy
```

```javascript
var link = element.findElement(firstVisibleLink);

function firstVisibleLink(element) {
  var links = element.findElements(By.tagName('a'));
  return promise.filter(links, function(link) {
    return links.isDisplayed();
  }).then(function(visibleLinks) {
    return visibleLinks[0];
  });
}
Copy
```

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

### Init

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/ArrayTableDataSource.html

Initializes the instance of the data source.

```APIDOC
## Init

### Description
Initializes the instance.

### Parameters
- None

### Returns
Type: undefined

Inherited From:
  * DataSource#Init
```

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

### getBottomDisplay

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-core-pack-test-adapters/classes/DrawerLayoutWebElement.html

Gets the value of the `bottomDisplay` property, which specifies the display mode of the Start drawer.

```APIDOC
## getBottomDisplay

### Description
Gets the value of `bottomDisplay` property. Specifies display mode of the Start drawer.

### Method
getBottomDisplay(): Promise<string>

### Returns
Promise<string> - The value of `bottomDisplay` property.
```

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

### getLabelStartWidth

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-core-pack-test-adapters/classes/CheckboxsetWebElement.html

Gets the value of the `labelStartWidth` property, which is the width of the label when `labelEdge` is set to 'start'.

```APIDOC
## getLabelStartWidth

### Description
Gets the value of `labelStartWidth` property. The width of the label when labelEdge is 'start'.

### Returns
Promise<string | number> - The value of `labelStartWidth` property.
```

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

### Configure and Initialize RESTDataProvider

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/RESTDataProvider.html

Set up the options object with URL and transformation functions for fetching data. Then, instantiate the RESTDataProvider with these options.

```javascript
// First create an options object with the minimum fields
const options = {
 url: 'url/to/rest/endpoint',
 transforms: {
  // fetchByOffset and fetchKeys delegate to fetchFirst if their capabilities are not defined
  // so at minimum we must specify transforms for fetchFirst
  fetchFirst: {
    request: async (options) => {
      // Use size and offset to set the expected paging parameters and create a request.
      // In this example, "size" corresponds to the endpoint' "limit"
      // parameter and "offset" corresponds to the endpoint' "offset" parameter for the mock
      // server. Note that the function needs to return a Promise, hence the use of async which
      // automatically wraps the return value in one
      const url = new URL(options.url);
      const { size, offset } = options.fetchParameters;
      url.searchParams.set("limit", String(size));
      url.searchParams.set("offset", String(offset));
      return new Request(url.href);
    },
    response: async ({ body }) => {
      // The mock server sends back a response body with shape { hasMore, keys, totalSize, data} so
      // we need to extract and return them. "keys" is optional, it is needed when the REST endpoint
      // returns the set of keys associated with the data. When not available, RESTDataProvider generates
      // the keys from the data based on keyAttributes. Again, note that the function needs to return a
      // Promise hence the use of async which automatically wraps the return value in one
      const { data, keys, totalSize, hasMore } = body;
      return { data, keys, totalSize, hasMore };
    }
  }
 }
};
// Then create an RESTDataProvider object with the options
const dataprovider = new RESTDataProvider(options);
```

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

### JET Drawer Layout Usage

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj-c.DrawerLayout.html

Example of how to use the oj-drawer-layout component with start and end drawers.

```APIDOC
## JET Drawer Layout

Description: A Drawer Layout adds expandable side contents (drawers) alongside some primary content. These drawers automatically swap 'reflow' and 'overlay' display mode based on width of the page and can be placed at the 'start', 'end' or 'bottom' edge.
```html
<oj-drawer-layout end-opened="true">

   <div slot="start">Start drawer content </div>
   <div slot="end">End drawer content </div>

   Main section content

</oj-drawer-layout>
```

JET Drawer Popup and Drawer Layout look similar, but are intended to be used for different purposes.
Use Drawer Layout
  * If you need to switch between the ‘reflow’ display mode (big screens) and ‘overlay’ (small screens).
  * If the drawer should only fill a specific part of the viewport rather than take its full height (start/end) or full width (bottom).
  * If modality is not required.


Use Drawer Popup
  * If you need to display ‘overlay’ drawers attached to the edge of the viewport that stretch over the full viewport height or width.
  * If you need modality.

### Keyboard End User Information 
Target | Key | Action  
---|---|---
Drawer element | `Esc` | Close the drawer  
### Accessibility 
It is developer’s responsibility to define respective aria properties to meet accessibility requirements. Use `aria-labelledby`, `aria-describedby` or `aria-label` attributes on drawer elements (slots of the Drawer Layout) to make them accessible. 
#### aria-labelledby 
If a drawer already has a visible title bar, the text inside that bar can be used to label the dialog itself. Set the value of the `aria-labelledby` attribute to be the id of the element used to title the drawer. If there isn't appropriate text visible in the DOM that could be referenced with `aria-labelledby` use the `aria-label` attribute to define the accessible name of an element. 
####  aria-describedby 
If the drawer contains additional descriptive text besides the drawer title, this text can be associated with the drawer using the `aria-describedby` attribute. 
###  Reading direction 
Setting the reading direction (LTR or RTL) is supported by setting the `"dir"` attribute on the `<html>` element of the page. As with any JET component, in the unusual case that the reading direction is changed post-init, the page must be reloaded.
###  Sizing 
On mobile resolution side drawers stretch full-height. On non-mobile resolution side drawers stretch to Drawer Layout container's height. The bottom drawer always stretch to Drawer Layout container's width. The other axis dimension is not predefined. This dimension's size is determined by its content. If you want to set a custom size you can use units like px, rem, etc. However because there is no fixed-size parent percentages (%) won’t work, but you can use vw (viewport width) or vh (viewport height) units to achieve a similar effect. 
  * Note the side drawer's built-in minimal width limit in the 'Overlay' mode. 
  * Note that DrawerLayout animates opening and closing. However, it is app developer's responsibility to add animations for custom runtime changes to a drawer size. See the 'Sizing' cookbook demo for an example.
  

### Usage
##### Signature: 
interface CDrawerLayoutElement



##### Typescript Import Format

    ```
//To typecheck the element APIs, import as below.  
import { CDrawerLayoutElement } from "oj-c/drawer-layout";  
  
//For the transpiled javascript to load the element's module, import as below  
import "oj-c/drawer-layout";
```

For additional information visit:
  * Using JET Custom Elements
  * Using JET with TypeScript
  * JET Module Loading


Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction. 
  

###  Slots 
JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types. 


####  Default
    
The default slot is the content of the Drawer Popup.  


####  bottom
    
The content node to be shown within the Bottom Drawer  


####  end
    
The content node to be shown within the End Drawer  


####  start
    
The content node to be shown within the Start Drawer 
###  Attributes  

```

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

### Server.listen

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-core-pack-test-adapters/classes/_internal_.Server-2.html

Starts the server listening for incoming connections. It can take a handle, an optional backlog, and an optional listening listener.

```APIDOC
## Server.listen

### Description
Starts the server listening for incoming connections.

### Method
Server.listen(handle, backlog?, listeningListener?)

### Parameters
* **handle**: any
* **backlog** (number) - Optional
* **listeningListener** (Function) - Optional
  * (): void

### Returns
Server
```

```APIDOC
## Server.listen

### Description
Starts the server listening for incoming connections.

### Method
Server.listen(handle, listeningListener?)

### Parameters
* **handle**: any
* **listeningListener** (Function) - Optional
  * (): void

### Returns
Server
```

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

### getStartAngle

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjStatusMeterGauge.html

Gets the value of the `startAngle` property, specifying the start angle of a circular gauge in degrees.

```APIDOC
## getStartAngle

### Description
Gets the value of the `startAngle` property. Specifies the start angle of a gauge with circular orientation. Value should be provided in degrees.

### Method
GET

### Endpoint
/getStartAngle

### Returns
Promise<number> - The value of the `startAngle` property.
```

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

### Server.listen

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/index._internal_.Server-2.html

Starts the server to listen for incoming connections. It can take a backlog and a listening listener.

```APIDOC
## Server.listen

### Description
Starts the server to listen for incoming connections. It can take a backlog and a listening listener.

### Method
Server.listen(handle, backlog?, listeningListener?)

### Parameters
* **handle**: any
* **Optional backlog**: number
* **Optional listeningListener**: (() => void)

### Returns
Server
```

```APIDOC
## Server.listen

### Description
Starts the server to listen for incoming connections. It can take a listening listener.

### Method
Server.listen(handle, listeningListener?)

### Parameters
* **handle**: any
* **Optional listeningListener**: (() => void)

### Returns
Server
```

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

### getTwoDigitYearStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjInputDate.html

Gets the value of the `twoDigitYearStart` property, which defines the start of a 100-year period for interpreting two-digit years.

```APIDOC
## getTwoDigitYearStart

### Description
Gets the value of `twoDigitYearStart` property. The two-digit-year-start attribute defines the starting point of a 100-year period for interpreting two digit years.

### Method
`getTwoDigitYearStart(): Promise<number>`

### Returns Promise<number>
The value of `twoDigitYearStart` property.
```

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

### getStart Method - FlattenedTreeCellSet

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

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

```javascript
getStart(axis)
```

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

### With Start Icon

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

Shows how to use the startIcon slot to add an icon to the beginning of the button.

```APIDOC
## With Start Icon

```html
<oj-c-button label="start icon">
  <span slot='startIcon' class='myIconClass'></span>
</oj-c-button>
```
```

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

### getStart Method

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/EmptyNodeSet.html

Gets the start index of the result set. This method is part of the deprecated EmptyNodeSet class.

```APIDOC
## getStart()

### Description
Gets the start index of the result set.

### Returns
* **number** - the start index of the result set.
```

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

### Using help.instruction with HTML formatting

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojCombobox.html

Demonstrates how to use the `help.instruction` attribute to provide user guidance with formatted text using HTML tags. The `help.instruction` attribute is preferred over the HTML 'title' attribute for better accessibility and theming.

```html
<oj-some-element help.instruction="<html>Enter <b>at least</b> 6 characters</html>"></oj-some-element>
```

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

### Initialize and Join DataProviders

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/JoiningDataProvider.html

Demonstrates initializing multiple ArrayDataProviders and then joining them using JoiningDataProvider to create a complex data structure. The example shows how to join department and location data into employee data.

```typescript
let employee = [
  { id: 1001, departmentId: 2001, managerId: 1011, firstName: "Chris", lastName: "Black", title: "Software Engineer" },
  { id: 1011, departmentId: 2002, managerId: 1021, firstName: "Jenifer", lastName: "Cooper", title: "Manager" },
  { id: 1021, departmentId: 2003, managerId: 1031, firstName: "Kurt", lastName: "Jonhson", title: "VP" },
  { id: 1022, departmentId: 2003, managerId: 1031, firstName: "Mike", lastName: "Chrison", title: "VP", manager: { firstName: "Guangping", lastName: null } }
];
let department = [
  { id: 2001, locationId: 1, VPId: 1021, name: "JET" },
  { id: 2002, locationId: 1, VPId: 1022, name: "Visual Builder" }
];
let location = [
  { id: 1, city: "Redwood City", state: "California" }
];

// initialize basic DataProvider
let dpEmployee = new ArrayDataProvider(employee, { keyAttributes: 'id' });
let dpDepartment = new ArrayDataProvider(department, { keyAttributes: 'id' });
let dpLocation = new ArrayDataProvider(location, { keyAttributes: 'id' });

// join for department
let locJoin = { foreignKeyMapping: { foreignKey: 'locationId' }, joinedDataProvider: dpLocation };
let VPJoin = { foreignKeyMapping: { foreignKey: 'VPId' }, joinedDataProvider: dpEmployee };
let dpJoinDepartment = new JoiningDataProvider(dpDepartment,
  { joins: { location: locJoin, VP: VPJoin } });

let deptJoin = { foreignKeyMapping: { foreignKey: 'departmentId' }, joinedDataProvider: dpJoinDepartment };
let mgrJoin = { foreignKeyMapping: { foreignKey: 'managerId' }, joinedDataProvider: dpEmployee };

let dpJoinEmployee = new JoiningDataProvider(dpEmployee,
  { joins: { manager: mgrJoin, department: deptJoin } });

// Using joined dataprovider attributes for fetch methods
// The returned fields will include all fields from base data provider and department plus title from manager.
dpJoinEmployee.fetchByOffset({ offset: 0, attributes: ['manager.title'] });
```

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

### getStart

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/ArrayCellSet.html

Gets the start index of the result set for the specified axis. Valid values are 'row' and 'column'.

```APIDOC
## getStart(axis)

### Description
Gets the start index of the result set for the specified axis. Valid values are "row" and "column".

### Parameters
#### Path Parameters
- **axis** (string) - Required - The axis in which to inquire the actual count of the result set.

### Returns
- **number** - The start index of the result set for the specified axis.
```

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

### HTML for Help Instruction Display Options

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojSelectMany.html

Example of configuring display options for help instruction text. Setting it to 'none' removes the attribute.

```html
<oj-select-many :display-options.prop="{helpInstruction: 'none'}"></oj-select-many>
```

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

### getStart(axis)

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/CubeCellSet.html

Gets the start index of the result set for the specified axis. Valid values are 'row' and 'column'.

```APIDOC
## getStart(axis)

### Description
Gets the start index of the result set for the specified axis. Valid values are "row" and "column".

### Parameters
#### Path Parameters
- **axis** (string) - Required - the axis in which to inquire the actual count of the result set.

### Returns
- **number** - the start index of the result set for the specified axis.
```

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

### displayOptions.helpInstruction

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojInputTime.html

Configures the display of auxiliary help instruction text, specifying its position relative to the component. Defaults to `['notewindow']`.

```APIDOC
## display-options.help-instruction :Array<'notewindow'|'none'>|'notewindow'|'none'

### Description
Display options for auxiliary help instruction text that determines where it should be displayed in relation to the component.

### Deprecated
Since | Description
---|---
`9.0.0` | If you want none, remove help-instruction attribute.

### Default Value
* `['notewindow']`

### Since
* 0.7

### Names
Item | Name
---|---
Property | `displayOptions.helpInstruction`
```

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

### getStartAngle

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjSunburst.html

Gets the value of `startAngle` property. Specifies the starting angle of the sunburst. Valid values are numbers between 0 and 360.

```APIDOC
## getStartAngle

### Description
Gets the value of `startAngle` property. Specifies the starting angle of the sunburst. Valid values are numbers between 0 and 360.

### Method
getStartAngle()

### Returns
Promise<number>
```

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

### Example: Aborting fetchByKeys

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/AbortReason.html

Demonstrates how to use AbortController to abort fetch requests made with fetchByKeys and how to handle the AbortReason exception.

```APIDOC
## Example: Aborting fetchByKeys

How to abort fetchByKeys
```javascript
// abort on an AbortController instance will abort all requests that are associated
// with the signal from that abortController.
const abortController = new AbortController();
let keySet = new Set();
keySet.add(1001);
keySet.add(556);
// component passes AbortSignal as part of FetchByKeysParameters to fetchByKeys
// on dataProvider
try {
 let value = await dataprovider.fetchByKeys({keys: keySet, signal: abortController.signal});
} catch (err) {
 // if the data fetch has been aborted, retrieving data from the fetched result
 // will be rejected with DOMException named AbortError
 if (err.severity === 'info') {
   // if the data fetch has been aborted from a jet component as a performance concern, an _AbortReason_ will be provided.
   console.log(err.message);
 }
}
// later when abort is desired, component can invoke abort() on the cached
// abort controller to abort any outstanding data retrieval it requested
// on asyncIterator.
if (abort_is_desired) {
  abortController.abort();
}
```
```

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

### getBaselineScaling

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/elements.OjSparkChart.html

Gets the value of the `baselineScaling` property. This defines whether the axis baseline starts at the minimum value of the data or at zero.

```APIDOC
## getBaselineScaling

### Description
Gets the value of `baselineScaling` property. Defines whether the axis baseline starts at the minimum value of the data or at zero.

### Method
getBaselineScaling()

### Returns
Promise<string> - The value of `baselineScaling` property.
```

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

### Get line map and specific line position

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/audit/reference-custom-audit-rule-context-object-properties.html

Use `getLineMap()` to obtain a Map object where keys are line numbers and values are objects with start and end indices for each line. Retrieve the position for a specific line using the `get()` method on the map.

```javascript
var map  = getLineMap();
var pos  = map.get(3);
```

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

### Install Theming Toolchain with JET CLI

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/use-css-themes-oracle-jet-apps.html

Run this command in your app's top-level directory to install the necessary tools for theming.

```bash
ojet add theming
```

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

### ojButton with startIcon Slot

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/oj.ojButton.html

Example of using the startIcon slot to add an icon to the start of the button. The slot accepts DOM nodes as children.

```html
<oj-button>
  <span slot='startIcon' class='myIconClass'></span>
  <span>myValue</span>
</oj-button>
```

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

### Log configObj in before_build Hook

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/understand-web-application-workflow.html

This example demonstrates logging the entire 'configObj' during the 'before_build' hook. This is useful for inspecting available options that can be customized in the build process.

```javascript
module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
  	console.log("Running before_build hook.", configObj);
  	resolve(configObj);
   });
};
```

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

### Get Component Subcomponent Type

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/audit/reference-custom-audit-rule-utility-libraries.html

Return the `subcomponentType` metadata property for a component as a string using `getSubcomponentType`. Examples include `packPrivate` or `data`.

```javascript
getSubcomponentType()
```

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

### View Migrate Command Options

Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/oracle-jet-app-migration-current-release.html

To see all available options for the `migrate` command, run the `help migrate` command in your app's top-level directory.

```bash
npx @oracle/ojet-cli help                   migrate
```
Tokens:
Raw