Examples

Each Component offers a simple example. More complex examples that combine different topics are presented here.

Responsive Design

Forms has the possibility to react responsively to the screen size of the user and to adjust the positioning of the elements. Further details can be found at responsive Forms and container. The following example shows a slightly 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 via 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 hiddenyou can display several pages of a form within a Forms file. One possibility for this is, Buttons as shown in the following example. There are 3 buttons on each page for navigation and individual content. In addition, the disabled is used to restrict the use of the buttons. To jump between pages, you can also use a numberfield 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

With ReadOnly, Disabled, Hidden and Required the use of a form can be restricted. 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: