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

exampleResponsiveForms.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/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"
    }
  }
}

open preview in separate window

Multiple pages

Jump between pages with buttons via setProperty

Via meaningful binding of hidden, you can display multiple pages of a form within a Forms file. One way to do this is to use buttons , as the following example shows. On each page there are 3 buttons for navigation and individual content. In addition, disabled is used to restrict the use of the buttons. You can also use numberfield to jump between pages, as the default page shows.

Example exampleMultiplePages.json

exampleMultiplePages.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/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}"
            }
          ]
        },
        {
          "type": "container",
          "label": "More information",
          "hidden": "${/data/page != 2}",
          "components": [
            {
              "type": "html",
              "value": "Hello, ${/data/firstName} ${/data/lastName}!"
            },
            {
              "type": "datefield",
              "label": "Birthday"
            },
            {
              "type": "numberfield",
              "label": "My Numberfield"
            }
          ]
        },
        {
          "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}"
        },
        {
          "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": ""
    }
  }
}

open preview in separate window

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. validate can also be used instead of required. The errors are displayed slightly differently.

Example exampleReadOnlyDisabledHiddenRequired.json

exampleReadOnlyDisabledHiddenRequired.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/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
    }
  }
}

open preview in separate window

Keywords: