Progress Bar control

This control provides a visual representation of how far a user is into completing a particular operation.

The visual display of the Progress Bar control gives the user an immediate understanding of how many tabs, pages, or input fields have been completed. It is most commonly used as a header on web forms or tabs .

Configuration properties

Set or modify configuration properties for the control, such as appearance and behavior properties, in the Configuration properties tab. Set the formula configuration properties in the Events tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor, you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Progress Bar control are shown in the following table:

Table 1. Appearance configuration properties for the Progress Bar control
Appearance configuration property	Description	Data type
Color style	Specifies a color style for the fill color of the progress bar. The colors correspond to variables in the specified theme. The default color style is Default (gray).	`String`
Striped	When selected, adds stripes to the progress bar.	`Boolean`
Active	When selected, and when Striped is also selected, makes the progress bar stripes move.	`Boolean`
Radius	Specifies the roundness of the progress bar corners, in either pixel or em units. For example, `15px` or `1em`. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no border radius is specified.	`String`
Width	Specifies the width of the progress bar in pixels, percents, or em units. For example: `800px`, or `80%` or `50em`. If only a number is specified without any unit, the number is interpreted as the number of pixels.	`String`
Height	Specifies the height of the well in pixels, or em units. For example, `15px` or `1em`. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no height is specified.	`String`

The behavior configuration properties for the Progress Bar control are shown in the following table:

Table 2. Behavior configuration properties for the Progress Bar control
Behavior configuration property	Description	Data type
Max value	Specifies the total numeric value of the progress (not to be confused with Width). For example, `100`.	`Integer`

Example

In this example, the following configuration properties are set for the Progress Bar control:

Behavior configuration properties:
- Max value is set to 100.
Appearance configuration properties:
- Color style is set to Info.
- Striped is selected.
- Active is selected.
- Radius is set to 1.
- Width is set to 25%.
Events configuration properties:
- For the On load event, the setProgress method is used to set the progress bar to 50: me.setProgress(50);

These properties and their values result in a light-blue, striped and animated half-filled progress bar with rounded corners, that takes 25% of the page width.

Events

Set or modify the formula configuration properties and the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information on how to define and code events, see User-defined events.

The formula configuration properties for the Progress Bar control are shown in the following table:

Table 3. Formula configuration properties for the Progress Bar control
Formula configuration property	Description	Data type
Formula	Expression to be used to calculate progress.	`String`

The Progress Bar control has the following types of event handlers:

On load: Activated when the page loads.
On click: Activated when the progress bar is clicked.

Methods

The following methods are available for this control:

setWidth(): Sets the width of the progress bar.
getWidth(): Gets the configured size for the progress bar width (including the unit).
setHeight(): Sets the height of the progress bar.
getHeight(): Gets the configured size for the progress bar height (including the unit).
setColorStyle(): Sets the color style of the progress bar.
setRadius(): Sets the radius (roundness) of the progress bar.
setProgress(): Sets the progress status.
getProgress(): Gets the progress status.
setMaximum(): Sets the maximum value of the progress bar.

For more information on how to use these methods, see the JavaScript documentation.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.