Passing data to Design Editor

Instead of using the ProductTemplates and PublicGallery folders in the Design Editor, you can manage the assets through the Asset Storage API and share them among several tenants. In Connecting Design Editor to Asset Storage, you have already learned how to configure the Design Editor to use assets from the BackOffice storage. Now, let's look at how you can pass them into the editor.

Loading a Product Template

To load a product template from the BackOffice storage into the Design Editor, you can pass the ID of this template in the scope of the BackOffice as the product definition.

const product = "5f5f26d2c97af828274ee054";
const config = {
    userInfo: {
        "Name": "John Wood",
        "Position": "Manager"
    }
};
 
const editor = await CustomersCanvas.IframeApi.loadEditor(document.getElementById("cc"), product, config);

To obtain the product identifiers, you can use the AssetStorage API and send the GET request to api/storage/v1/designs/folders endpoint. If you have installed it at https://example.com/, make the following request:

curl -X GET "http://example.com/api/storage/v1/designs/folders?fullPath=Invitations&tenantId=2"
     -H  "accept: text/plain"
     -H  "X-API-Key: ApiKey"

As a result, you can get the following response when a tenant has a design in the Invitations subfolder.

Status Code: 200 OK
Content:
{
  "id": null,
  "folders": [],
  "entities": [
    {
      "customFields": {},
      "metadata": {
        "surfaces": []
      },
      "hasProblems": false,
      "private": false,
      "previews": {},
      "size": 1308258,
      "folderId": null,
      "tenantId": 2,
      "id": "5fb3f880a80411dae6b485bf",
      "ownerId": "UnidentifiedUser",
      "name": "BBQInvitation",
      "lastModified": "2020-11-17T16:21:19.9594908+00:00"
    }
  ],
  "entitiesCount": 1
}

To load this design into the editor, you must use its ID 5fb3f880a80411dae6b485bf as a product definition.

Loading Fonts

When you define <add key="AssetStorageFonts" value="true" />, then the Design Editor will use fonts from the asset storage. You can limit the font list as well as for the local assets:

const product = "...";
const config = {
    fontList: [
        "ArialMT",
        "Orbitron-Black"
    ],
    ...
};
 
var editor = await CustomersCanvas.IframeApi.loadEditor(document.getElementById("cc"), product, config);

To obtain PostScript names, you can send GET request to api/storage/v1/fonts endpoint.

curl -X GET "http://example.com/api/storage/v1/fonts?includeSubfolders=false&tenantId=2"
     -H  "accept: text/plain"
     -H  "X-API-Key: ApiKey"

As a result, you can get the following response:

{
  "total": 2,
  "items": [
    {
      "metadata": {
        "postscriptName": "ArialMT",
        "family": "Arial",
        "style": "Regular"
      },
      "previews": {},
      "size": 1040384,
      "folderId": null,
      "tenantId": 2,
      "id": "5fbfb974c914e1f080c936e7",
      "ownerId": "UnidentifiedUser",
      "name": "arial",
      "lastModified": "2020-11-17T14:19:32.1930115+00:00"
    },
    {
      "metadata": {
        "postscriptName": "Orbitron-Black",
        "family": "Orbitron",
        "style": "Black"
      },
      "previews": {},
      "size": 47256,
      "folderId": null,
      "tenantId": 2,
      "id": "5fbf9c89c914e1f080c936dd",
      "ownerId": "UnidentifiedUser",
      "name": "orbitron",
      "lastModified": "2020-11-17T12:16:09.0570839+00:00"
    }
  ]
}

To enable a font in the editor, you must add the value of its property metadata.postscriptName to the fontList array.

Initializing the Image Gallery

When you define <add key="AssetStoragePublicGallery" value="true" />, then the Design Editor will use the Images section of BackOffice assets as PublicGalleryFolder.

const product = "...";
const config = {
  assetSources: {
    Clipart: {
      type: "PublicSource",
      rootCategory: {
        name: "Clipart/Food"
      }
    }
  },
  widgets: {
    AssetManager: {
      tabs: [{
        name: "Clipart",
        assetSourceInstance: "Clipart",
        controls: {
          categoriesEnabled: true,
          assetNameEnabled: false,
          toolbarEnabled: false
        }
      }]
    },
    Toolbox: {
      buttons: [{
        action: "Image",
        iconClass: "cc_icon_clipart",
        tabs: [ "Clipart" ]},
          ...
      ]
    }
  }
};

var editor = await CustomersCanvas.IframeApi.loadEditor(document.getElementById("cc"), product, config);

---

In the API Reference, you can find details about the AssetStorage API, AssetProcessor API, and DesignAtoms API.