Custom UI Control Meta Definition File

The meta definition file for a custom control lists the Javascript and CSS resources that the control requires.

Put the meta definition file in the following directory of the cartridge, or any arbitrary subdirectory within this directory:

The file name can include only alphanumeric or underscore characters. If you put the meta definition file into a subdirectory within the /experience/editors directory, the names of the levels in the subdirectory must also use only alphanumeric or underscore characters.

To view the schema file that describes the JSON formatting for the meta definition file, see Page Designer JSON Schemas.

This example meta definition file, named magical.json, describes a custom UI control that lets the user select a unicorn. You can use fully qualified URLs or relative URLs in the meta definition file. Page Designer resolves relative URLs to point to the/static/default directory of the cartridge. For example, this meta definition file uses relative URLs to reference a Javascript file, magical_editor.js, and a CSS file, magical.css, that are in the /static/default/experience/editors/com/sfcc directory of the cartridge.

magical.json
{
  "name": "Magical Custom Editor",
  "description": "A new magical editor with flying unicorns!",
  "resources": {
    "scripts": [
      "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js",
      "/experience/editors/com/sfcc/magical_editor.js"
    ],
    "styles": [
      "https://cdnjs.cloudflare.com/ajax/libs/design-system/2.8.3/styles/salesforce-lightning-design-system.min.css",
      "/experience/editors/com/sfcc/magical.css",
    ]
  }
}