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): Defines the name of the database field to which the component's data will be mapped and stored.
2. Label Name: Specifies the display name or title for a field or control in the user interface.
3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
4. Progress Bar Type: Select the type of progress bar to display from the following options: Line, Circle, or Group.

2nd Step – API

1. Form (Weightage Field Binding): Select the form field used to bind the weightage data from the dropdown menu.
2. Source Weightage: Specify the source of weightage for progress calculation.
   1. Form: Use form fields for weightage calculations.
      1. Progress Field: Define the field used to track progress.
         1. Control Key: The key used to identify the control in the form.
         2. Weightage: The assigned weightage for the control.
   
   2. Api Fields (Calculate %): Use API fields to calculate percentage progress.
      1. Actual Value Field: The field representing the actual value for calculation.
      2. Total Value Field: The field representing the total value for calculation.
   
   3. Single Field: Use a single API field for progress calculation.
      1. API Field: The API field used to fetch progress data.
   

3rd Step – Advance

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

1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
2. Is Slider Type?: Specify whether the progress bar is a slider.
   1. Minimum Value: Set the minimum value for the slider.
   2. Maximum Value: Set the maximum value for the slider.
   3. Bar Color: Define the color of the progress bar.
   4. Thumb Color: Set the color of the slider thumb.
   5. Bar Height: Specify the height of the progress bar.
   6. Thumb Height: Define the height of the slider thumb.
   7. Bar Border Color: Set the border color of the progress bar.
   8. Thumb Border Color: Specify the border color of the slider thumb.
   9. Border Width: Define the width of the border for the bar and thumb.
   10. Bar Border Radius: Set the border radius for the progress bar.
   11. Thumb Border Radius: Specify the border radius for the slider thumb.

3. Height: Define the overall height of the progress bar.
4. Max: Specify the maximum value of the progress bar.
5. Color: Select the color of the progress bar from the dropdown menu.
6. Striped: Enable or disable striped styling for the progress bar.
7. Animated: Toggle animation for the progress bar to show dynamic movement.
8. Show Value: Display the progress value as a label on the progress bar.
9. Is Vertical: Specify whether the progress bar is displayed vertically.
   1. Bar Title: Set the title for the vertical progress bar.
   2. Bar Subtitle: Define the subtitle for the vertical progress bar.
   3. Height: Specify the height of the vertical progress bar.
   4. Custom Color: Apply a custom color to the vertical progress bar.

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

1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
2. Width: Set the width of the circular progress bar.
3. Height: Define the height of the circular progress bar.
4. Outer Stroke Width: Specify the thickness of the outer stroke of the progress bar.
5. Outer Stroke Color: Set the color of the outer stroke for the progress bar.
6. Outer Stroke Line-Cap: Choose the style of the line-cap for the outer stroke, such as round or square.
7. Custom Class: Apply a custom CSS class to style the progress bar.
8. Animation: Configure the animation settings for the progress bar.
   1. Animation Duration: Set the duration of the animation in milliseconds.
   2. Space: Define the spacing between animation segments.
   3. Clock Wise: Enable or disable clockwise animation for the progress bar.
9. Show Title: Display the title within the progress bar.
   1. Text Color: Set the color of the title text.
   2. Font Size: Specify the font size of the title text.
   3. Animate Title: Enable animation for the title.
10. Show Subtitle: Display a subtitle below the title in the progress bar.
    1. Subtitle Text: Set the text for the subtitle.
    2. Text Color: Specify the color of the subtitle text.
    3. Font Size: Define the font size of the subtitle.
    4. Text Animate: Enable animation for the subtitle text.
11. Show Unit: Display a unit (e.g., percentage) on the progress bar.
    1. Unit: Specify the unit to display (e.g., %, px).
    2. Font Size: Define the font size of the unit text.
    3. Color: Set the color of the unit text.
12. Show Background: Enable or configure the background settings for the progress bar.
    1. Stroke: Set the stroke style for the background.
    2. Stroke Width: Specify the width of the background stroke.
    3. Padding: Add padding to the background.
    4. Background Color: Set the color of the progress bar background.
    5. Opacity: Adjust the opacity of the background.
13. Show Inner Stroke: Display and configure the inner stroke settings.
    1. Stroke Width: Set the width of the inner stroke.
    2. Stroke Color: Specify the color of the inner stroke.
14. Render on Click: Enable the progress bar to render only after a user click.
15. To Be Fixed: Placeholder for future updates or corrections.

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

1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
2. Minimum Value: Specify the minimum value for the range or slider control.
3. Maximum Value: Set the maximum value for the range or slider control.
4. Groups: Configure grouped ranges within the slider or control for better segmentation.
   1. Min: Set the minimum value for the group.
   2. Max: Specify the maximum value for the group.
   3. Color Code: Assign a specific color to represent the group visually.
   4. Label: Provide a label for the group to describe its purpose or range.

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