Binding attributes of form components
Various attributes of formComponents can be bound to data in the state
For example, the value of a checkbox can be linked to the visibility of other Components.
The syntax for the binding is based on JS template strings and JSON pointer syntax.
To declare a binding, ${} is used accordingly.
Any expression with reduced JS syntax is then located inside the brackets.
With the help of /, similar to the JSON pointer syntax, elements from the state can be referenced.
Please note that this is reduced syntax and that the full range of functions is not available.
Various operators are available for linking different values.
Please note that operators can only be evaluated within ${}.
No binding is performed outside of this and operators, like everything else, are interpreted as text in this case.
{
"type": "textfield",
"value": "${/data/text}"
}Booleans
The following operators are available for Boolean values:
! (logical not), && (logical and), || (logical or), ? : (if-then-else), ==, ===, !=, !==.
Example bindingBoolean.json
{
"$schema": "https://forms.virtimo.net/5.1.0/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {},
"components": [
{
"type": "container",
"label": "Boolean Binding",
"components": [
{
"type": "html",
"value": "Input"
},
{
"type": "checkbox",
"label": "A",
"value": "${/data/A}"
},
{
"type": "checkbox",
"label": "B",
"value": "${/data/B}"
},
{
"type": "checkbox",
"label": "C",
"value": "${/data/C}"
},
{
"type": "textfield",
"label": "X",
"labelAlign": "left",
"value": "${/data/X}"
},
{
"type": "numberfield",
"label": "Y",
"labelAlign": "left",
"value": "${/data/Y}"
},
{
"type": "html",
"value": "Output"
},
{
"type": "checkbox",
"label": "Not A",
"value": "${!/data/A}",
"disabled": true
},
{
"type": "checkbox",
"label": "A and B",
"value": "${/data/A && /data/B}",
"disabled": true
},
{
"type": "checkbox",
"label": "A or B",
"value": "${/data/A || /data/B}",
"disabled": true
},
{
"type": "checkbox",
"label": "If A then B else C",
"value": "${/data/A ? /data/B : /data/C}",
"disabled": true
},
{
"type": "checkbox",
"label": "X != 'x' or Y == 1",
"value": "${(/data/X != 'x') || (/data/Y == 1)}",
"disabled": true
}
]
}
],
"state": {
"data": {
"A": true,
"B": false,
"C": false,
"X": "a",
"Y": 0
}
}
}Numbers
The following operators are available for numbers:
+, -, *, /, >, >=, <, <=, ==, ===, !=, !==.
Example bindingNumber.json
{
"$schema": "https://forms.virtimo.net/5.1.0/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {},
"components": [
{
"type": "container",
"label": "Number Binding",
"components": [
{
"type": "html",
"value": "Input"
},
{
"type": "numberfield",
"label": "A",
"value": "${/data/A}"
},
{
"type": "numberfield",
"label": "B",
"value": "${/data/B}"
},
{
"type": "numberfield",
"label": "C",
"value": "${/data/C}"
},
{
"type": "html",
"value": "Output"
},
{
"type": "checkbox",
"label": "A * B == C",
"value": "${/data/A * /data/B == /data/C}",
"disabled": true
},
{
"type": "numberfield",
"label": "A/B + C",
"value": "${/data/A / /data/B + /data/C}",
"disabled": true
}
]
}
],
"state": {
"data": {
"A": 7,
"B": 6,
"C": 42
}
}
}Strings
To combine strings, you can simply combine several bindings.
Alternatively, strings can be concatenated with + within the binding.
Text must then be enclosed in '.
Example bindingString.json
{
"$schema": "https://forms.virtimo.net/5.1.0/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {},
"components": [
{
"type": "container",
"label": "String Binding",
"components": [
{
"type": "html",
"value": "Connecting more than ${/data/A} ${/data/B} values.${/data/Dot}"
},
{
"type": "html",
"value": "Alternative: ${'Connecting more than ' + /data/A + ' ' + /data/B + ' values' + /data/Dot}"
}
]
}
],
"state": {
"data": {
"A": 2,
"B": "string",
"Dot": "."
}
}
}Miscellaneous
In principle, () can be used for bracketing within bindings.
Within the binding, numbers, true, false and null can be used as comparison values.
If ${} is used, this is automatically interpreted as a binding.
If this is to occur as text, this must be within the binding.
Binding with {} is not possible.
In this case, no binding is performed, but the complete string is displayed unchanged.
Apart from ${} and {}, everything can be used without being interpreted as a binding.
Example bindingMiscellaneous.json
{
"$schema": "https://forms.virtimo.net/5.1.0/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {},
"components": [
{
"type": "container",
"label": "Miscellaneous Binding",
"components": [
{
"type": "numberfield",
"label": "A",
"value": "${/data/A}"
},
{
"type": "html",
"value": "8 * (10 + A): ${8 * (10 + /data/A)}"
},
{
"type": "html",
"value": "(false || /data/A) || true: ${(false || /data/A) || true}"
},
{
"type": "html",
"value": "null === A: ${/data/A === null},<br>0 === '': ${0 === ''},<br> 0 == '': ${0 == ''}"
},
{
"type": "html",
"value": "This does not work: {data.A} and invalidates this otherwise valid binding: ${/data/A}"
},
{
"type": "html",
"value": "Binding ${/data/A}, no binding: <b>/data/A</b>"
},
{
"type": "html",
"value": "${'${}, ' + /data/binding + ', {{'}"
}
]
}
],
"state": {
"data": {
"A": null,
"binding": "${}"
}
}
}