Beispiele
Jede Komponente bietet jeweils ein einfaches Beispiel an. Hier werden komplexerer Beispiele, die verschiedene Themen vereinen, vorgestellt.
Responsive Design
Forms hat die Möglichkeit responsive auf die Bildschirmgröße des Nutzers zu reagieren und die Positionierung der Elemente anzupassen. Weitere Details sind unter responsive Forms und Container zu finden. Das folgende Beispiel zeigt ein etwas komplexeres Beispiel. Die Container sind je nach Bildschirmbreite horizontal oder vertikal, damit der Inhalt so kompakt wie möglich, aber dennoch lesbar ist. Die Textfelder in den Containern haben unterschiedliche Flex-Werte, um die Auswirkungen der relativen Größe der Elemente zu zeigen. Öffnen Sie dazu einfach das Beispiel in einem neuen Fenster über den Link unter dem folgenden Code Durch Ändern der Breite des Fensters können Sie dann die entsprechende Wirkung sehen.
{
"$schema": "http://bpc.virtimo.net/forms/1/schema",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
},
"components": [
{
"type": "container",
"label": "Responsive Forms Example",
"components": [
{
"layout": "horizontal",
"responsiveConfiguration": {
"width >= 750": {
"layout": "horizontal"
},
"width < 750": {
"layout": "vertical"
}
},
"components": [
{
"flex": 1,
"type": "container",
"label": "Container 1",
"components": [
{
"layout": "horizontal",
"responsiveConfiguration": {
"width >= 1000 || (width >= 500 && width < 750)": {
"layout": "horizontal"
},
"!(width >= 1000 || (width >= 500 && width < 750))": {
"layout": "vertical"
}
},
"components": [
{
"flex": 1,
"type": "textfield",
"value": "/data/field1"
},
{
"flex": 2,
"type": "textfield",
"value": "/data/field2"
},
{
"flex": 3,
"type": "textfield",
"value": "/data/field3"
}
],
"type": "container"
}
]
},
{
"flex": 1,
"type": "container",
"label": "Container 2",
"components": [
{
"layout": "horizontal",
"responsiveConfiguration": {
"width >= 1000 || (width >= 500 && width < 750)": {
"layout": "horizontal"
},
"!(width >= 1000 || (width >= 500 && width < 750))": {
"layout": "vertical"
}
},
"components": [
{
"flex": 1,
"type": "textfield",
"value": "/data/field4"
},
{
"flex": 1,
"type": "textfield",
"value": "/data/field4"
},
{
"flex": 1,
"type": "textfield",
"value": "/data/field4"
}
],
"type": "container"
}
]
}
],
"type": "container"
}
]
}
],
"state": {
"data": {
"field1": "small textfield",
"field2": "middle textfield",
"field3": "long textfield",
"field4": "same length"
}
}
}Eingebettete Vorschau
Mehrere Seiten
Springe zwischen Seiten mit Buttons über setData
Über sinnvolles Binding von hidden, kann man innerhalb einer Forms Datei mehrere Seiten eines Formulars darstellen. Eine Möglichkeit dafür ist, Buttons zu verwenden, wie das folgende Beispiel zeigt. Auf jeder Seite befinden sich 3 Buttons zum navigieren und individueller Inhalt. Zudem wird disabled verwendet um die Verwendung der Buttons einzuschränken. Zum springen zwischen den Seiten kann man auch ein Number Field benutzen, wie die default Seite zeigt.
{
"$schema": "http://bpc.virtimo.net/forms/1/schema",
"metaData": {
"id": 0,
"version": 0
},
"components": [
{
"type": "container",
"label": "Multi Page Form",
"components": [
{
"type": "container",
"label": "Input name",
"hidden": "/data/page != 1",
"components": [
{
"type": "html",
"value": "Please insert your name below."
},
{
"type": "textfield",
"label": "Last Name",
"value": "/data/lastName"
},
{
"type": "textfield",
"label": "First Name",
"value": "/data/firstName",
"id": "firstName"
}
]
},
{
"type": "container",
"label": "More information",
"hidden": "/data/page != 2",
"components": [
{
"type": "html",
"value": "'Hello, ' + /data/firstName + ' ' + /data/lastName + '!'"
},
{
"type": "datefield",
"label": "Birthday",
"value": "/data/datefieldOne",
"id": "birthday"
},
{
"type": "numberfield",
"label": "My Numberfield",
"value": "/data/numberfieldOne"
}
]
},
{
"type": "container",
"label": "Page Default",
"hidden": "!!/data/page && (/data/page >= 1 && /data/page <= 2)",
"components": [
{
"type": "html",
"value": "'Default Page (' + /data/page + ')'"
},
{
"type": "numberfield",
"value": "/data/page",
"label": "Jump To"
}
]
},
{
"type": "button",
"label": "Next",
"action": "setData",
"target": "page",
"value": "++",
"disabled": "/data/page >= 3",
"id": "next"
},
{
"type": "button",
"label": "Back",
"action": "setData",
"target": "page",
"value": "--",
"disabled": "/data/page <= 1",
"id": "previous"
},
{
"type": "button",
"label": "Start",
"action": "setData",
"target": "page",
"value": 1,
"disabled": "/data/page == 1",
"id": "start"
}
]
}
],
"configuration": {
},
"state": {
"data": {
"page": 1,
"someText": "Are the following details correct?",
"informationCorrect": false,
"consent": false,
"firstName": "",
"lastName": ""
}
}
}Eingebettete Vorschau
ReadOnly, Disabled, Hidden und Required
Mit ReadOnly, Disabled, Hidden und Required kann die Benutzung eines Formulars eingeschränkt werden. Siehe auch. Im folgenden Beispiel werden einige Möglichkeiten zur Verwendung gezeigt. Statt required kann auch Validierung verwendet werden. Die Fehler werden dabei etwas anders angezeigt.
{
"$schema": "http://bpc.virtimo.net/forms/1/schema",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
},
"components": [
{
"type": "fieldset",
"components": [
{
"type": "container",
"label": "Start Page",
"hidden": "/data/nextPage",
"components": [
{
"type": "textfield",
"value": "This text is ReadOnly. You can try out ReadOnly, Disabled, Hidden and Required by clicking on the checkbox",
"readOnly": "/data/explanation"
},
{
"type": "checkbox",
"value": "/data/nextPage",
"label": "Do you want to go to the next page?"
}
]
},
{
"type": "container",
"label": "Second Page",
"hidden": "!/data/nextPage",
"components": [
{
"type": "checkbox",
"value": "/data/appearance/hidden",
"label": "hide"
},
{
"type": "checkbox",
"value": "/data/appearance/disabled",
"label": "disable"
},
{
"type": "checkbox",
"value": "/data/appearance/readOnly",
"label": "make read only"
},
{
"type": "checkbox",
"value": "/data/appearance/required",
"label": "make required"
},
{
"type": "html",
"value": "The following elements are all affected by the above checkboxes."
},
{
"type": "fieldset",
"hidden": "/data/appearance/hidden",
"required": "/data/appearance/required",
"disabled": "/data/appearance/disabled",
"readOnly": "/data/appearance/readOnly",
"components": [
{
"type": "datefield",
"value": "/data/content/0"
},
{
"type": "checkbox",
"value": "/data/content/1"
},
{
"type": "textfield",
"value": "/data/content/2"
},
{
"type": "textarea",
"value": "/data/content/3"
}
]
}
]
}
]
}
],
"state": {
"data": {
"appearance": {
"hidden": false,
"disabled": false,
"readOnly": false,
"required": false
},
"content": {
"0": "",
"1": false,
"2": "",
"3": "Hello, \nnice to meet\nyou"
},
"nextPage": false,
"explanation": true
}
}
}