Oracle APEX JavaScript API Reference

https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/
Admin
This section describes the JavaScript APIs available to Oracle APEX applications, providing...
Tokens:526,027
Snippets:3,469
Trust Score:9.1
Update:1 week ago
Show doc for...
Tokens:
Raw
### openInstallDialog()

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.pwa.html

Opens the PWA installation dialog or triggers installation.

```APIDOC
## openInstallDialog()

### Description
Triggers the installation process for browsers with automatic PWA installation, or opens a dialog with instructions for browsers without automatic installation. Automatically invoked when clicking an element with class `.a-pwaInstall` or via the action `a-pwa-install`.

### Method
openInstallDialog

### Endpoint
apex.pwa.openInstallDialog()

### Example
```javascript
```
```

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

### Get or set applyTemplateOptions option after initialization

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Shows how to get the current value of applyTemplateOptions and set it with a placeholder example after initialization.

```javascript
// get
let value = $( ".selector" ).grid( "option", "applyTemplateOptions" );
// set
$( ".selector" ).grid( "option", "applyTemplateOptions", {
    // This example would enable you to use the placeholder #TODAY# in any templates.
    placeholders: { TODAY: (new Date()).toISOString() }
} );
```

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

### start

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/treeView.html

Triggered when dragging a node starts.

```APIDOC
## start

### Description
Triggered when dragging a node starts. See jQuery UI draggable and sortable for details.

### Properties
- **event** (Event) - The `jQuery` event object.
- **ui** (Object) - Contains properties: helper (jQuery), items (jQuery), offset (object), operation (object), originalPosition (object), placeholder (jQuery), position (object), sender (jQuery).

```

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

### walkTree pre-order traversal example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/model.html

Walks the tree shape model starting at the root, logging node names with indentation to show structure. Uses node, beginChildren, and endChildren visitor methods.

```javascript
var indent = "";
model.walkTree( model.root(), {
    node: function( node, parent ) {
        console.log( indent + "Node: " + model.getValue( node, "NAME" ) );
    },
    beginChildren: function( node ) {
        indent += "    ";
    },
    endChildren: function( node ) {
        indent = indent.substring(4);
    }
}, null );
```

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

### Get feedback option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/facetsRegion.html

Shows how to get the feedback option after initialization. This option can only be set during initialization.

```javascript
var value = apex.region( "myRegionId" ).feedback;
```

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

### Escaping open bracket example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.util.html

Example where the open bracket must be escaped to avoid being interpreted as a directive start.

```html
<span>The coordinates {{/}c, d} = {if VAL/}&VAL.{else/}unknown{endif/}</span>
```

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

### apex.theme.mq example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.theme.html

Tests a media query using window.matchMedia. Returns true if the document matches the given media query string. The example logs a message when the viewport is at least 640 pixels wide after a window resize.

```javascript
apex.jQuery( window ).on( "apexwindowresized", function() {
    if ( apex.theme.mq( "(min-width: 640px)" ) ) {
        console.log( "Window resized, and viewport is at least 640px wide" );
    }
} );
```

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

### apex.date.startOfDay - Get start of day

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.date.html

Returns the start date of a day for a given date object. Defaults to the current date and time if no argument is provided.

```javascript
var dayStartDate = apex.date.startOfDay( myDate );
// output: "2021-JUN-29 24:00:00" (as date object)
```

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

### Initialize grid with applyTemplateOptions option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Initializes the grid with applyTemplateOptions, including a placeholder example for #TODAY#.

```javascript
$( ".selector" ).grid( {
    applyTemplateOptions: {
        // This example would enable you to use the placeholder #TODAY# in any templates.
        placeholders: { TODAY: (new Date()).toISOString() }
    }
} );
```

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

### root example: get tree root node

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/model.html

Gets the root node of a tree shape model. Throws an error if the model shape is not tree.

```javascript
var rootNode = model.root();
```

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

### Open PWA install dialog with apex.pwa.openInstallDialog()

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.pwa.html

Triggers the PWA installation process. For browsers with automatic installation, it triggers the process; otherwise, it opens a dialog with instruction text. This function is automatically invoked on elements with class `.a-pwaInstall` and on `apex.actions` with action name `a-pwa-install`.

```javascript
apex.pwa.openInstallDialog();
```

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

### getInstallText()

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.pwa.html

Deprecated. Returns the PWA dialog installation text.

```APIDOC
## getInstallText()

### Description
Deprecated. Returns a Promise that resolves the PWA dialog installation text.

### Method
getInstallText

### Endpoint
apex.pwa.getInstallText()

### Returns
- **Promise** - Resolves to the PWA dialog installation text
```

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

### forEachInPage Example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/model.html

Iterates over a range (page) of the model collection, only valid for table shape models. This example renders a 'pageSize' page of records starting at offset 'currentPageOffset'.

```javascript
var count = 0,
    pageOffset = currentPageOffset;
model.forEachInPage( pageOffset, pageSize, function( record, index, id ) {
    if ( record ) {
        // render the record
        count += 1;
    }
    if ( count === pageSize || !record ) {
        // done rendering this page of records
    }
} );
```

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

### getRecordId and getRecordMetadata example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/model.html

Gets the identity of a record and uses it to retrieve the record metadata.

```javascript
var id = model.getRecordId( someRecord ),
    meta = model.getRecordMetadata( id );
// use meta for something
```

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

### Initialize grid with pagination option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Shows how to set the pagination option during grid initialization. The example enables showRange, showPageLinks, maxLinks, and firstAndLastButtons.

```javascript
$( ".selector" ).grid( {
    pagination: {
        showRange: true,
        showPageLinks: true,
        maxLinks: 6,
        firstAndLastButtons: true
    }
 
} );
```

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

### apex.util.getScrollbarSize example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.util.html

Gets the system scrollbar size for layout adjustments. The page need not have a scrollbar at the time of the call. The example returns an object like { width: 17, height: 17 }.

```javascript
var size = apex.util.getScrollbarSize();
```

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

### Initialize derived-view with pagination option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/tableModelViewBase.html

Shows how to set the pagination option during initialization with example properties.

```javascript
$( ".selector" ).derived-view( {
    pagination: {
        showRange: true,
        showPageLinks: true,
        maxLinks: 6,
        firstAndLastButtons: true
    }
 
} );
```

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

### getSelection: Get selected treeView node elements

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/treeView.html

Use this example to get the set of currently selected treeView node elements as a jQuery object. The returned elements have the class a-TreeView-content.

```javascript
var selection$ = $( ".selector" ).treeView( "getSelection" );
```

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

### Initialize recordView with applyTemplateOptions option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/recordView.html

Shows how to set the applyTemplateOptions option during initialization. The example enables the placeholder #TODAY# in templates.

```javascript
$( ".selector" ).recordView( {
    applyTemplateOptions: {
        // This example would enable you to use the placeholder #TODAY# in any templates.
        placeholders: { TODAY: (new Date()).toISOString() }
    }
} );
```

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

### Initialize grid with modeChange callback

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Initialize the grid with the modeChange callback specified.

```javascript
$( ".selector" ).grid({
    modeChange: function( event, data ) {}
});
```

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

### Get or set layerMessages option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/mapRegion.html

Shows how to get and set the layerMessages property of a map region. The property is an object with a position and selector for the messages container. The set example assigns a position of "top".

```javascript
// get
var value = apex.region( "myRegionId" ).layerMessages;
// set
apex.region( "myRegionId" ).layerMessages = { position: "top" };
```

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

### Initialize grid with columns option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Shows how to initialize the grid with the columns option, defining a column with properties like heading, label, alignment, sorting, and width.

```javascript
$( ".selector" ).grid( {
    columns: [ {
     NAME: {
         heading: "<em>Name</em>",
         label: "Name",
         alignment: "start",
         headingAlignment: "center",
         seq: 1,
         canHide: true,
         canSort: true,
         hidden: false,
         isRequired: true,
         escape: true,
         frozen: false,
         noStretch: false,
         noCopy: false,
         readonly: false,
         sortDirection: "asc",
         sortIndex: 1,
         width: 98
     },
     ....
 } ]
} );
```

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

### Get cookie value with apex.storage.getCookie

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.storage.html

Returns the value of the specified cookie. The example retrieves the value of the cookie named 'TEST'.

```javascript
var value = apex.storage.getCookie( "TEST" );
```

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

### apex.theme.popupFieldHelp example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.theme.html

Displays a standard item help dialog. The example shows how to display a custom help message that looks like standard page item help.

```javascript
apex.theme.popupFieldHelp( {title: "Custom Help", helpText: "Some helpful text"} );
```

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

### getSelectedNodes: Get data model nodes for current selection

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/treeView.html

Use this example to get the adapter's data model nodes for the currently selected treeView nodes. The returned array corresponds to the selected nodes and can be used for further model operations.

```javascript
var selectedNodes = $( ".selector" ).treeView( "getSelectedNodes" );
```

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

### Initialize grid with selectionChange callback

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Initialize the grid with the selectionChange callback specified.

```javascript
$( ".selector" ).grid({
    selectionChange: function( event ) {}
});
```

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

### apex.model.release: Get and release a model

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.model.html

Releases a model when it is not being used but may be used again. Models are reference counted; every call to apex.model.get or apex.model.create requires a matching release call. The example gets a model with id 'MyModel' and releases it when done.

```javascript
var myModel = apex.model.get("MyModel");
// ... do something with myModel
apex.model.release("MyModel");  // release it when done
```

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

### List all shortcuts with apex.actions.listShortcuts

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/actions.html

Writes to the console all shortcuts in the global context, showing the shortcut display and the action label.

```javascript
var i,
    shortcuts = apex.actions.listShortcuts();
for ( i = 0; i < shortcuts.length; i++ ) { // for each shortcut
     console.log("Press shortcut " + shortcuts[i].shortcutDisplay + " to " + shortcuts[i].actionLabel );
}
```

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

### Get an action value with apex.actions.get

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/actions.html

Returns the current value of a radio group or toggle action. Returns null if the action does not exist. The example gets the current choice of the 'change-view' action from the interactive grid region with DOM id 'emp'.

```javascript
apex.region( "emp" ).call( "getActions" ).get( "change-view" );
```

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

### getScopedSessionStorage example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.storage.html

Creates a scoped session storage object with a prefix and uses it to set and get an item, after checking support with apex.storage.hasSessionStorageSupport.

```javascript
var myStorage,
    setting1;
if ( apex.storage.hasSessionStorageSupport() ) {
  myStorage = apex.storage.getScopedSessionStorage({ prefix: "Acme" });
  myStorage.setItem( "setting1", "on" );
  setting1 = myStorage.getItem( "setting1" );
}
```

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

### Initialize recordView with progressOptions option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/recordView.html

Shows how to set the progressOptions option during initialization. The default depends on the hasSize option.

```javascript
$( ".selector" ).recordView( {
    progressOptions: null
} );
```

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

### apex.actions.show example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/actions.html

Shows the 'send-email' action.

```javascript
apex.actions.show( "send-email" );
```

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

### Get or set customStyles option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/mapRegion.html

Shows how to get and set the customStyles property of a map region. The property is an array of objects defining custom SVG shapes for point markers. The set example assigns an array with a single SVG shape definition.

```javascript
// get
var value = apex.region( "myRegionId" ).customStyles;
// set
apex.region( "myRegionId" ).customStyles = [
   {
       "name": "MyCamera",
       "width": 20,
       "height": 20,
       "paint-order": "stroke",
       "viewBox": "0 0 20 20",
       "elements": [
           {
               "type": "path",
               "d": "M15 4h-1.2l-.9-1.2c-.4-.5-1-.8-1.6-.8H8.8c-.7 0-1.3.3-1.6.8L6.2 4H5c-1.1 0-2 .9-2 2v5c0 1.1.9 2 2 2h2.2l2.4 4.7c.1.2.4.3.7.2.1 0 .2-.1.2-.2l2.4-4.7H15c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 7c-1.4 0-2.5-1.1-2.5-2.5S8.6 6 10 6s2.5 1.1 2.5 2.5S11.4 11 10 11z"
           }
       ]
    }
];
```

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

### Initialize derived-view with stickyTop option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/tableModelViewBase.html

Shows how to initialize the derived-view with the stickyTop option set to true.

```javascript
$( ".selector" ).derived-view( {
    stickyTop: true
} );
```

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

### displayValueFor: Get display value for select list item

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/item.html

Returns the display value for a given value. For select lists, if the value is valid, the display value is returned; otherwise, the value itself is returned. The example shows how to get the display value for 'APPLES' and display it in an alert.

```javascript
apex.message.alert( "The correct answer is: " + apex.item( "P1_ITEM" ).displayValueFor( "APPLES" ) );
```

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

### recordAt example: get fifth record

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/model.html

Returns the record at index 5 in the model collection, assuming it exists. Only applies to table shape models.

```javascript
var record = model.recordAt(5);
```

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

### Initialize grid with contextMenu option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Initializes the grid with a context menu containing two actions. Only one of contextMenu, contextMenuId, or contextMenuAction should be specified.

```javascript
$( ".selector" ).grid( {
    contextMenu: {
    items:[
        { type:"action", label: "Action 1", action: function() { alert("Action 1"); } },
        { type:"action", label: "Action 2", action: function() { alert("Action 2"); } }
    ]
}
} );
```

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

### Initialize grid with progressOptions option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Initializes the grid with progressOptions set to null, which passes options to apex.util.showSpinner.

```javascript
$( ".selector" ).grid( {
    progressOptions: null
} );
```

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

### Get or set pagination option after initialization

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Shows how to retrieve or update the pagination option after the grid has been initialized. The set example uses a placeholder object.

```javascript
// get
let value = $( ".selector" ).grid( "option", "pagination" );
// set
$( ".selector" ).grid( "option", "pagination", {...} );
```

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

### Initialize derived-view with highlights option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/tableModelViewBase.html

Shows how to initialize the derived-view with the highlights option, mapping highlight IDs to color definitions.

```javascript
$( ".selector" ).derived-view( {
    highlights: {
        "hlid0001": {
            seq: 1,
            row: true,
            color: "#FF7755"
        },
        ...
    }
} );
```

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

### walkTree post-order traversal example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/model.html

Walks the tree shape model starting at the root, processing nodes in post-order (children before node). Omits beginChildren and endChildren methods.

```javascript
model.walkTree( model.root(), {
    postNode: function( node, parent ) {
        // do something to process the node
    },
}, null );
```

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

### Get selected values and join with colon

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/iconList.html

Calls the `getSelectionValues` method to return an array of values from the data-value attributes of selected items. The example then joins them into a colon-separated string.

```javascript
var values = $( ".selector" ).iconList( "getSelectionValues" ),
    result = values.join( ":" );
```

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

### Initialize grid with footer option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Shows how to set the footer option to false when initializing the grid.

```javascript
$( ".selector" ).grid( {
    footer: false
} );
```

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

### refresh: Refresh the whole tree

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/treeView.html

Use this example to refresh (render) the whole tree after the adapter's data model changes. If no node is specified, the refresh starts from the root of the tree.

```javascript
$( ".selector" ).treeView( "refresh" );
```

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

### apex.item.create with most callbacks and properties

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.item.html

Shows a call to apex.item.create( pNd, pItemImpl ) with most available callbacks and properties passed to illustrate the syntax. It is unlikely that any plug-in needs to supply all of these.

```javascript
apex.item.create( "P100_COMPANY_NAME", {
    item_type: "FANCY_ITEM",
    displayValueFor: function( pValue ) {
        var lDisplayValue;
        // code to determine the display value for pValue
        return lDisplayValue;
    },
    getPopupSelector: function() {
        return "<some CSS selector>";
    },
    getValidity: function() {
        var lValidity = { valid: true };
        if ( <item is not valid expression> ) {
            lValidity.valid = false;
        }
        return lValidity;
    },
    getValidationMessage: function() {
        // return validation message if invalid or empty string otherwise
    },
    getValue: function() {
        var lValue;
        // code to determine lValue based on the item type.
        return lValue;
    },
    setValue: function( pValue, pDisplayValue ) {
        // code that sets pValue and pDisplayValue (if required), for the item type
    },
    reinit: function( pValue, pDisplayValue ) {
        // set the value possibly using code like
        // this.setValue( pValue, null, true );
        return function() {
           // make an ajax call that gets new option values for the item
        }
    },
    disable: function() {
        // code that disables the item type
    },
    enable: function() {
        // code that enables the item type
    },
    isDisabled: function() {
        // return true if item is disabled and false otherwise
    }
    show: function() {
        // code that shows the item type
    },
    hide: function() {
        // code that hides the item type
    },
    isChanged: function() {
        var lChanged;
        // code to determine if the value has changed
        return lChanged;
    },
    addValue: function( pValue ) {
        // code that adds pValue to the values already in the item type
    },
    nullValue: "<null return value for the item>",
    setFocusTo: $( "<some jQuery selector>" ),
    setStyleTo: $( "<some jQuery selector>" ),
    loadingIndicator: function( pLoadingIndicator$ ){
        // code to add the loading indicator in the best place for the item
        return pLoadingIndicator$;
    },
    storageType: "separated",
    separator: ":"
});
```

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

### Get item value only if not disabled with isDisabled()

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/item.html

Checks if item P1_ITEM is disabled. If not disabled, retrieves its value using getValue(). The example initializes value to null and only assigns if the item is enabled.

```javascript
var value = null;
if ( !apex.item( "P1_ITEM" ).isDisabled() ) {
    value = apex.item( "P1_ITEM" ).getValue();
}
```

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

### Initialize recordView with showNullAs option

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/recordView.html

Shows how to set the showNullAs option during initialization. Default is "-".

```javascript
$( ".selector" ).recordView( {
    showNullAs: "- unknown -"
} );
```

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

### getSeparator: Get separator for multivalued item

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/item.html

