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/5.0.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 appropriate binding of hidden fields, 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 navigate between pages, you can also use a numberfield
, as shown on the default page.
Example exampleMultiplePages.json
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"components": [
{
"type": "fieldset",
"padding": 0,
"components": [
{
"type": "container",
"label": "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}"
}
]
},
{
"type": "container",
"label": "More information",
"hidden": "${/data/page != 2}",
"components": [
{
"type": "html",
"value": "${(/data/firstName && /data/lastName) ? 'Hello, ' + /data/firstName + ' ' + /data/lastName + '!' : 'Please specify a first and last name on the previous page.'}"
},
{
"type": "datefield",
"label": "Birthday"
},
{
"type": "numberfield",
"label": "My Numberfield"
}
]
},
{
"type": "container",
"label": "Default Page (${/data/page})",
"hidden": "${!!/data/page && (/data/page >= 1 && /data/page <= 2)}",
"components": [
{
"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}"
},
{
"type": "button",
"label": "Back",
"action": "setProperty",
"target": "${/data/page}",
"value": "${/data/page -1}",
"disabled": "${/data/page <= 1}"
},
{
"type": "button",
"label": "Start",
"action": "setProperty",
"target": "${/data/page}",
"value": 1,
"disabled": "${/data/page == 1}"
}
]
}
],
"configuration": {},
"state": {
"data": {
"page": 1,
"firstName": "",
"lastName": ""
}
}
}ReadOnly, Disabled, Hidden, and Required
ReadOnly, Disabled, Hidden, and Required can be used to restrict the use of a
form.
See also.
The following example demonstrates some ways to use these options.
Instead of required, you can also use ` validate `.
The error messages are displayed slightly differently in this case.
Example exampleReadOnlyDisabledHiddenRequired.json
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {},
"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
}
}
}