To provide configuration options for your Apps, you need to define your configuration options in a specific syntax. This way, the UI can present an input form to the end user so that he or she can properly edit the configuration options.

Your configuration options are stored in a single JSON value. You need to define the JSON Schema for your configuration options. The schema is based on the Backbone Forms Schema, but keep in mind that the syntax should be a valid JSON (e.g. keys, should be strings, and no JS code can be used).

Basic Syntax

The JSON Schema is basically a JSON object. An empty JSON object, like { }, means that your App does not provide any configuration options.

If you want to provide configuration options, then the “schema” key is required. 

The “schema” key provides all the details for your configuration options, as well as validations and titles. 

If you want to present your configuration options in a specific order, then you also need to specify the “fields” key and include all configuration options as defined in the “schema” in the order you need to present them.

Here is a quick example, based on our Simple Clock tutorial:

schema.json
{
  "fields": [
    "clock_font_size",
    "use_seconds"
  ],
  "schema": {
    "clock_font_size": {
      "editorAttrs": {
        "max": 999,
        "min": 1,
        "step": 1
      },
      "title": "Clock Font Size",
      "type": "Number",
      "validators": [
        "required",
        "number"
      ]
    },
    "use_seconds": {
      "title": "Use Seconds",
      "type": "Checkbox"
    }
  }
}

UI Form Fields Reference

all_fields.json
{
  "schema": {
    "my List": {
      "itemType": "Object",
      "subSchema": {
        "street": {
          "type": "Text"
        },
        "zip": {
          "type": "Number"
        }
      },
      "title": "My List",
      "type": "List"
    },
    "my_boolean" :{
      "title": "My Boolean",
			"type":"Boolean",
			"help":"boolean help"
    },
    "my_Checkbox": {
      "title": "my checkbox",
      "type": "Checkbox"
    },
    "my_Checkboxes": {
      "options": [
        "Paris",
        "Beijing"
      ],
      "title": "my Checkboxes",
      "type": "Checkboxes"
    },
    "my_Date": {
      "title": "my Date",
      "type": "Date",
      "yearEnd": 2020,
      "yearStart": 1920
    },
    "my_DateTime": {
      "minsInterval": 5,
      "title": "my DateTime",
      "type": "DateTime",
      "yearEnd": 2020,
      "yearStart": 1920
    },
    "my_Number": {
      "editorAttrs": {
        "max": 999,
        "min": -999,
        "step": 0.1
      },
      "title": "my Number",
      "type": "Number",
      "validators": [
        "required",
        "number"
      ]
    },
    "my_Password": {
      "title": "my Password",
      "type": "Password",
      "validators": [
        "required"
      ]
    },
    "my_Radio": {
      "options": [
        "Paris",
        "Beijing"
      ],
      "title": "my Radio",
      "type": "Radio"
    },
    "my_Select": {
      "options": [
        {
          "label": "Paris",
          "val": "Paris"
        },
        {
          "label": "Beijing",
          "val": "Beijing"
        }
      ],
      "title": "my Select",
      "type": "Select"
    },
    "my_Select2": {
      "editorClass": "select2container",
      "options": [
        {
          "label": "Athens",
          "val": "Athens"
        }
      ],
      "select2options": {
        "data": [
          {
            "id": "Paris",
            "text": "Paris"
          },
          {
            "id": "Beijing",
            "text": "Beijing"
          }
        ]
      },
      "title": "my Select2",
      "type": "Select2"
    },
    "my_Spinner": {
      "editorAttrs": {
        "max": 999,
        "min": -999,
        "step": 0.1
      },
      "title": "my Spinner",
      "type": "Spinner"
    },
    "my_Text": {
      "help": "text help",
      "title": "my text",
      "type": "Text",
      "validators": [
        "required"
      ]
    },
    "my_TextArea": {
      "title": "my TextArea",
      "type": "TextArea"
    },
    "my_object": {
      "subSchema": {
        "street": {
          "type": "Text"
        },
        "zip": {
          "type": "Number"
        }
      },
      "title": "My Object",
      "type": "Object"
    },
    "my_wysiwyg": {
      "editorAttrs": {
        "toolbar": [
          "font",
          null,
          "fontSize",
          null,
          "foreColor",
          null,
          {
            "className": "btn-info",
            "name": "bold"
          },
          {
            "className": "btn-info",
            "name": "italic"
          },
          {
            "className": "btn-info",
            "name": "strikethrough"
          },
          {
            "className": "btn-info",
            "name": "underline"
          },
          null,
          {
            "className": "btn-success",
            "name": "insertunorderedlist"
          },
          {
            "className": "btn-success",
            "name": "insertorderedlist"
          },
          {
            "className": "btn-purple",
            "name": "outdent"
          },
          {
            "className": "btn-purple",
            "name": "indent"
          },
          null,
          {
            "className": "btn-primary",
            "name": "justifyleft"
          },
          {
            "className": "btn-primary",
            "name": "justifycenter"
          },
          {
            "className": "btn-primary",
            "name": "justifyright"
          },
          {
            "className": "btn-inverse",
            "name": "justifyfull"
          },
          null,
          "backColor",
          null,
          {
            "className": "btn-grey",
            "name": "undo"
          },
          {
            "className": "btn-grey",
            "name": "redo"
          },
          "viewSource"
        ]
      },
      "title": "",
      "type": "wysiwyg"
    },
    "rgba_color": {
      "title": "Background Color",
      "type": "SpectrumColorPicker"
    }
  }
}