Examples
Each component offers a simple example. More complex examples that combine different topics are presented here.
Responsive design
Forms has the option of reacting responsively to the user’s screen size and adjusting the positioning of the elements. Further details can be found under responsive forms and Container. The following example shows a somewhat more complex example. The containers are horizontal or vertical depending on the screen width, so that the content is as compact as possible but still legible. The text fields in the containers have different flex values, to show the effects of the relative size of the elements. Simply open the example in a new window using the link under the following code You can then see the corresponding effect by changing the width of the window.
Example exampleResponsiveForms.json
{
"$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"
}
}
}Multiple pages
Jump between pages with buttons via setProperty
You can display multiple pages of a form within a Forms file via meaningful binding of hidden. One way to do this is to use buttons , as the following example shows. There are 3 buttons on each page for navigation and individual content. In addition, disabled is used to restrict the use of the buttons. You can also use Number Field to jump between pages, as the default page shows.
Example exampleMultiplePages.json
{
"$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": "setProperty",
"target": "/data/page",
"value": "/data/page +1",
"disabled": "/data/page >= 3",
"id": "next"
},
{
"type": "button",
"label": "Back",
"action": "setProperty",
"target": "/data/page",
"value": "/data/page -1",
"disabled": "/data/page <= 1",
"id": "previous"
},
{
"type": "button",
"label": "Start",
"action": "setProperty",
"target": "/data/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": ""
}
}
}ReadOnly, Disabled, Hidden and Required
The use of a form can be restricted with ReadOnly, Disabled, Hidden and Required. See also. The following example shows some possible uses. Validation can also be used instead of required. The errors are displayed slightly differently.
Example exampleReadOnlyDisabledHiddenRequired.json
{
"$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
}
}
}