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: Select from the following Line, Circle or Group

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. Bootstrap Column Class
  2. Is Slider Type?
    1. Minimum Value
    2. Maximum Value
    3. Bar Color
    4. Thumb Color
    5. Bar Height
    6. Thumb Height
    7. Bar Border Color
    8. Thumb Border Color
    9. Border Width
    10. Bar Border Radius
    11. Thumb Border Radius
  3. Height
  4. Max
  5. Color: Select option from dropdown menu
  6. Striped
  7. Animated
  8. Show Value
  9. 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. Bootstrap Column Class
  2. Width
  3. Height
  4. Outer Stroke Width
  5. Outer Stroke Color
  6. Outer Stroke Line-Cap
  7. Custom Class
  8. Animation
    1. Animation Duration
    2. Space
    3. Clock Wise
  9. Show Title
    1. Text Color
    2. Font Size
    3. Animate Title
  10. Show Subtitle
    1. Subtitle Text
    2. Text Color
    3. Font Size
    4. Text Animate
  11. Show Unit
    1. Unit
    2. Font Size
    3. Color
  12. Show Background
    1. Stroke
    2. Stroke Width
    3. Padding
    4. Background Color
    5. Opacity
  13. Show Inner Stroke
    1. Stroke Width
    2. Stroke Color
  14. Render on Click
  15. To Be Fixed

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

  1. Bootstrap Column Class
  2. Minimum Value
  3. Maximum Value
  4. Groups
    1. Min
    2. Max
    3. Color Code
    4. Label

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