Form Steppers

Form steppers divide your form into manageable steps, like so:

The underlying technology is the Design Systems stepper coupled with the conventions used with Jsonforms for steppers. In line with these conventions the UI schema for a stepper is called a categorization, and each step is called a category. For example, here’s a simple schema that could be used to collect a user’s name and address information;

{
  "type": "object",
  "properties": {
    "name": {
      "type": "object",
      "properties": {
        "firstName": {
          "type": "string",
          "minLength": 2
        },
        "lastName": {
          "type": "string",
          "minLength": 2
        },
        "initial": {
          "type": "string",
          "maxLength": 1
        }
      }
    },
    "address": {
      "type": "object",
      "properties": {
        "street": {
          "type": "string"
        },
        "city": {
          "type": "string"
        }
      }
    }
  }
}

Its a bit of overkill, but for illustrative purposes we’ll put the name and address fields into separate steps, like so:

{
  "type": "Categorization",
  "elements": [
    {
      "type": "Category",
      "label": "Name",
      "elements": [
        {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/name/properties/firstName"
            },
            {
              "type": "Control",
              "scope": "#/properties/name/properties/lastName"
            },
            {
              "type": "Control",
              "scope": "#/properties/name/properties/initial"
            }
          ]
        }
      ]
    },
    {
      "type": "Category",
      "label": "Address",
      "elements": [
        {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/address/properties/street"
            },
            {
              "type": "Control",
              "scope": "#/properties/address/properties/city"
            }
          ]
        }
      ]
    }
  ],
  "options": {
    "variant": "stepper"
  }
}

Which yields:

Notice:

• The Categorization has two Categories labeled Name and Address. This grouping tells the rendering engine to create a stepper with 2 steps, labeled as Name and Address respectively.
• The Categorization element has an options variant set to stepper. Although we currently only have the one variant, it is mandatory to have this option.
• The stepper includes navigation buttons for moving between pages.
• Everything else is declared as it would be without the stepper.
• There is an extra step added to the stepper, named Review. This is a GOA added feature added to let the applicant quickly review the data they have entered for completeness.