Examples
Each component provides a simple example. More complex examples that combine various topics are presented here.
Responsive Design
Forms can respond to the user’s screen size and adjust the positioning of elements. Further details can be found under “Responsive Forms” and at Container. The following example shows a slightly more complex example. Depending on the screen width, the containers are arranged horizontally or vertically, so that the content is as compact as possible while remaining readable. The text fields in the containers have different flex values, to demonstrate the effects of the elements’ relative sizes. To see this, simply open the example in a new window using the link below the following code By changing the width of the window, you can then observe the corresponding effect.
Example exampleResponsiveForms.json
{
"$schema": "https://forms.virtimo.net/4.1.x/schema.json",
"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 using buttons via setProperty
By using hidden fields effectively, you can display multiple pages of a form within a
Forms file.
One way to do this is to use buttons
, as shown in the following example.
Each page contains 3 buttons for navigation and individual content.
Additionally, the disabled attribute
is used to restrict the use of the buttons.
To jump between pages, you can also use a ` Number Field
`, as shown on the default page.
Example exampleMultiplePages.json
{
"$schema": "https://forms.virtimo.net/4.1.x/schema.json",
"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 using ReadOnly, Disabled, Hidden, and Required.
See also.
The following example demonstrates some ways to use these options.
Instead of required, you can also use ` forms:admin/validation.adoc `.
The error messages are displayed slightly differently in this case.
Example exampleReadOnlyDisabledHiddenRequired.json
{
"$schema": "https://forms.virtimo.net/4.1.x/schema.json",
"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
}
}
}