Wizard · Flowable Forms

Layout with a guided step manager.

Demo

Basic example

{
  "type": "wizard",
  "extraSettings": {
    "sections": [
      {
        "type": "panel",
        "label": "Step 1",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "text",
                    "label": "Write your name",
                    "value": "{{name}}"
                  }
                ]
              }
            ]
          }
        }
      },
      {
        "type": "panel",
        "label": "Step 2",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "select",
                    "label": "Select your country",
                    "value": "{{country}}",
                    "extraSettings": {
                      "dataSource": "Static",
                      "identity": "value",
                      "formatItem": "{{$item.text}}",
                      "enableAutocomplete": false,
                      "items": [
                        {
                          "text": "Spain",
                          "value": 1
                        },
                        {
                          "text": "Switzerland",
                          "value": 2
                        },
                        {
                          "text": "Germany",
                          "value": 3
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      },
      {
        "type": "panel",
        "label": "Step 3",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "radio",
                    "label": "Choose your food",
                    "value": "{{food}}",
                    "extraSettings": {
                      "items": [
                        {
                          "text": "Pizza",
                          "value": 1
                        },
                        {
                          "text": "Pasta",
                          "value": 2
                        },
                        {
                          "text": "Hot dog",
                          "value": 3
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  }
}

Attributes

Attribute	Type	Description
type	`string`	Type expected is wizard

See section Common attributes.

Extra attributes

Attribute	Type	Description
sections	`Object[]`	Array of panel or subform definitions.
showLastPageFooter	`boolean`	Show/hide final action button in the last step. Default is true.
nextEnabled	`boolean`	Enable/Disable action button [Next]. Default is true.
nextVisible	`boolean`	Show/hide action button [Next]. Default is `{{!isLast}}`
previousEnabled	`boolean`	Enable/Disable action button [Previous]. Default is true.
previousVisible	`boolean`	Show/hide action button [Previous]. Default is `{{!isFirst}}`
initialPage	`number`	Number of the page that will be open initially
startButtonText	`string`	Custom text for the START button shown in initial step
completeButtonText	`string`	Custom text for the COMPLETE button shown in final step
previousButtonText	`string`	Custom text for the PREVIOUS button shown in any step
nextButtonText	`string`	Custom text for the NEXT button shown in any step

Extra attributes for the wizard pages

Attribute	Type	Description
serverValidationUrl	`string`	When the user clicks on Next button from this page a request will be done to this url. If the server validation fails the wizard won't advance to the next page and an error will be shown.
serverValidationResultPath	`string`	If the validation server returns a json, this attribute points to the path of the validation result in that json. For example `data.validationResult`
serverValidationResultMessage	`string`	If the validation server returns a json, this attribute points to the path of the validation failure message in that json. For example `data.errorMessage`
serverValidationMethod	`string`	When it is POST it will fire the validation request using POST method instead of GET.
serverValidationBody	`string`	When it is an expression and `serverValidationMethod` is POST, the validation request body will be the result of executing the expression. When it is not defined the whole payload will be sent.

NOTES
Every panel/subform in the array will be a step with its own label.
Every section can be shown/hidden dynamically through ignore/visible properties. If initalPage or previous/next page is hidden previous/next available section will be selected

Context

Wizard component has special expressions in its context in order to manage the current state.

Expression	Type	Description
{{$currentPage}}	`number`	Index of the current page. Starts from 0.
{{$isLast}}	`boolean`	True when current page is last one.
{{$isFirst}}	`boolean`	True when current page is first one.
{{$pageValid}}	`boolean`	True if current page has no errors.

e.g.
Complete button (= last page next button) invisible:

nextVisible : "{{!$isLast}}"

e.g.
Next button always enabled but force the 3rd page to be valid in order to continue:

nextEnabled : "{{$pageValid || $currentPage !== 2}}"

Events

Event	When	Additional	Cancellable
`Wizard.next`	Wizard Next button is clicked	Definition + State	Yes
`Wizard.previous`	Wizard Previous button is clicked	Definition + State	Yes

See section Events for more information.

When to use it

Use it to generate guided forms through steps.