Manifest file

A custom component must be defined by a manifest.json file placed in the root directory of the package that describes the component.

property

type

description

required

main

String

Path to the JavaScript file for the component. This file must exist and it should contain a customElements.define(...) call that defines the component

yes

version

String

The version number of the component. Should be strictly increasing between deployments.

yes

sheetSettings

Object

Settings for the sheet application type (i.e. device page or main page)

yes *

cardSettings

Object

Settings for the card application type (i.e. device overview cards)

yes *

inputs

Array

The inputs list describes all the inputs for the component, which eventually translate into component properties in the Studio. Inputs are for configuring the component on a page, for example the text that it should display or a data-source tag it should monitor.

yes

* Settings for at least one application type (sheet or card) are required, but supporting multiple types is optional.

The manifest JSON can be validated against its schema.

Example file

A manifest file for a sticky note custom component may look like this:

{
  "main": "sticky-note.js",
  "version": "1",
  "sheetSettings": {
    "defaultCols": 3,
    "defaultRows": 4,
    "minCols": 1,
    "minRows": 2
  },
  "inputs": [
    {
      "key": "text",
      "type": "Text",
      "label": "Note",
      "placeholder": "Enter text"
    },
    {
      "key": "color",
      "type": "Selection",
      "label": "Color",
      "options": [
        { "value": "#feff9c", "label": "Yellow (default)" },
        { "value": "#ff7eb9", "label": "Pink" },
        { "value": "#7afcff", "label": "Blue" },
        { "value": "#f49f3f", "label": "Orange" },
        { "value": "#a6efa6", "label": "Green" }
      ],
      "defaultValue": "#feff9c"
    }
  ]
}

Did this page help you?