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.

propertytypedescriptionrequired
mainStringPath to the JavaScript file for the component. This file must exist and it should contain a customElements.define(...) call that defines the componentyes
versionStringThe version number of the component. Should be strictly increasing between deployments.yes
sheetSettingsObjectSettings for the sheet application type (i.e. device page or main page)yes * **
cardSettingsObjectSettings for the card application type (i.e. device overview cards)yes *
reportSettingsObjectSettings for the report application typeyes *
inputsArrayThe 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

* Including at least one of these settings is required to create a component for either a page (sheets), card, or report. By including all three settings, the component can be used on all of them.

** With sheetSettings, a component is always available for a device page. For a main page a manual action from IXON is required. Please specify if the component will be used on a main page in the request to create a new page component template. This is described in the support article Custom Components (point 4 of the process steps).

The manifest JSON can be validated against its schema.

Example file

A manifest file for a sticky note custom component on only a device page or main page 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"
    }
  ]
}