The Progress Bar control creates a bar of progressive steps that a user will go through. It allows for a dynamic number of steps, customizing the look and feel, step labels, and navigation.
Value (Current Step Index)
This is the number of the step that should be highlighted as the current step in the progress bar. All the proceeding steps will change to their "completed" state when this value changes.
Note: It is an index therefore it is zero-based, and the first step and the default value is 0.
The total number of steps to be rendered in the progress bar. Each step will have a marker as both a click target and be able to have a label specified if desired.
The list of step labels as an array of text values. For example, these labels:
would be specified like this:
This is an expression. It can use variables, be personalized or dynamic with Airscript.
This event is fired when the user has clicked on a step other than the current step in the progress bar. You can access the index value of the step that was clicked on with
This would allow the user to
- Click "Personal Info" with event.value = 0 and would navigate the page back to "Source Personal Info"
- Click "Contact" with event.value = 3 and would navigate the page forward to "Contact Info"
Styling and Theming
The Progress Bar is a compound web control. It's possible to change the style of the sub-controls within the progress bar such as:
- Label - the text label for each step
- Bar - the line between the steps
- Circle - the marker for each step
- Container - the outer container for the entire progress bar
Here's an example of changing the size and color of the labels of a progress bar
Example 1: Using Value, Steps & Labels
In this example, you can see adjusting the number of steps, the current step, and the labels for the respective steps.