Progress Bar Web Control Progress Bar Web Control

Progress Bar Web Control

Zack Cohen Zack Cohen

Overview

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.

AirHome-ProgressBar-Overview.png

Control Properties

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.

Steps

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.

Labels

The list of step labels as an array of text values.  For example, these labels:

mceclip0.png

would be specified like this:

[
"Personal Info",
"Home Info",
"Insurance",
"Contact"
]

This is an expression. It can use variables, be personalized or dynamic with Airscript.

Control Actions

Value Changed

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

event.value

For example:

mceclip1.png

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

progressbar_label.gif

Examples

Example 1: Using Value, Steps & Labels

progressbar_control_props.gif

In this example, you can see adjusting the number of steps, the current step, and the labels for the respective steps.

Further Reading