Wizard

Layout with a guided step manager. Use it to generate guided forms through steps.

Example

Loading...

Properties

General

Attribute	Type	Description	Category
Model Id	String	This is a unique id for the component.	Every field on a form model needs a unique ID, which is automatically generated but can be changed if needed (e.g. to reference in expressions or for debugging purposes). If the field type supports rendering a label, and most types do, it can be configured here. This label is a displayed on the form to the end user and typically indicates what value is expected in the field. The documentation property holds free-form text that can be used to give more details about this wizard field, like its purpose, usage in other models, etc.
Documentation	Multiline Text	A free-form text to explain the use cases for this form field.

Wizard

Attribute	Type	Description	Category
Tabs order	FlowOrder	The display order of the tabs in the component.	Customize how the different steps of the wizard field are displayed to the user.
Show last page footer	Boolean	Set visibility of the final action button in the last step.	Customize in detail how the various steps of the wizard field are displayed to the user.
Next enabled	Boolean	Enable the Next action button.
Next visible	Boolean	Set visibility of Next action button.
Previous enabled	Boolean	Enable the Previous action button.
Previous visible	Boolean	Set visibility of the Previous action button.
Initial page	Integer	The number of the page that is initially opened.
Show border	Boolean	If true, the sub form renders a border around the list of elements in it.
Disable auto scroll	Boolean	Disables automatic scrolling to the top when changing tabs
Disable header navigation	Boolean	Disables tab navigation using the header.
Previous button text	Text	Text to be used in the Previous button.	Customize the text of the buttons of the wizard field.
Next button text	Text	Text to be used in the Next button.
Start button text	Text	Text to be used in the Start button.

Validation

Attribute	Type	Description	Category
Validation Panel Display	Selection: Show Only message Hide	Display at validation panel and validation tooltip.	Providing proper data in form fields is important, especially when in process, case, decision or any other models the values provided in the form fields are used in subsequent steps. To make sure that the data is correct, validation is crucial. For this reason, a form can only be submitted when all fields are valid and thus all validation properties configured on the left apply. Check the tooltips on the properties for more information.
Custom validations	List	List of additional validations to apply.	The wizard field can have custom validation rules beyond the standard set of validations. Such a rule is written as a frontend expression in the form of {{myExpression}}. If this expression evaluates to false, the submission of the form won't be possible.

Rendering

Attribute	Type	Description	Category
Visible	Boolean	Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according the checked state of the checkbox. If you want to only show the component, if the form is not used as the init-form, you can use the expression '{{root.id}}' which evaluates to true only, if there is a current case id which is not the case in an initialization form.	Fields can also be shown or hidden based on the visible condition. This can be a frontend expression in the form of {{myExpression}} which can reference other form field values by their IDs. Fields can also be enabled or disabled, and similarly this can be made dynamic based on a frontend expression. Some field types can be ignored (the property is shown here if that's the case), which means that its value won't be taken into account.
Enabled	Boolean	Boolean value or expression specifies whether component is enabled or disabled.
Step appeareance	Selection: Default Bubble	Visual component used for every wizard step	The wizard field can get customized CSS classes to customize the default styling. Note that the CSS files needed for the customizations must be available on the runtime system.
Orientation	Selection: Horizontal Vertical	Specifies if the alignment is horizontal or vertical
Tab size	Selection: Small Medium Large Extra-large	Determines the width of the tabs
Style class	Text	Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.

Advanced

Attribute	Type	Description	Category
Events	List		The wizard field emits low-level events on which can be reacted with a frontend expression to implement various use cases that are not possible with regular modeling. If the expression produces a value, it can be stored in a new variable using the Result variable property.

List Attribute Details

Custom validations

Attribute	Type	Description
Expression	Text	Validation passes when this expression is true.
Error message	Text	Message to display when the validation fails.

Events

Attribute	Type	Description
Event label	Text	This is a unique id for the component.
Event type	Selection: On value change	The type of event emitted by the form field.
Expression	Text	Validation passes when this expression is true.
Result variable	Text	Capture the result of the expression in a result variable.

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.
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.