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