Combo Box

Diese Komponenten stellt eine Combo Box dar. Die ComboBox ermöglicht den Anwendern, einen von den vorgegebenen Werten auszuwählen.

Konfiguration

Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.

Spezifische Konfiguration

value (string): Wert des Feldes. Siehe auch Attribute von Formular-Komponenten binden
options (array/string): Eine Liste der möglichen Werten, aus denen der Anwender einen Wert auswählen kann. Ein möglicher Wert muss einen value und ein label (für die Anzeige) enthalten. Mehrsprachige Labels sind erlaubt.

Es sind zwei Möglichkeiten, um die Optionen der ComboBox zu definieren:

Liste: direkt an der Definition der ComboBox lässt sich die Liste von Optionen angeben.

Konkretes Beispiel

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

String: eine Liste aus dem state.data Objekt kann in den Optionen angebunden werden. Siehe auch Attribute von Formular-Komponenten binden.

Konkretes Beispiel

{
    "type": "combobox",
    "value": "/data/value",
    "label": "Selection",
    "options": "/data/selections"
}

Beispiel

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

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: