Canvas Data API

Canvas Data API provides a possibility to programmatically read and change field values from extensions. This API works with data from UI only and doesn't directly interact with AEM instance. However, the data manipulations done using this API may be auto-saved by UI itself.

Getting values from canvas

const api = await guestConnection.host.dataApi.get();
const fields = await api.getFields();
console.log(fields);
/**
 * [
 *   {
 *       "name": "test-textarea",
 *       "value": {
 *           "contentType": "text/html",
 *           "value": "<p>Text area content</p>"
 *       },
 *       "type": "text-multi",
 *       "isMultiField": false
 *   },
 *   {
 *       "name": "onelinetext",
 *       "value": "Test one line content",
 *       "type": "text-single",
 *       "isMultiField": false
 *   }
 * ]
 */

Setting new values

const api = await guestConnection.host.dataApi.get();
const fieldName = "test-field";
await api.setValue(fieldName, "New value");
//await api.setValue(fieldName, "New value", 0); - A last parameter specifies an index in multi-field values

Setting styles to the field

const api = await guestConnection.host.dataApi.get();
const fieldName = "test-field";
await api.setStyles(fieldName, {"display": "none"});
// Second parameter is the object that is used to pass the styles that will be applied on field

Consistency

guestConnection.host.dataApi.get() makes a snapshot of canvas data at the moment of invocation. Changes made by other extensions or direct users will not be automatically propagated to existing API instances. Consider calling this method multiple times during long-running processes to get fresh data.

API Reference

Field format

Field types