Steps
- 1 minute to read
This non-visual widget is used to control what steps are available for the user. By default, a user can jump to any step, but you can limit them only by the next and previous or all visited steps. It is also possible to add some rules for the availability of a particular step.
General info
- type:
steps
Params
availabilityMode
- the possible values arevisited
andprevious
. Forvisited
, the user can visit the next step and all previously visited steps. Forprevious
, the user can visit only the next step and all previous steps. If omitted, all steps are available.To understand the difference, consider the following situation. There is a 4-step config. A user starts from Step 1, then goes to Step 2, and then goes back to Step 1.
- For
visited
, Step 1, 2, and 3 are available. Step 4 is not available (unless the user goes to Step 3). - For
previous
, only Step 1 and 2 are available. Step 3 and 4 are locked.
- For
steps
- a dictionary of steps and their condition, where the key is a step title or zero-based index and the value is an object like{enabled: true|false}
. This dictionary allows you to override the availability mode of a particular step with the following conditions:"enabled": true
- enables the corresponding step tab."hidden": true
- removes the step tab.
For more details about configuration parameters, refer to IWidgetStepsConfig.
Examples
Visited mode
{
"name": "steps",
"type": "steps",
"params": {
"availabilityMode": "visited"
}
}
Previous-only mode
{
"name": "steps",
"type": "steps",
"params": {
"availabilityMode": "previous"
}
}
Overriding availability
Let's assume than on the Step 2 we have a checkbox. We don't want to proceed to the Step 3 unless the user sets this checkbox.
{
"widgets": [
{
"name": "steps",
"type": "steps",
"params": {
"availabilityMode": "visited",
"steps": {
"Step 3": {
"enabled": "{{$['confirmation-checkbox']._}}"
}
}
}
},
{
"name": "confirmation-checkbox",
"type": "checkbox",
"params": {
"value": false,
"prompt": "I confirm that I am ready for Step 3."
}
}
],
"steps": [{
"title": "Step 1",
...
},{
"title": "Step 2",
...
}{
"title": "Step 3",
...
}]
}