Manifest file

A UI 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 *
reportSettings	Object	Settings for the report application type	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

* 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 UI 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 UI 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"
    }
  ]
}