Configuring the Progress bar widget in Progressive Web Applications - Documentation for AR System 21.3
Robert Clark
Published Apr 07, 2026
The following video (3:37) describes how to configure and use the progress bar widget:
The following image shows the Progress bar widget:
Before you begin
- To configure a Progress bar widget, you must have a minimum of six columns selected from a table.
- You must define the mappings for all columns.
- You can't define a duplicate mapping.
To configure the Progress bar widget
- On the progressive view of a form, double-click a Table field.
- On the Properties panel, under the Display property group, for the Display Type property, select the Progress Bar View value.
- In the Value column for the Tree/Table Property property, click the ellipsis button.
The Tree/Table Property dialog box is displayed. - Perform the following steps:
- In the Form Name box, add any form from where you want to fetch the data in the table.
- In the Qualification box, add a condition as per your requirement.
- Add the minimum required six columns for the mappings.
You can add any additional columns, if required. - Click OK.
- Click a column in the table.
On the Properties panel, under the Display property group, in the Progressbar Field property, define the required mappings such as title, status, and instance ID.
Double-click the Table field.
(Optional) On the Properties panel, under the Display property group, for the Mapping Identifier property, enter a value.
If you don't specify any value, the default colors are displayed on a Progress bar. To learn how to define a color for the Progress bar, see AR System Progress Bar Widget Mapping form.
AR System Progress Bar Widget Mapping form
While designing a Progress bar, if you want to define a color for the Progress bar based on certain rules, you can use the AR System Progress Bar Widget Mapping form. The value in the Mapping Identifier box on this form must match the value for the Mapping Identifier property in Developer Studio . You can use this form before or after setting the properties for the Progress bar in Developer Studio .
The following table provides information about the fields available on the AR System Progress Bar Widget Mapping form:
| Field name | Field type | Description |
|---|---|---|
| Mapping Identifier | Character | Specifies the value that you must provide for the in a table to attach a mapping. |
| Status Value | Character | Specifies the status value for which you want to set the bar color. |
| Progress Bar Color | Selection:
| Specifies the color of the bar for the provided status value. |
| Precedence | Integer | Specifies the precedence for the overall status of the bar, in case there are multiple SLTs on the same bar. |
| Node Icon | Selection:
| Specifies the icon for the node on the progress bar. |
| Node Fill Color | Selection:
| Specifies the color for the node on the progress bar. |
