Back to Website
Show / Hide Table of Contents

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.

Steps default behavior

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.

Steps with the Visited availability mode

{
    "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.

Steps with the Previous availability mode

{
    "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.

Steps with Enabled

{
    "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.

Steps with Hide

{
    "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
Was this page helpful?
Thanks for your feedback!
Back to top Copyright © 2001–2022 Aurigma, Inc. All rights reserved.
Loading...
    Thank for your vote
    Your opinion is important to us. To provide details, send feedback.
    Send feedback