Binding Form Component Attributes

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

For attributes intended for binding, this is indicated by a string starting with a forward slash /. This is then interpreted as a JSON pointer. If binding is used within 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 in accordance with JavaScript syntax. The following examples illustrate this in detail.

It makes sense to bind a component’s value to avoid errors. Especially when using strings with /, they can be unintentionally interpreted as bind strings.

Example

Example bindingSlash.json

bindingSlash.json

{
  "$schema": "https://forms.virtimo.net/4.2.x/schema.json",
  "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 a separate window

Linking bind references

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

Example: Multiple Booleans

For example, Boolean values can be negated using ! or combined using &&.

Example bindingBoolean.json

bindingBoolean.json

{
  "$schema": "https://forms.virtimo.net/4.2.x/schema.json",
  "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 a separate window

Example: Multiple Strings

Strings can be concatenated using +. For text within the value, it must be enclosed in ' when combined with binding.

Example bindingString.json

bindingString.json

{
  "$schema": "https://forms.virtimo.net/4.2.x/schema.json",
  "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 a separate window

Example: Multiple Numbers

Numbers can be combined using +, -, *, or /. It is important to note that equations must be enclosed in parentheses when they appear in strings. This can be seen, for example, in the HTML components at the bottom of the example.

Example bindingNumber.json

bindingNumber.json

{
  "$schema": "https://forms.virtimo.net/4.2.x/schema.json",
  "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 a separate window

Keywords: