Configuring the Progress bar widget in Progressive Web Applications

The Progress bar widget is a component that you can configure to show the progress of a particular event or the steps of a particular process. You can also configure it to show the milestones on a timeline. For example, you can use this widget to display the status of your ticket.  Mid Tier  displays this widget on a form for which a progressive view is enabled. In  Developer Studio , you can enable the Progress bar widget by adding a table, and then setting the Display Type of the table to Progress Bar View.

A table on a form represents one Progress bar on the UI and the number of rows in that table represent the number of nodes on the Progress bar.

The following video (3:37) describes how to configure and use the progress bar widget:

 https://youtu.be/-T90EgZ_ZtI

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

1. On the progressive view of a form, double-click a Table field.
2. On the Properties panel, under the Display property group, for the Display Type property, select the Progress Bar View value.
3. In the Value column for the Tree/Table Property property, click the ellipsis button.
   The Tree/Table Property dialog box is displayed.
   
   
4. Perform the following steps:
   1. In the Form Name box, add any form from where you want to fetch the data in the table.
   2. In the Qualification box, add a condition as per your requirement.
   3. Add the minimum required six columns for the mappings.
      You can add any additional columns, if required.
   4. Click OK.
5. Click a column in the table.

6. 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.

7. Double-click the Table field.

8. (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: