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.