GrapesJS

# DataSources

This module manages data sources within the editor. Once the editor is instantiated, you can use the following API to manage data sources:

const editor = grapesjs.init({ ... });
const dsm = editor.DataSources;

# Available Events

data:add Added new data source.

editor.on('data:add', (dataSource) => { ... });

data:remove Data source removed.

editor.on('data:remove', (dataSource) => { ... });

data:update Data source updated.

editor.on('data:update', (dataSource, changes) => { ... });

data:path Data record path update.

editor.on('data:path:SOURCE_ID.RECORD_ID.PROP_NAME', ({ dataSource, dataRecord, path }) => { ... });
editor.on('data:path', ({ dataSource, dataRecord, path }) => {
 console.log('Path update in any data source')
});

data:pathSource Data record path update per source.

editor.on('data:pathSource:SOURCE_ID', ({ dataSource, dataRecord, path }) => { ... });

data:provider:load Data source provider load.

editor.on('data:provider:load', ({ dataSource, result }) => { ... });

data:provider:loadAll Load of all data source providers (eg. on project load).

editor.on('data:provider:loadAll', () => { ... });

data Catch-all event for all the events mentioned above.

editor.on('data', ({ event, model, ... }) => { ... });

DataSourcesEventCallback

# Methods

add - Add a new data source.
get - Retrieve a data source by its ID.
getAll - Retrieve all data sources.
remove - Remove a data source by its ID.
clear - Remove all data sources.

# add

Add new data source.

# Parameters

props Object (opens new window) Data source properties.
opts AddOptions (optional, default {})

# Examples

const ds = dsm.add({
 id: 'my_data_source_id',
 records: [
   { id: 'id1', name: 'value1' },
   { id: 'id2', name: 'value2' }
 ]
});

Returns DataSource Added data source.

# get

Get data source.

# Parameters

id String (opens new window) Data source id.

# Examples

const ds = dsm.get('my_data_source_id');

Returns DataSource Data source.

# getAll

Return all data sources.

# Examples

const ds = dsm.getAll();

Returns Array (opens new window)<DataSource>

# getValue

Get value from data sources by path.

# Parameters

path String (opens new window) Path to value.
defValue any Default value if the path is not found.
opts {context: Record<string (opens new window), any>?}?

Returns any const value = dsm.getValue('ds_id.record_id.propName', 'defaultValue');

# setValue

Set value in data sources by path.

# Parameters

path String (opens new window) Path to value in format 'dataSourceId.recordId.propName'
value any Value to set

# Examples

dsm.setValue('ds_id.record_id.propName', 'new value');

Returns Boolean (opens new window) Returns true if the value was set successfully

# remove

Remove data source.

# Parameters

id (String (opens new window) | DataSource) Id of the data source.
opts RemoveOptions?

# Examples

const removed = dsm.remove('DS_ID');

Returns DataSource Removed data source.

# fromPath

Retrieve a data source, data record, and optional property path based on a string path. This method parses a string path to identify and retrieve the corresponding data source and data record. If a property path is included in the input, it will also be returned. The method is useful for accessing nested data within data sources.

# Parameters

path String (opens new window) The string path in the format 'dataSourceId.recordId.property'.

# Examples

const [dataSource, dataRecord, propPath] = dsm.fromPath('my_data_source_id.record_id.myProp');
// e.g., [DataSource, DataRecord, 'myProp']

Returns [DataSource?, DataRecord?, String (opens new window)?] An array containing the data source, data record, and optional property path.

# store

Store data sources to a JSON object.

Returns Array (opens new window) Stored data sources.

# load

Load data sources from a JSON object.

# Parameters

data Object (opens new window) The data object containing data sources.

Returns Object (opens new window) Loaded data sources.

← Parser ‍ ‍ ‍ DataSource →