Steps
- 2-3 minutes to read
The Steps
widget is a non-visual widget, which controls the availability of the steps for a customer by making tabs and buttons in the Navigation panel active or inactive.
Although this widget is defined as a regular widget, you don't need to add it to the step panels or to the Group
widget.
{
"name": "my-steps",
"type": "steps",
"params": {
"steps": {
"Step 1": {...},
"Step 2": {...}
}
}
}
Availability of steps
By default, when you don't use the Steps
widget in your workflow file, all the steps will be available in any order.
To change this behavior for all defined steps, set the availabilityMode
param to visited
or previous
.
Visited
The visited
mode makes active all the steps you've visited and one the following step. If you go back to the previous steps, all the visited steps will stay available.
For example, let's assume that you visit the workflow steps in the following order: Step 1
, Step 2
, Step 3
, and Step 4
. At the Step 4
, all the already visited steps and the following one will be available. Now if you go back to Step 1
, all the visited steps will still be available.
{
"name": "steps",
"type": "steps",
"params": {
"availabilityMode": "visited"
}
}
Previous
The previous
mode makes active the previous steps and the only following step.
For example, you start from the Step 1
. At this moment, only Step 2
is available. When you go to Step 2
, the previous Step 1
and the following Step 3
will be available. Then, you go to Step 3
, and all the previous steps you've visited and the following Step 4
will be available. Finally, go back to Step 1
. Now only the following "Step 2" is available, and "Step 3" and "Step 4" become unavailable.
{
"name": "steps",
"type": "steps",
"params": {
"availabilityMode": "previous"
}
}
Managing a step
You can also control availability of a single step regardless of the general availabilityMode
. To do so, add a steps
object to params and redefine the behavior for the specified step.
Enabled
The enabled
property controls the availability of a step. In this example, the availability of Step 3
depends on the checkbox from Step 1
.
{
"name": "steps",
"type": "steps",
"params": {
"steps": {
"Step 3": {
"enabled": "{{$s['confirmation-checkbox']._}}"
}
}
}
}
Hidden
The hidden
property can hide a step. In this example, it hides a step depending on a checkbox value.
{
"name": "steps",
"type": "steps",
"params": {
"availabilityMode": "visited",
"steps": {
"Step 3": {
"hidden": "{{$['confirmation-checkbox']._}}"
}
}
}
}
Params
Name | Type | Description | Default value |
---|---|---|---|
availabilityMode |
visited | previous |
manages the behavior for all the steps | undefined |
steps |
dictionary of steps and their appearance | defines behavior for a specific step, referenced by the name or ID | undefined |
Step
Name | Type | Description | Default value |
---|---|---|---|
hidden |
boolean | hides a step in the Navigation Panel | false |
enabled |
boolean | makes a step clickable in the Navigation Panel | true |