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

Beispiel bindingSlash.json

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

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.

Beispiel bindingBoolean.json

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

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.

Beispiel bindingString.json

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

Vorschau in separatem Fenster öffnen

Beispiel mehrere Numbers

Zahlen können mit +, -, * oder / verbunden werden. Wichtig hierbei ist, dass Gleichungen geklammert werden müssen, wenn sie in Strings vorkommen. Dies ist beispielsweise bei den unteren html-Komponenten im Beispiel zu sehen.

Beispiel bindingNumber.json

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

Vorschau in separatem Fenster öffnen

Keywords: