Final Class: MutableArrayDataProvider

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Since:
  • 4.1.0
Module:
  • ojmutablearraydataprovider

QuickNav

Fields

Methods

Type Definitions

Description

This class implements DataProvider. Object representing data available from an array. This dataprovider can be used by ListView, NavigationList, TabBar, and Table.

See the MutableArrayDataProvider and Table - Base Table demos for examples.

The default sorting algorithm used when a sortCriteria is passed into fetchFirst is natural sort.

Events

Consumers can add event listeners to listen for the following event types and respond to data change.

mutate

This event is fired when items have been added or removed from the data.

Event payload is found under event.detail, which implements the DataProviderMutationEventDetail interface.

refresh

This event is fired when the data has been refreshed and components need to re-fetch the data.

This event contains no additional event payload.

Example of consumer listening for the "mutate" event type: 
let listener = function(event) {
  if (event.detail.remove) {
    const removeDetail = event.detail.remove;
    // Handle removed items
  }
};
dataProvider.addEventListener("mutate", listener);


Usage

Signature:

final class MutableArrayDataProvider<K, D> implements DataProvider<K, D>

Typescript Import Format
//This class is exported directly as module. To import it
import MutableArrayDataProvider= require("ojs/ojmutablearraydataprovider");

For additional information visit:


Final classes in JET

Classes in JET are generally final and do not support subclassing. At the moment, final is not enforced. However, this will likely change in an upcoming JET release.


Constructor

new MutableArrayDataProvider(data, options)

Parameters:
Name Type Argument Description
data Array <optional>
 data supported by the components.

If the data array is frozen, it will be used by MutableArrayDataProvider directly. If it is not frozen, MutableArrayDataProvider will make a shallow copy and use the copy. Mutations to the original array will not be reflected in MutableArrayDataProvider. The only way to mutate the data in MutableArrayDataProvider is by setting the "data" property to another array.

options MutableArrayDataProvider.Options.<D> <optional>
 Options for the ArrayDataProvider
Example
// First initialize an array
let deptArray = [{DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200},
                 {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200},
                 {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200}];
// Then create an MutableArrayDataProvider object with the array
let dataprovider = new MutableArrayDataProvider(deptArray, {keyAttributes: 'DepartmentId'});

Fields

data

The underlying data array.

Applications can get and set this property directly, such as setting it to a different array.

The array returned by the "data" property is frozen. Applications cannot call array mutation methods such as splice or push on "data" directly. Applications need to make a copy of the array, mutate the copy, and set it back into the "data" property.

When setting this property, MutableArrayDataProvider will shallow compare the new data array with the existing data array to determine if it can fire "mutate" event with add/remove/update details. It will fire the "refresh" event if it cannot make that determination (e.g. if the two arrays are vastly different.)

Properties:
Name Type
data Array.<D>
Since:
  • 10.0.0

Methods

addEventListener(eventType: string, listener: EventListener): void

Add a callback function to listen for a specific event type.
Parameters:
Name Type Description
eventType string The event type to listen for.
listener EventListener The callback function that receives the event notification.

containsKeys(parameters : FetchByKeysParameters<K>) : Promise<ContainsKeysResults<K>>

Check if there are rows containing the specified keys. The resulting key map will only contain keys which were actually found.
Parameters:
Name Type Description
parameters FetchByKeysParameters contains by key parameters
Since:
  • 4.2.0
Returns:

Returns Promise which resolves to ContainsKeysResults.

Type
Promise.<ContainsKeysResults>
Example

Check if keys 1001 and 556 are contained

let keySet = new Set();
keySet.add(1001);
keySet.add(556);

let value = await dataprovider.containsKeys({keys: keySet});
let results = value['results'];
if (results.has(1001)) {
  console.log('Has key 1001');
} else if (results.has(556)) {
  console.log('Has key 556');
}

createOptimizedKeyMap(initialMap?: Map<K, D>): Map<K, D>

Return an empty Map which is optimized to store key value pairs

Optionally provided by certain DataProvider implementations for storing key/value pairs from the DataProvider in a performant fashion. Sometimes components will need to temporarily store a Map of keys provided by the DataProvider, for example, in the case of maintaining a Map of selected keys. Only the DataProvider is aware of the internal structure of keys such as whether they are primitives, Strings, or objects and how to do identity comparisons. Therefore, the DataProvider can optionally provide a Map implementation which can performantly store key/value pairs surfaced by the DataProvider.

Parameters:
Name Type Argument Description
initialMap Map.<any> <optional>
 Optionally specify an initial map of key/values for the Map. If not specified, then return an empty Map.
Since:
  • 6.2.0
Returns:

Returns a Map optimized for handling keys from the DataProvider.

Type
Map.<any>
Example

create empty key Map

// create optional parameter
let initMap = new Map();
initMap.set('a', 'apple');
let keyMap = dataprovider.createOptimizedKeyMap(initMap);

createOptimizedKeySet(initialSet?: Set<K>): Set<K>

Return an empty Set which is optimized to store keys

Optionally provided by certain DataProvider implementations for storing keys from the DataProvider in a performant fashion. Sometimes components will need to temporarily store a Set of keys provided by the DataProvider, for example, in the case of maintaining a Set of selected keys. Only the DataProvider is aware of the internal structure of keys such as whether they are primitives, Strings, or objects and how to do identity comparisons. Therefore, the DataProvider can optionally provide a Set implementation which can performantly store keys surfaced by the DataProvider.

Parameters:
Name Type Argument Description
initialSet Set.<any> <optional>
 Optionally specify an initial set of keys for the Set. If not specified, then return an empty Set.
Since:
  • 6.2.0
Returns:

Returns a Set optimized for handling keys from the DataProvider.

Type
Set.<any>
Example

create empty key Set

// create optional initial parameter
let initSet = new Set();
initSet.add('a');
let keySet = dataprovider.createOptimizedKeySet(initSet);

dispatchEvent(evt: Event): boolean

Dispatch an event and invoke any registered listeners.
Parameters:
Name Type Description
event Event The event object to dispatch.
Returns:

Return false if a registered listener has cancelled the event. Return true otherwise.

Type
boolean

fetchByKeys(parameters : FetchByKeysParameters<K>) : Promise<FetchByKeysResults<K, D>>

Fetch rows by keys. The resulting key map will only contain keys which were actually found. Fetch can be aborted if an AbortSignal is specified when calling fetchByKeys.
Parameters:
Name Type Description
parameters FetchByKeysParameters fetch by key parameters
Since:
  • 4.2.0
Returns:

Returns Promise which resolves to FetchByKeysResults.

Type
Promise.<FetchByKeysResults>
Examples

Fetch for keys 1001 and 556

let keySet = new Set();
keySet.add(1001);
keySet.add(556);

let value = await dataprovider.fetchByKeys({keys: keySet});
// get the data for key 1001
console.log(value.results.get(1001).data);

How to abort fetchByKeys

// 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
}
// 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();
}

fetchByOffset(parameters: FetchByOffsetParameters<D>): Promise<FetchByOffsetResults<K, D>>

Fetch rows by offset. Fetch can be aborted if an AbortSignal is specified when calling fetchByOffset.

A generic implementation of this method is available from FetchByOffsetMixin. It is for convenience and may not provide the most efficient implementation for your data provider. Classes that implement the DataProvider interface are encouraged to provide a more efficient implementation.

Parameters:
Name Type Description
parameters FetchByOffsetParameters fetch by offset parameters. If an unsupported matchBy value is included in FetchByOffsetParameters, an error will be thrown.
Since:
  • 4.2.0
Returns:

Returns Promise which resolves to FetchByOffsetResults.

Type
Promise.<FetchByOffsetResults>
Examples

Fetch by offset 5 rows starting at index 2

let result = await dataprovider.fetchByOffset({size: 5, offset: 2});
let results = result['results'];
let data = results.map(function(value) {
  return value['data'];
});
let keys = results.map(function(value) {
  return value['metadata']['key'];
});

How to abort fetchByOffset

// abort on an AbortController instance will abort all requests that are associated
// with the signal from that abortController.
const abortController = new AbortController();
// component passes AbortSignal as part of FetchByOffsetParameters to fetchByOffset
// on dataProvider

try {
 let value = await dataprovider.fetchByOffset({
                 size: 5,
                 offset: 2,
                 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
}
// 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();
}

fetchFirst(parameters?: FetchListParameters<D>): AsyncIterable<FetchListResult<K, D>>

Get an AsyncIterable object for iterating the data. Iterating data on this AsyncIterable object can be aborted if an AbortSignal is specified when getting this AsyncIterable object.

AsyncIterable contains a Symbol.asyncIterator method that returns an AsyncIterator. AsyncIterator contains a “next” method for fetching the next block of data.

The "next" method returns a promise that resolves to an object, which contains a "value" property for the data and a "done" property that is set to true when there is no more data to be fetched. The "done" property should be set to true only if there is no "value" in the result. Note that "done" only reflects whether the iterator is done at the time "next" is called. Future calls to "next" may or may not return more rows for a mutable data source.

In order for JET components to work correctly, DataProvider implementations should ensure that:

  • The iterator accounts for data mutations when returning the next block of data, and that no row is duplicated or skipped. For example, an offset-based implementation may need to adjust the offset from which the next block of data starts if rows have been added or removed in the returned data.
  • JET components may call "next" on the iterator even after the iterator has returned done:true. If new data is available after the last returned row, the iterator is expected to return the new data and set "done" to false. This differs from the AsyncIterator spec for performance reasons.

Please see the DataProvider documentation for more information on custom implementations.

Parameters:
Name Type Argument Description
params FetchListParameters <optional>
 fetch parameters. If an unsupported matchBy value is included in FetchListParameters, an error will be thrown.
Since:
  • 4.2.0
See:
Returns:

AsyncIterable with FetchListResult

Type
AsyncIterable.<FetchListResult>
Examples

Get an asyncIterator and then fetch first block of data by executing next() on the iterator. Subsequent blocks can be fetched by executing next() again.

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

How to abort fetchFirst

// abort on an AbortController instance will abort all requests that are associated
// with the signal from that abortController.
const abortController = new AbortController();
// component passes AbortSignal as part of FetchListParameters to fetchFirst
// on dataProvider to get an iterator that carries AbortSignal in it.
const asyncIterator = dataprovider
       .fetchFirst({
          size: this.size,
          signal: abortController.signal,
           ...
        })[Symbol.asyncIterator]();
try {
 const result = await asyncIterator.next();
} catch (err) {
 // if the data fetch has been aborted, retrieving data from the fetched result
 // will be rejected with DOMException named AbortError
}
// 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();
}

getCapability(capabilityName: string): any

Determines whether this DataProvider defines a certain feature.
Parameters:
Name Type Description
capabilityName string capability name. Defined capability names are: "dedup", "eventFiltering", "fetchByKeys", "fetchByOffset", "fetchCapability", "fetchFirst", "filter", and "sort".
Since:
  • 4.2.0
Returns:

capability information or null if undefined

Type
Object
Example

Check what kind of fetchByKeys is defined.

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

getTotalSize : {Promise.<number>}

Return the total number of rows in this dataprovider
Returns:

Returns a Promise which resolves to the total number of rows. -1 is unknown row count.

Type
Promise.<number>
Example

Get the total rows

let value = await dataprovider.getTotalSize();
if (value === -1) {
  // we don't know the total row count
} else {
  // the total count
  console.log(value);
}

isEmpty(): 'yes' | 'no' | 'unknown'

Returns a string that indicates if this data provider is empty. Valid values are:
  • "yes": this data provider is empty.
  • "no": this data provider is not empty.
  • "unknown": it is not known if this data provider is empty until a fetch is made.
Since:
  • 4.2.0
Returns:

string that indicates if this data provider is empty

Type
"yes" | "no" | "unknown"
Example

Check if empty

let isEmpty = dataprovider.isEmpty();
console.log('DataProvider is empty: ' + isEmpty);

removeEventListener(eventType: string, listener: EventListener): void

Remove a listener previously registered with addEventListener.
Parameters:
Name Type Description
eventType string The event type that the listener was registered for.
listener EventListener The callback function that was registered.

Type Definitions

Options<D>

Properties:
Name Type Argument Description
implicitSort Array.<SortCriterion.<D>> <optional>
 Optional array of SortCriterion used to specify sort information when the data loaded into the dataprovider is already sorted. This is used for cases where we would like display some indication that the data is already sorted. For example, ojTable will display the column sort indicator for the corresponding column in either ascending or descending order upon initial render. This option is not used for cases where we want the MutableArrayDataProvider to apply a sort on initial fetch. For those cases, please wrap in a ListDataProviderView and set the sortCriteria property on it.
keyAttributes string | string[] <optional>
 Optionally the field name which stores the key in the data. Can be a string denoting a single key attribute or an array of strings for multiple key attributes. Please note that the ids in MutableArrayDataProvider must always be unique. Please do not introduce duplicate ids, even during temporary mutation operations. @index causes MutableArrayDataProvider to use index as key and @value will cause MutableArrayDataProvider to use all attributes as key. @index is the default.
sortComparators MutableArrayDataProvider.SortComparators.<D> <optional>
 Optional sortComparator for custom sort.

Sort follows JavaScript's localeCompare {numeric: true}. Please check String.prototype.localeCompare() for details.

For numbers, we convert them into strings then compare them with localeCompare, which may not sort floating point numbers based on their numeric values. If you want to sort floating point numbers based on their numeric values, sortComparator can be used to do a custom sort.

For undefined and null values, they are considered as the largest values during sorting. For an empty string, it is considered as the smallest value during sorting.

textFilterAttributes string[] <optional>
 Optionally specify which attributes the filter should be applied on when a TextFilter filterCriteria is specified. If this option is not specified then the filter will be applied to all attributes.
Examples

Examples for sortComparator

// Custom comparator for date
let comparator = function (a, b) {
   if (a === b) {
     return 0;
   }

   let dateA = new Date(a).getTime();
   let dateB = new Date(b).getTime();
   return dateA > dateB ? 1 : -1;
};
// Then create an MutableArrayDataProvider object and set Date field to use the this comparator
this.dataprovider = new MutableArrayDataProvider(JSON.parse(deptArray), {
   keyAttributes: "DepartmentId",
   sortComparators: { comparators: new Map().set("Date", comparator) },
});
// Custom comparator for number
let comparator = function (a, b) {
   return a - b;
 };
// Then create an MutableArrayDataProvider object and set Salary field to use the this comparator
this.dataprovider = new MutableArrayDataProvider(JSON.parse(deptArray), {
   keyAttributes: "DepartmentId",
   sortComparators: { comparators: new Map().set("Salary", comparator) },
});

SortComparators<D>

Properties:
Name Type Description
comparators Map<keyof D, (a: any, b: any) => number> Sort comparators. Map of attribute to comparator function.