Combo Box

This component represents a Combo Box. The ComboBox 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 attributes of form components

options (array/string)

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

List: the list of options can be specified directly in the definition of the ComboBox.
String: a list from the state.data object. Is defined via Data binding

Example without data binding 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 separate window

Keywords: