Configuring the Progress bar widget

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.

Related topics

Defining tables to display data

Enabling-users-to-customize-columns

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

icon_play.png https://youtu.be/-T90EgZ_ZtI

The following image shows the Progress bar widget:

progress-bar-widget.png

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.

    tree-table-property-dialog-box.png
  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:

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:

  • Danger
  • Success
  • Warning
  • Info
  • Inactive

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:

  • Check
  • Cross
  • None

Specifies the icon for the node on the progress bar.

Node Fill Color

Selection:

  • Danger
  • Success
  • Warning
  • Info
  • Inactive
  • None

Specifies the color for the node on the progress bar.