Binding attributes of form components

Various attributes of formcomponents components can be bound to data in the state For example, the value of a Checkbox can be linked to the visibility of other components.

For attributes that are intended for binding, this is signaled via a string with a leading slash /. This is then interpreted like a JSON pointer. If binding is used in a string, the entire string is interpreted accordingly. This means that if other parameters, such as strings, are to be combined with it, this must be done according to the JavaScript syntax. The following examples show this in detail.

It makes sense to bind the value of a component in order to avoid errors. Especially if you use strings with /, these can be interpreted unplanned as a bind string.

Example

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

open preview in separate window

Linking of bind references

It is also possible to use several bind references in a bind string.

Example of several Booleans

For example, Boolean values can be negated with ! or linked with &&.

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

open preview in separate window

Example multiple strings

Strings can be concatenated with +. For text within value it is necessary that it is enclosed in ' if it is combined with binding.

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

open preview in separate window

Example of several numbers

Numbers can be linked with +, -, * or /. It is important here that equations must be enclosed in brackets if they occur in strings. This can be seen, for example, in the lower html components in the example.

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

open preview in separate window

Keywords: