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.
Die Syntax für das Binding orientiert sich an JS Template Strings und JSON Pointer Syntax.
Um ein Binding zu deklarieren wird dementsprechend ${} verwendet.
Innerhalb der Klammern befindet sich dann ein beliebiger Ausdruck mit reduzierter JS Syntax.
Mithilfe von /, ähnlich zur JSON Pointer Syntax, können Elemente aus dem state referenziert werden.
Hierbei ist zu beachten, dass es sich jeweils um reduzierte Syntax handelt und nicht der vollständige Funktionsumfang vorhanden ist.
Zur Verknüpfung von verschiedenen Werten stehen diverse Operatoren zur Verfügung.
Es ist zu beachten, dass eine Auswertung von Operatoren nur innerhalb von ${} möglich ist.
Außerhalb wird kein Binding durchgeführt und Operatoren, wie auch alles andere, werden in dem Fall als Text interpretiert.
{
"type": "textfield",
"value": "${/data/text}"
}Booleans
Für boolesche Werte sind folgende Operatoren verfügbar:
! (logisches nicht), && (logisches und), || (logisches oder), ? : (Wenn-Dann-Sonst), ==, ===, !=, !==.
Beispiel 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
Für Zahlen sind folgende Operatoren verfügbar:
+, -, *, /, >, >=, <, <=, ==, ===, !=, !==.
Beispiel 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
Um Strings zu kombinieren, kann man einfach mehrere Bindings kombinieren.
Alternativ können Strings mit + innerhalb vom Binding konkateniert werden.
Dabei muss dann Text in ' eingeschlossen werden.
Beispiel 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": "."
}
}
}Diverses
Grundsätzlich können () für Klammerung innerhalb von Bindings verwendet werden.
Innerhalb vom Binding können Zahlen, true, false und null als Vergleichswert benutzt werden.
Wenn ${} benutzt wird, wird dies automatisch als Binding interpretiert.
Sofern dies als Text vorkommen soll, muss dies innerhalb vom Binding stehen.
Binding mit {} ist nicht möglich.
In diesem Fall wird kein Binding durchgeführt, sondern der komplette String wird unverändert angezeigt.
Von ${} und {} abgesehen, kann alles verwendet werden, ohne als Binding interpretiert zu werden.
Beispiel 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": "${}"
}
}
}