Wizard
Layout with a guided step manager.
Demo
Basic example
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.