Attribute von Formular-Komponenten binden

Verschiedene Attribute von Formular-Komponenten kann man an Daten im state binden. So kann z.B. der Wert einer Checkbox mit der Sichtbarkeit anderer Komponenten verknüpft werden.

Bei Attributen, die für das Binding vorgesehen sind, wird dies über einen String mit einem führenden Schrägstrich / signalisiert. Dieser wird dann wie ein JSON Pointer interpretiert.

Durch die Verwendung vom ! nach dem / können boolesche Werte negiert werden.

Beispiel

Das Beispiel zeigt das einfache Binden des Wertes für die beiden Textfelder. Außerdem wird anhand der Checkbox eine Zustimmung eingeholt. Diese wird an /data/consent/privacy gebunden.

Die beiden Button binden jeweils die Sichtbarkeit bzw. den Aktivitätszustand an diesen Wert. Dies hat zur Folge, dass einer der Buttons nicht sichtbar ist und der andere deaktiviert ist, wenn die Checkbox nicht angehakt ist.

binding.json

{
  "metaData": {
    "author": "Virtimo AG",
    "name": "Binding Example",
    "id": 1,
    "version": 1
  },
  "components": [
    {
      "layout": "vertical",
      "components": [

        {
          "id": "lastName",
          "label": {
            "de": "Nachname",
            "en": "Lastname"
          },
          "type": "textfield",
          "value": "/data/person/lastName"
        },
        {
          "id": "firstName",
          "label": {
            "de": "Vorname",
            "en": "Firstname"
          },
          "type": "textfield",
          "value": "/data/person/firstName"
        },
        {
          "id": "consent",
          "label": {
            "de": "OK?",
            "en": "O.K.?"
          },
          "type": "checkbox",
          "value": "/data/consent/privacy"
        },
        {
          "layout": "horizontal",
          "components": [

            {
              "action": "submit",
              "label": {
                "de": "Formular abschicken",
                "en": "submit form"
              },
              "type": "button",
              "hidden":"/!data/consent/privacy"
            },
            {
              "action": "submit",
              "label": {
                "de": "Formular abschicken",
                "en": "submit form"
              },
              "type": "button",
              "disabled":"/!data/consent/privacy"
            }
          ],
          "type": "container"
        }
      ],
      "type": "container"
    }
  ],
  "configuration": {
  },
  "state": {
    "data": {
      "person": {
        "firstName": "John",
        "lastName":"Doe"
      },
      "consent": {
        "privacy": false
      }
    },
    "language": "de"
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: