Flowable Forms

Flowable Forms

  • Release Notes
  • Guides
  • Components
  • Storybook

›Components

Components

  • Introduction
  • Accordion
  • Button Group
  • Checkbox
  • Columns
  • Data Table
  • Date
  • Doc Gallery
  • Flex Layout
  • HR
  • HTML
  • iFrame
  • Image
  • Link
  • Link Button
  • List
  • Modal
  • Number
  • Outcome Button Group
  • Panel
  • Password
  • PDF Viewer
  • Radio button
  • REST Button
  • RichText editor
  • Assign Button
  • Select
  • Text List
  • Sub-Form
  • Tabs
  • Text
  • Textarea
  • Upload
  • Wizard

Wizard

Layout with a guided step manager.

Demo

Basic example

Attributes

AttributeTypeDescription
typestringType expected is wizard

See section Common attributes.

Extra attributes

AttributeTypeDescription
sectionsObject[]Array of panel or subform definitions.
showLastPageFooterbooleanShow/hide final action button in the last step. Default is true.
nextEnabledbooleanEnable/Disable action button [Next]. Default is true.
nextVisiblebooleanShow/hide action button [Next]. Default is {{!isLast}}
previousEnabledbooleanEnable/Disable action button [Previous]. Default is true.
previousVisiblebooleanShow/hide action button [Previous]. Default is {{!isFirst}}
initialPagenumberNumber of the page that will be open initially
startButtonTextstringCustom text for the START button shown in initial step
completeButtonTextstringCustom text for the COMPLETE button shown in final step
previousButtonTextstringCustom text for the PREVIOUS button shown in any step
nextButtonTextstringCustom text for the NEXT button shown in any step

Extra attributes for the wizard pages

AttributeTypeDescription
serverValidationUrlstringWhen 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.
serverValidationResultPathstringIf the validation server returns a json, this attribute points to the path of the validation result in that json. For example data.validationResult
serverValidationResultMessagestringIf the validation server returns a json, this attribute points to the path of the validation failure message in that json. For example data.errorMessage
serverValidationMethodstringWhen it is POST it will fire the validation request using POST method instead of GET.
serverValidationBodystringWhen 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.

ExpressionTypeDescription
{{$currentPage}}numberIndex of the current page. Starts from 0.
{{$isLast}}booleanTrue when current page is last one.
{{$isFirst}}booleanTrue when current page is first one.
{{$pageValid}}booleanTrue 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

EventWhenAdditionalCancellable
Wizard.nextWizard Next button is clickedDefinition + StateYes
Wizard.previousWizard Previous button is clickedDefinition + StateYes

See section Events for more information.

When to use it

Use it to generate guided forms through steps.

← Upload
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable