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 gibt 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.
String: eine Liste aus dem state.data Objekt. Wird per Data-Binding übergeben.

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

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: