Oracle APEX 24.2 JavaScript API

https://docs.oracle.com/en/database/oracle/apex/24.2/aexjs/
Admin
Oracle APEX JavaScript API documentation covering the apex namespace with comprehensive reference...
Tokens:585,688
Snippets:3,915
Trust Score:9.7
Update:1 day ago
Show doc for...
Tokens:
Raw
### getActions() example: list actions from console

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

Gets a list of all actions from the browser JavaScript console.

```javascript
console.log( JSON.stringify( $( ".selector" ).recordView( "getActions" ).list(), null, 4 ) );
```

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

### walkTree post-order example

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

Walks the tree shape model starting at the root and processes nodes in post-order. The beginChildren and endChildren methods are omitted because depth information is not needed.

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

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

### nextPage() example

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

Example showing how to go to the next page using the grid widget's nextPage method.

```javascript
$( ".selector" ).grid( "nextPage" );
```

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

### walkTree example with indentation

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

Walks the tree shape model starting at the root, logging node names with indentation to show tree structure. The visitor's node, beginChildren, and endChildren methods are used.

```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 or set progressOptions after initialization

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

Shows how to get or set the progressOptions option after the grid has been initialized.

```javascript
// get
var value = $( ".selector" ).grid( "option", "progressOptions" );
// set
$( ".selector" ).grid( "option", "progressOptions", null );
```

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

### Get or set formCssClasses option after initialization

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

Shows how to get the current value of the formCssClasses option using the "option" method, and how to set it to a new value. The example uses the same CSS classes as the initialization example.

```javascript
// get
var value = $( ".selector" ).recordView( "option", "formCssClasses" );
// set
$( ".selector" ).recordView( "option", "formCssClasses", "u-Form--labelsAbove u-Form--stretchInputs" );
```

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

### apex.item.create( pNd, pItemImpl ) - Full Example

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

Shows a call to apex.item.create with most available callbacks and properties passed to illustrate the syntax.

```APIDOC
## apex.item.create( pNd, pItemImpl )

### Description
Creates a new item plug-in instance with the specified callbacks and properties.

### Method
create

### Parameters
#### pNd (string) - Required - The item name (e.g., "P100_COMPANY_NAME").
#### pItemImpl (object or function) - Required - An object containing callbacks and properties, or a function that receives a base item object.

### Callbacks and Properties
- **item_type** (string) - The item type identifier.
- **displayValueFor** (function) - Returns the display value for a given value.
- **getPopupSelector** (function) - Returns a CSS selector for the popup.
- **getValidity** (function) - Returns an object with a `valid` boolean property.
- **getValidationMessage** (function) - Returns a validation message or empty string.
- **getValue** (function) - Returns the current value.
- **setValue** (function) - Sets the value and display value.
- **reinit** (function) - Reinitializes the item, returns a function for ajax calls.
- **disable** (function) - Disables the item.
- **enable** (function) - Enables the item.
- **isDisabled** (function) - Returns true if disabled.
- **show** (function) - Shows the item.
- **hide** (function) - Hides the item.
- **isChanged** (function) - Returns true if value changed.
- **addValue** (function) - Adds a value to the item.
- **nullValue** (string) - The null return value for the item.
- **setFocusTo** (jQuery object) - Element to set focus to.
- **setStyleTo** (jQuery object) - Element to set style to.
- **loadingIndicator** (function) - Adds a loading indicator.
- **storageType** (string) - Storage type (e.g., "separated").
- **separator** (string) - Separator character.

### Example
```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: ":"
});
```
```

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

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

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

Shows the full syntax of apex.item.create with most available callbacks and properties. It is unlikely any plug-in needs all of these, but this illustrates the structure.

```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: ":"
});
```

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

### getSelectedNodes() example: get nodes for current selection

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

Gets the data model nodes for the current selection using getSelectedNodes.

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

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

### Submit page with REQUEST, set items, and showWait using apex.submit alias

Source: https://docs.oracle.com/en/database/oracle/apex/24.2/aexjs/apex.page.html

Same as the previous example but uses the shorter alias apex.submit.

```javascript
apex.submit( {
    request: "DELETE",
    set: {
       "P1_DEPTNO": 10,
       "P1_EMPNO": 5433
    },
    showWait: true,
} );
```

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

### Get or set mapFeatures option

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

Shows how to get and set the mapFeatures option. The set example enables all map tools.

```javascript
// get
var value = apex.region( "myRegionId" ).mapFeatures;
// set
apex.region( "myRegionId" ).mapFeatures = {
    mousewheelZoom: true,
    scaleBar: true,
    circleTool: true,
    browserLocation: true,
    rectangleZoom: true,
    distanceTool: true,
    overviewMap: true,
    infiniteMap: true
};
```

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

### Initialize grid with progressOptions option

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

Initializes the grid with progressOptions set to null.

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

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

### apex.date.startOfDay

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

Function to get the start of the day for a date.

```APIDOC
## apex.date.startOfDay

### Description
Function to get the start of the day for a date.

### Method
- **startOfDay(date)** - Returns a date set to the first moment of the day.
```

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

### Initialize menu with menubar option

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

Shows how to initialize the menu with the menubar option set to true. This option can only be set at initialization time.

```javascript
$( ".selector" ).menu( {
    menubar: true
} );
```

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

### Get or set legend option

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

Shows how to get and set the legend option. The set example uses an object with position and title properties.

```javascript
// get
var value = apex.region( "myRegionId" ).legend;
// set
apex.region( "myRegionId" ).legend = { positon: "start", title: "My layers" };
```

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

### getSelection() example: get selected treeView node elements

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

Gets the current selected treeView node elements as a jQuery set using getSelection.

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

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

### start(pScopeName, pAction)

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

Call this function when a potentially long-running async process starts. It schedules the display of a progress indicator, which may be delayed or skipped if the process finishes quickly.

```APIDOC
## start(pScopeName, pAction)

### Description
Call this function when a potentially long-running async process starts. For each call to start with a given `pScopeName`, a corresponding call to finish with the same `pScopeName` must be made. Calls with different `pScopeName` arguments will not interfere with each other.

Multiple calls to start for the same `pScopeName` before any calls to finish is allowed but only the `pAction` from the first call is called at most once.

### Method
start

### Parameters
- **pScopeName** (string) - Required - A unique name for each unique progress indicator.
- **pAction** (function) - Required - A no argument function to call to display the progress indicator. This function may or may not be called depending on how quickly finish is called.

```

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

### getOption() example for hasTotalRecords

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

Gets the value of the hasTotalRecords model option using model.getOption().

```javascript
var hasTotalRecords = model.getOption( "hasTotalRecords" );
```

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

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

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

Writes to the console all shortcuts in the global context, displaying the shortcut display and 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 );
}
```

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

### getOption() example for onlyMarkForDelete

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

Gets the value of the onlyMarkForDelete model option using model.getOption().

```javascript
var markForDelete = model.getOption( "onlyMarkForDelete" );
```

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

### Show an action with apex.actions.show

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

Example from the show method documentation. Calls apex.actions.show with the action name 'send-email' to show its UI elements.

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

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

### Initialize menu with create callback

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

Initializes the menu with the create callback specified. The callback receives event and ui objects.

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

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

### getActions() example: invoke next-record action

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

Gets the actions context and invokes the 'next-record' action.

```javascript
var actions = $( ".selector" ).recordView( "getActions" );
actions.invoke( "next-record" );
```

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

### firstPage example: go to first page

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

Demonstrates calling the firstPage method on a grid element to display the first page of records.

```javascript
$( ".selector" ).grid( "firstPage" );
```

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

### Get and set customStyles property

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

Shows how to get or set the customStyles array, which defines custom SVG shapes for point markers. The set example includes a full SVG path 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"
           }
       ]
    }
];
```

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

### Create a simple iconList for selecting multiple items

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

Shows HTML markup and JavaScript initialization for a multi-select iconList. The HTML includes a list with items, and the JavaScript initializes the widget with the multiple option set to true.

```html
HTML:
<h3 id="iconsLabel">My Icons</h3>
<ul id="icons1" aria-labelledby="iconsLabel">
    <li data-value="b"><span class="fa fa-bus"></span><span class="label">Bus</span></li>
    <li class="is-selected" data-value="c"><span class="fa fa-car"></span><span class="label">Car</span></li>
    <li data-value="t"><span class="fa fa-taxi"></span><span class="label">Taxi</span></li>
    ...
</ul>
```

```javascript
JavaScript:
$("#icons1").iconList({
    multiple: true
});
```

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

### Get Cookie Value with apex.storage.getCookie

Source: https://docs.oracle.com/en/database/oracle/apex/24.2/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" );
```

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

### Initialize grid with entityTitlePlural option

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

Initializes the grid with the entityTitlePlural option set to "Customers".

```javascript
$( ".selector" ).grid( {
    entityTitlePlural: "Customers"
} );
```

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

### findContextById example

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

Returns the actions interface for a context given by the element id or APEX region id. The example shows how to get the actions for an Interactive Grid region with static id 'contactsIG' and compares it with the result of calling 'getActions' on the region.

```javascript
var igActions = apex.actions.findContextById( "contactsIG" );
igActions === apex.region( "contactsIG" ).call( "getActions" ) // true;
```

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

### apex.date.startOfDay example

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

Returns the start date of a day for a given date object. If pDate is omitted, it uses the current date and time.

```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/24.2/aexjs/grid.html

Initializes the grid with applyTemplateOptions, passing a placeholders object that enables the #TODAY# placeholder in templates. The options are passed to apex.util.applyTemplate.

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

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

### Get record field value using getRecordValue

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

Retrieves the value of the NAME field for the record with identity '00013'. This example is from the getRecordValue documentation.

```javascript
var name = model.getRecordValue( "00013", "NAME" );
```

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

### Initialize menu with asyncFetchMenu option

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

Shows how to initialize the menu with the asyncFetchMenu option, which is an optional callback to populate menu items asynchronously when the menu opens. The callback receives the menu and a callback function, and uses apex.server.process to fetch data.

```javascript
$( ".selector" ).menu( {
    asyncFetchMenu: function( menu, callback ) {
        var promise = apex.server.process( "MY_GET_MENU_ITEMS", ... );
        promise.done( function( data ) {
            // use data to populate menu.items
            menu.items = ...
            callback();
        }
    }
} );
```

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

### getScopedSessionStorage example: scoped sessionStorage with prefix

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

Creates a scoped sessionStorage wrapper using a prefix 'Acme' and the application id, then sets and gets an item 'setting1'. The example checks hasSessionStorageSupport first, though the documentation notes this check is not strictly necessary because the wrapper has no effect if unsupported.

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

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

### Initialize menu with beforeOpen callback

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

Initializes the menu with the beforeOpen callback specified. The callback receives event and ui objects.

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

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

### getScopedLocalStorage example: scoped localStorage with prefix

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

Creates a scoped localStorage wrapper using a prefix 'Acme' and the application id, then sets and gets an item 'setting1'. The example checks hasLocalStorageSupport first, though the documentation notes this check is not strictly necessary because the wrapper has no effect if unsupported.

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

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

### actions.listShortcuts

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

Lists all shortcuts.

```APIDOC
## actions.listShortcuts

### Description
Lists all shortcuts.

### Method
listShortcuts

### Parameters
None.

### Returns
- (Array<shortcutListItem>) - An array of shortcut list items.
```

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

### Initialize menu with menubarShowSubMenuIcon option

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

Shows how to initialize the menu with the menubarShowSubMenuIcon option set to true. This option only applies when the menubar option is true.

```javascript
$( ".selector" ).menu( {
    menubarShowSubMenuIcon: true
} );
```

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

### Initialize grid with columns option

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

Initializes the grid with a columns array, specifying column properties like NAME with heading, label, alignment, and more. The example uses a placeholder '....' to indicate additional columns.

```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
     },
     ....
 } ]
} );
```

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

### setValidity example

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

Calls checkRecord to get an error message or null, then sets the record validity to "error" with the message or "valid" if no error.

```javascript
var invalidReasonMessage = checkRecord( recordId );
if ( invalidReasonMessage ) {
    model.setValidity( "error", recordId, null, invalidReasonMessage );
} else {
    this.model.setValidity( "valid", recordId );
}
```

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

### getValidity() example: check validity and show validation message

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

Gets the item P1_ITEM, checks if it is valid using getValidity().valid, and if not, displays an alert with the validation message from getValidationMessage().

```javascript
var item = apex.item( "P1_ITEM" );
if ( !item.getValidity().valid ) {
    apex.message.alert( "Error: " + item.getValidationMessage() );
}
```

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

### Get selected values from iconList

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

Returns an array of selected values from the data-value attributes. If there is no selection, an empty array is returned. The example converts the array to a ":" separated string.

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

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

### Initialize grid with tooltip option

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

Initializes the grid with a custom tooltip content callback that receives extra arguments (callback, model, recordMeta, colMeta, columnDef). The callback should return the tooltip text.

```javascript
$( ".selector" ).grid( {
    tooltip: {
    content: function( callback, model, recordMeta, colMeta, columnDef ) {
        var text;
        // calculate the tooltip text
        return text;
    }
}
} );
```

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

### Initialize grid with contextMenu option

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

Initializes the grid with a contextMenu object containing two action items. 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 pagination option

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

Initializes the grid with the pagination option, setting showRange, showPageLinks, maxLinks, and firstAndLastButtons.

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

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

### getFieldKey() example

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

Gets the field key for the model field named "COST" and uses it in a loop over an array of records selectedRecords. The key is used to access the field directly without using model#getValue.

```javascript
var i, cost,
    costKey = model.getFieldKey("COST");
for ( i = 0; i < selectedRecords.length; i++ ) {
    cost = selectedRecords[i][costKey];
    // do something with cost
}
```

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

### getExpandedNodeIds() example: save expanded node IDs to page item

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

Gets expanded node IDs for an APEX Tree region with static id 'myTree' and saves them to page item P1_EXPANDED_IDS. Can be used on page submit or expansion state change.

```javascript
var expandedIds = apex.region( "myTree" ).call( "getExpandedNodeIds" );
$s( "P1_EXPANDED_IDS", expandedIds.join( ":" ) );
```

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

### Initialize menu with menubarOverflow option

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

Shows how to initialize the menu with the menubarOverflow option set to true. This option only applies when the menubar option is true.

```javascript
$( ".selector" ).menu( {
    menubarOverflow: true
} );
```

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

### apex.server.plugin call with x01, pageItems, and loading indicator

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

Example call to apex.server.plugin. Sets scalar value x01 to 'test' (accessible via apex_application.g_x01), sets page items P1_DEPTNO and P1_EMPNO in session state, uses P1_MY_LIST as the element for apexbeforerefresh/apexafterrefresh events and loading indicator. The success callback is stubbed for developer code. lAjaxIdentifier must be set to the value returned by apex_plugin.get_ajax_identifier.

```JavaScript
apex.server.plugin ( lAjaxIdentifier, {
    x01: "test",
    pageItems: "#P1_DEPTNO,#P1_EMPNO"
}, {
    refreshObject: "#P1_MY_LIST",
    loadingIndicator: "#P1_MY_LIST",
    success: function( data ) {
        // do something here
    }
} );
```

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

### apex.server.pluginUrl example

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

Returns a URL for a GET request to a PL/SQL Ajax function for a plug-in. Sets scalar value x01 to 'test' and includes page items P1_DEPTNO and P1_EMPNO in session state using jQuery selector syntax. lAjaxIdentifier must be set to the value returned by apex_plugin.get_ajax_identifier.

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

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

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

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

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

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

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

### Method
listShortcuts

### Parameters
- `pWithMarkup` (boolean) - Optional default is false. If true wrap the display name in HTML markup.

### Returns
An array of objects with information about the shortcut.

Type: Array.<actions.shortcutListItem>

### Example
```js
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 );
}
```
```

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

### Check PWA installability with apex.pwa.isInstallable()

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

Returns a Promise that resolves to a boolean indicating whether the current session is eligible for PWA installation. Detects browser install prompt availability, existing installation, PWA mode, and iOS/iPadOS Safari.

```javascript
const isInstallable = await apex.pwa.isInstallable();
```

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

### apex.pwa.openInstallDialog() - Trigger PWA installation dialog

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

Opens the installation dialog for installing the PWA. This function is automatically invoked when clicking elements with class .a-pwaInstall or via apex.actions action 'a-pwa-install'. Use this to trigger installation programmatically for a custom experience.

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

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

### Initialize grid with footer option

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

Initializes the grid with the footer option set to false.

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

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

### List all actions with apex.actions.list

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

Writes to the console a list of all actions in the global context, including label, name, and choice if defined.

```javascript
apex.actions.list().forEach(function(a) {
    console.log( "Action Label: " + a.label +
        ", Name: " + a.name +
        (a.choice !== undefined ? ", Choice: " + a.choice : "" ) );
});
```

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

### Get or set stickyFooter option after initialization

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

Shows how to get the current value of the stickyFooter option and set it to true. The get returns the current boolean value, and the set updates it.

```javascript
// get
var value = $( ".selector" ).derived-view( "option", "stickyFooter" );
// set
$( ".selector" ).derived-view( "option", "stickyFooter", true );
```

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

### Create a simple non-editable grid with two columns

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

Initializes a grid widget on #myGrid using a model created with apex.model.create. Only required options are provided; all others use defaults. The element with id myGrid is an empty div.

```javascript
var fieldDefinitions = {
    id: {
        index: 0,
        heading: "Id",
        seq: "1"
    },
    name: {
        index: 1,
        heading: "Name",
        seq: "2"
    }
};
var data = [
    ["1022", "Betty"],
    ["1023", "James"],
    ...
];
apex.model.create( "myModel", {
    recordIsArray: true,
    fields: fieldDefinitions
}, data );
$( "#myGrid" ).grid( {
    modelName: "myModel",
    columns: [  fieldDefinitions ]
} );
```

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

### Get or set stickyTop option after initialization

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

Shows how to get the current value of the stickyTop option and set it to true. The get returns the current value (boolean or function), and the set updates it.

```javascript
// get
var value = $( ".selector" ).derived-view( "option", "stickyTop" );
// set
$( ".selector" ).derived-view( "option", "stickyTop", true );
```
Tokens:
Raw