Progressbar

You have to go through a three-step form wizard to enable this Control, i.e., Design, API & Advance. Let’s explain these steps below:

1st Step – Design

1. Database Field Name (mandatory): These are the attributes of the form
2. Label Name
3. Column Width
4. Progress Bar Type: Line or Circle

2nd Step – API

1. Form (Weightage Field Binding): Select option from the dropdown menu
2. Source Weightage
   1. Form
      1. Progress Field
         1. Control Key
         2. Weightage
   
   2. Api Fields (Calculate %)
      1. Actual Value Field
      2. Total Value Field
   
   3. Single Field
      1. API Field
   

3rd Step – Advance

If “Progress Bar Type” is selected as “Line”, then the following actions should perform as follows:

1. Height
2. Max
3. Color: Select option from dropdown menu
4. Striped
5. Animated
6. Show Value
7. Is Vertical
   1. Bar Title
   2. Bar Subtitle
   3. Height
   4. Custom Color

If “Progress Bar Type” is selected as “Circle”, then the following actions should perform as follows:

1. Width
2. Height
3. Outer Stroke Width
4. Outer Stroke Color
5. Outer Stroke Line-Cap
6. Custom Class
7. Animation
   1. Animation Duration
   2. Space
   3. Clock Wise
8. Show Title
   1. Text Color
   2. Font Size
   3. Animate Title
9. Show Subtitle
   1. Subtitle Text
   2. Text Color
   3. Font Size
   4. Text Animate
10. Show Unit
    1. Unit
    2. Font Size
    3. Color
11. Show Background
    1. Stroke
    2. Stroke Width
    3. Padding
    4. Background Color
    5. Opacity
12. Show Inner Stroke
    1. Stroke Width
    2. Stroke Color
13. Render on Click
14. To Be Fixed

Click “Confirm” and “Progressbar” control is configured.