Combo Box

This component represents a combo box. The combo box allows users to select one of the predefined values.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

value (string)

Value of the field. See also Binding Form Component Attributes

options (array/string)

A list of possible values from which You can select one. A possible value must contain a value and a label (for display). Multilingual Labels are allowed. There are two ways to define the ComboBox options:

List: The list of options can be specified directly in the ComboBox definition.
String: A list from the state.data object. Passed via data binding.

Example without data binding

{
    "type": "combobox",
    "value": "/data/value",
    "label": "Selection",
    "options": [
        { "value": "foo", "label": { "de": "FOO_DE", "en": "FOO_EN" } },
        { "value": "bar", "label": { "de": "BAR_DE", "en": "BAR_EN" } }
    ]
}

Example

combobox.json

{
  "metaData": {
    "author": "Quan",
    "name": "Combo Box Form",
    "id": 999999,
    "version": 1
  },
  "configuration": {
    "defaultLanguage": "de"
  },
  "components": [
    {
      "layout": "vertical",
      "type": "container",
      "components": [
        {
          "type": "combobox",
          "value": "/data/selection",
          "label": {
            "de": "Auswahl",
            "en": "Selection"
          },
          "options": [
            { "value": "foo", "label": { "de": "FOO_DE", "en": "FOO_EN" } },
            { "value": "bar", "label": { "de": "BAR_DE", "en": "BAR_EN" } }
          ]
        },
        {
          "type": "combobox",
          "value": "/data/selection",
          "label": {
            "de": "Auswahl Binding",
            "en": "Selection Binding"
          },
          "options": "/data/options"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "options":  [
        { "value": "foo", "label": { "de": "FOO_DE", "en": "FOO_EN" } },
        { "value": "bar", "label": { "de": "BAR_DE", "en": "BAR_EN" } }
      ]
    },
    "language": "de"
  }
}

Embedded preview

Open preview in a separate window

Keywords: