Manifest file

Everything you need to know about the UI Component's "blueprint".

Definition

Every UI Component has a manifest.json file. It consists of the component's "instruction sheet": It decides how the component should be laid out on the screen and what information it can accept.

This file is found in the main folder of the UI Component's project, and you don't have to create one from scratch: a ready-made starting version is already included when you open the UI Component's workspace.

Manifest file's properties

In this section you can find the possible strings or objects that can be used to customize the UI Component's main structure:

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 (see note below)
cardSettings	Object	Settings for the card application type (i.e. device overview cards)	Yes (see note below)
reportSettings	Object	Settings for the report application type (i.e. the size of a report)	Yes (see note below)
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 (if no inputs are used, leave the array empty)

👍
Note: The component's structure
Including at least one of these settings (sheetSettings, cardSettings or reportSettings) is required to create a component for either a page (sheets), card, or report. It is necessary to instruct the SDK to give it a structure. By including all three settings, the component can be used on all of them.

🚧
Pay attention to the manifest.json's structure!
The IXON UI Component's SDK manifest JSON can be validated against its schema, where you can check if your manifest.json file follows the correct structure.

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