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 are visited and previous. For visited, the user can visit the next step and all previously visited steps. For previous, 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.
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",
        ...
    }]
}