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. Falls in einem String Binding verwendet wird, wird der gesamte String entsprechend interpretiert. Das heißt, dass wenn andere Parameter, wie Strings, damit kombiniert werden sollen, muss das entsprechend der JavaScript Syntax gemacht werden. Die nachfolgenden Beispiele zeigen dies im Detail.

Es ist sinnvoll den Wert einer Komponente zu binden um Fehler zu vermeiden. Gerade wenn man Strings mit / verwendet, können diese ungeplant als Bind-String interpretiert werden.

Beispiel

bindingSlash.json

{
  "$schema": "http://bpc.virtimo.net/forms/1/schema",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "/ Example",
      "components": [
        {
          "type": "html",
          "value": "/data/important/text"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "important": {
        "text": "m/w/d wird als Bind-String interpretiert, falls dies bei 'value' steht. Daher sollte Text mit / immer im state sein, wie bei diesem Beispiel."
      }
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Verknüpfung von Bind-Referenzen

Außerdem ist es möglich, mehrere Bind-Referenzen in einem Bind-String zu verwenden.

Beispiel mehrere Booleans

Zum Beispiel können boolesche Werte mit ! negiert werden oder mit && verknüpft werden.

bindingBoolean.json

{
  "$schema": "http://bpc.virtimo.net/forms/1/schema",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "Connecting Boolean Values Example",
      "components": [
        {
          "type": "container",
          "label": "Show this Container While Not Consented fully",
          "hidden": "/data/consentA && /data/consentB",
          "components": [
            {
              "type": "checkbox",
              "label": "Consent to a",
              "value": "/data/consentA"
            },
            {
              "type": "checkbox",
              "label": "Consent to b",
              "value": "/data/consentB"
            }
          ]
        },
        {
          "type": "container",
          "label": "Show this Container If Consented completely",
          "hidden": "!/data/consentA || !/data/consentB",
          "components": [
            {
              "type": "html",
              "value": "Success"
            }
          ]
        }
      ]
    }
  ],
  "state": {
    "data": {
      "consentA": false,
      "consentB": false
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Beispiel mehrere Strings

Strings können mit + konkateniert werden. Für Text innerhalb vom value ist es notwendig, dass dieser in ' eingeschlossen ist, wenn dieser mit Binding kombiniert wird.

bindingString.json

{
  "$schema": "http://bpc.virtimo.net/forms/1/schema",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "Connecting String Values Example",
      "components": [
        {
          "type": "html",
          "value": "'Connecting more than ' + /data/A + /data/B + 'values' + /data/Dot"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "A": 2,
      "B": " string ",
      "Dot": "."
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Beispiel mehrere Numbers

Zahlen können mit +, -, * oder / verbunden werden.

bindingNumber.json

{
  "$schema": "http://bpc.virtimo.net/forms/1/schema",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "Connecting Number Values Example",
      "components": [
        {
          "type": "html",
          "value": "/data/task"
        },
        {
          "type": "html",
          "value": "'b = ' + /data/B"
        },
        {
          "type": "html",
          "value": "'c = ' + /data/C"
        },
        {
          "type": "html",
          "value": "'d = ' + /data/D"
        },
        {
          "type": "html",
          "value": "'e = ' + /data/E"
        },
        {
          "type": "numberfield",
          "label": "a = ",
          "value": "/data/A"
        },
        {
          "type": "html",
          "value": "'((a + b) * c) / d = ' + (((/data/A + /data/B) * /data/C) / /data/D)"
        },
        {
          "type": "html",
          "value": "Correct!",
          "hidden": "(((/data/A + /data/B) * /data/C) / /data/D) != /data/E"
        },
        {
          "type": "html",
          "value": "Wrong. Hint: 3 is a nice number.",
          "hidden": "(((/data/A + /data/B) * /data/C) / /data/D) == /data/E"
        }

      ]
    }
  ],
  "state": {
    "data": {
      "A": 2,
      "B": 3,
      "C": 4,
      "D": 6,
      "E": 4,
      "task": "Make the following equation correct: ((a + b) * c) / d = e"
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: