New online demos available.  

Steps

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 one and previous or all visited. 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 visible and previous. For visible, the user can visit the next step and all previously visited. For previous the user can visit only the next step and all previous. If omited, all steps are available.

    To understand the difference, consider the following situation. There is a 4-step config. A user starts from a Step 1, then go to the Step 2, then go 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 object where the key is a step title or index (zero-based) and the value is an object like {enabled: true|false}. It allows override the availability mode of a particular step.

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",
        ...
    }]
}

See also