grapesjs/docs/api/datasources.md

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 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 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<DataSource>

getValue

Get value from data sources by path.

Parameters

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

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

setValue

Set value in data sources by path.

Parameters

• path String 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 Returns true if the value was set successfully

remove

Remove data source.

Parameters

• id (String | 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 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?] An array containing the data source, data record, and optional property path.

store

Store data sources to a JSON object.

Returns Array Stored data sources.

load

Load data sources from a JSON object.

Parameters

• data Object The data object containing data sources.

Returns Object Loaded data sources.