### 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 ``` -------------------------------- ### 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
Start drawer content
End drawer content
Main section content ``` 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
col 1
col 2
``` -------------------------------- ### 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 ### Returns Promise - The value of `startDisplay` property. ``` -------------------------------- ### 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 * 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 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` ### Returns `Promise` - 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'; ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` ``` -------------------------------- ### 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', . . . ``` -------------------------------- ### 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` ``` -------------------------------- ### 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 ``` -------------------------------- ### 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` ``` -------------------------------- ### 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 ``` -------------------------------- ### 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(); ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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; ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` ``` -------------------------------- ### 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 ``` -------------------------------- ### 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
``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 } ); ``` -------------------------------- ### 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> 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> | null // Reset the value of cells to its default elem.unset('cells'); ``` ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ... ``` -------------------------------- ### 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); ``` -------------------------------- ### 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 ``` ### Returns Promise - The value of `viewportStart` property. ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ### Returns Promise - 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 - The value of `labelStartWidth` property. ``` -------------------------------- ### 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 ``` ``` -------------------------------- ### 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'] }); ``` -------------------------------- ### 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
Start drawer content
End drawer content
Main section content ``` 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 `` 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 ``` -------------------------------- ### 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 - The value of the `startAngle` property. ``` -------------------------------- ### 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(); } ``` ``` -------------------------------- ### 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` ### Returns Promise 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) ``` -------------------------------- ### 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 ``` -------------------------------- ### 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. ``` -------------------------------- ### 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); }); }; ``` -------------------------------- ### 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. ``` -------------------------------- ### 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 ``` -------------------------------- ### Path Mapping for Knockout Library Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/optimize-performance-oracle-jet-apps.html This example shows the path mapping configuration for the Knockout library within `path_mapping.json`, detailing debug and release build paths, including CDN paths. ```json "libs": { "knockout": { "cdn": "3rdparty", "cwd": "node_modules/knockout/build/output", "debug": { "src": "knockout-latest.debug.js", "path": "libs/knockout/knockout-#{version}.debug.js", "cdnPath": "knockout/knockout-3.x.x.debug" }, "release": { "src": "knockout-latest.js", "path": "libs/knockout/knockout-#{version}.js", "cdnPath": "knockout/knockout-3.x.x" } }, ``` -------------------------------- ### 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. ``` -------------------------------- ### 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 ``` -------------------------------- ### Using a Web Component with Slots Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/work-oracle-jet-web-components.html Demonstrates how to instantiate a Web Component and provide content for its defined slots. This is useful for customizing the content of reusable components. ```html ... contents omitted ``` -------------------------------- ### 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 - The value of `baselineScaling` property. ``` -------------------------------- ### Instantiating and Using AsyncResource Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/index._internal_.AsyncResource.html Demonstrates how to extend and instantiate AsyncResource, and use its core methods like runInAsyncScope and emitDestroy. The constructor itself triggers the init hook. ```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 }, ); // 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); // 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(); ``` -------------------------------- ### 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); ``` -------------------------------- ### Server Setup for Keep-Alive Testing Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/index._internal_.ClientRequest.html Sets up an HTTP server that listens on port 3000 and sends a 'hello' response. It also includes a mechanism to send periodic requests to itself to test keep-alive behavior. ```javascript import http from 'node:http'; // Server has a 5 seconds keep-alive timeout by default http .createServer((req, res) => { res.write('hello\n'); res.end(); }) .listen(3000); setInterval(() => { // Adapting a keep-alive agent http.get('http://localhost:3000', { agent }, (res) => { res.on('data', (data) => { // Do nothing }); }); }, 5000); // Sending request on 5s interval so it's easy to hit idle timeout ``` -------------------------------- ### 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 myValue ``` -------------------------------- ### Log Server Connection Event Listeners Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-test-adapters/classes/index._internal_.Server-3.html This example shows how to retrieve and inspect the listeners for a specific event, in this case, the 'connection' event. It logs the array of listener functions. ```javascript server.on('connection', (stream) => { console.log('someone connected!'); }); console.log(util.inspect(server.listeners('connection'))); ``` -------------------------------- ### Fetch First Data Block Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-api/ListDataProviderView.html Provides an example of how to get an AsyncIterable object and fetch the first block of data using its next() method. ```APIDOC ## fetchFirst ### Description Returns an `AsyncIterable` object for iterating through data. The `AsyncIterator` obtained from this iterable allows fetching data in blocks by calling its `next()` method. ### Parameters #### Path Parameters - **parameters** (FetchListParameters) - Optional - Fetch parameters for the data. ### Returns `AsyncIterable` - An AsyncIterable object containing fetch results. ### Example ```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; }); let done = result.done; ``` ``` -------------------------------- ### Add Theming Support and Create Custom Theme Source: https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/work-oracle-jet-web-components.html Add theming capabilities to your project and create a new custom theme, specifying a base theme like 'redwood' or 'stable'. The 'redwood-plus' theme name is an example to distinguish it from the default 'redwood' theme. ```bash ojet add theming ojet create theme redwood-plus --basetheme=redwood ``` -------------------------------- ### 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() ```