Returns the separator used by a multivalued item, or null if not applicable. The example creates a multivalued item with separator '~' and then calls getSeparator to retrieve it.

```javascript
apex.item.create( "P1_ITEM", {
   storageType: "separated",
   separator: "~"
} );

const separator = apex.item( "P1_ITEM" ).getSeparator(); // returns "~"
```

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

### apex.actions.listShortcuts(pWithMarkup) → {Array.<actions.shortcutListItem>}

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/actions.html

Returns a list of all shortcuts in the context. Optionally wraps the display name in HTML markup.

```APIDOC
## apex.actions.listShortcuts(pWithMarkup) → {Array.<actions.shortcutListItem>}

### Description
Return a list of all shortcuts in the context.

### Method
listShortcuts

### Parameters
#### pWithMarkup
- **Type**: boolean
- **Required**: false
- **Description**: Optional default is false. If true wrap the display name in HTML markup.

### Returns
- **Type**: Array.<actions.shortcutListItem>
- **Description**: An array of objects with information about the shortcut.

### Example
This example writes to the console all the shortcuts in the global context.
```
var i,
    shortcuts = apex.actions.listShortcuts();
for ( i = 0; i < shortcuts.length; i++ ) { // for each shortcut
     console.log("Press shortcut " + shortcuts[i].shortcutDisplay + " to " + shortcuts[i].actionLabel );
}
```
```

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

### apex.server.pluginUrl with x01 and pageItems

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.server.html

The example returns a URL for a GET request to a plug-in's PL/SQL Ajax function. It sets the scalar value x01 to 'test' and includes page items P1_DEPTNO and P1_EMPNO in session state using a jQuery selector. lAjaxIdentifier must be the value from apex_plugin.get_ajax_identifier. The URL can be used with apex.show or as a GET request.

```javascript
var lUrl = apex.server.pluginUrl ( lAjaxIdentifier, {
    x01: "test",
    pageItems: "#P1_DEPTNO,#P1_EMPNO"
} );
```

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

### Initialize grid with columnReorder callback

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/grid.html

Initialize the grid with the columnReorder callback specified.

```javascript
$( ".selector" ).grid({
    columnReorder: function( event, data ) {}
});
```

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

### Initialize derived-view with autoAddRecord

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/tableModelViewBase.html

Shows how to initialize a derived-view with the autoAddRecord option set to true.

```javascript
$( ".selector" ).derived-view( {
    autoAddRecord: true
} );
```

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

### Use scoped local storage with apex.storage.getScopedLocalStorage

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.storage.html

Creates a local storage object scoped with a prefix and the application id, then sets and gets an item. The example checks support first, but the function returns a no-op wrapper if unsupported.

```javascript
var myStorage,
    setting1;
if ( apex.storage.hasLocalStorageSupport() ) {
  myStorage = apex.storage.getScopedLocalStorage({ prefix: "Acme" });
  myStorage.setItem( "setting1", "on" );
  setting1 = myStorage.getItem( "setting1" );
}
```

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

### hasLocalStorageSupport example

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/apex.storage.html

Checks for local storage support and, if supported, creates a scoped local storage object and sets an item.

```javascript
var myStorage;
if ( apex.storage.hasLocalStorageSupport() ) {
  myStorage = apex.storage.getScopedLocalStorage({ prefix: "Acme" });
  myStorage.setItem( "setting1", "on" );
}
```

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

### getMultiValueStorage: Get storage object for multivalued item

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/item.html

Returns an object with 'type' and 'separator' properties for multivalued items. The example creates a multivalued item with storageType 'separated' and separator '~', then calls getMultiValueStorage to retrieve the storage object.

```javascript
apex.item.create( "P1_ITEM", {
   storageType: "separated",
   separator: "~"
} );

const multiValueStorage = apex.item( "P1_ITEM" ).getMultiValueStorage(); // returns { type: "separated", separator: "~" }
```

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

### Initialize menu with create callback

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/menu.html

Initializes the menu with a create callback. The callback is triggered when the menu is created.

```javascript
$( ".selector" ).menu({
    create: function( event, ui ) {}
});
```

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

### Loop over children of a parent node using model.childCount and model.child

Source: https://docs.oracle.com/en/database/oracle/apex/26.1/aexjs/model.html

This example iterates over the children of a parent node in a tree-shaped model. It uses model.childCount to get the number of children and model.child to retrieve each child node. This method must only be used on tree shape models.

```javascript
var i, node;
for ( i = 0; i < model.childCount( parentNode ); i++ ) {
    node = model.child( parentNode, i );
    // do something with node
}
```
Tokens:
Raw