GuidesReferenceChangelogVideosDiscord
Sign UpLogin

Progress Bar

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.

organizing info

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:

organizing info

would be specified like this:

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

This Expression 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

organizing info