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.

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"