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
Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
Label Name: Specifies the display name or title for a field or control in the user interface.
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.
Progress Bar Type: Select the type of progress bar to display from the following options: Line, Circle, or Group.
2nd Step – API
Form (Weightage Field Binding): Select the form field used to bind the weightage data from the dropdown menu.
Source Weightage: Specify the source of weightage for progress calculation.
Form: Use form fields for weightage calculations.
Progress Field: Define the field used to track progress.
Control Key: The key used to identify the control in the form.
Weightage: The assigned weightage for the control.
Api Fields (Calculate %): Use API fields to calculate percentage progress.
Actual Value Field: The field representing the actual value for calculation.
Total Value Field: The field representing the total value for calculation.
Single Field: Use a single API field for progress calculation.
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:
Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
Is Slider Type?: Specify whether the progress bar is a slider.
Minimum Value: Set the minimum value for the slider.
Maximum Value: Set the maximum value for the slider.
Bar Color: Define the color of the progress bar.
Thumb Color: Set the color of the slider thumb.
Bar Height: Specify the height of the progress bar.
Thumb Height: Define the height of the slider thumb.
Bar Border Color: Set the border color of the progress bar.
Thumb Border Color: Specify the border color of the slider thumb.
Border Width: Define the width of the border for the bar and thumb.
Bar Border Radius: Set the border radius for the progress bar.
Thumb Border Radius: Specify the border radius for the slider thumb.
Height: Define the overall height of the progress bar.
Max: Specify the maximum value of the progress bar.
Color: Select the color of the progress bar from the dropdown menu.
Striped: Enable or disable striped styling for the progress bar.
Animated: Toggle animation for the progress bar to show dynamic movement.
Show Value: Display the progress value as a label on the progress bar.
Is Vertical: Specify whether the progress bar is displayed vertically.
Bar Title: Set the title for the vertical progress bar.
Bar Subtitle: Define the subtitle for the vertical progress bar.
Height: Specify the height of the vertical progress bar.
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:
Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
Width: Set the width of the circular progress bar.
Height: Define the height of the circular progress bar.
Outer Stroke Width: Specify the thickness of the outer stroke of the progress bar.
Outer Stroke Color: Set the color of the outer stroke for the progress bar.
Outer Stroke Line-Cap: Choose the style of the line-cap for the outer stroke, such as round or square.
Custom Class: Apply a custom CSS class to style the progress bar.
Animation: Configure the animation settings for the progress bar.
Animation Duration: Set the duration of the animation in milliseconds.
Space: Define the spacing between animation segments.
Clock Wise: Enable or disable clockwise animation for the progress bar.
Show Title: Display the title within the progress bar.
Text Color: Set the color of the title text.
Font Size: Specify the font size of the title text.
Animate Title: Enable animation for the title.
Show Subtitle: Display a subtitle below the title in the progress bar.
Subtitle Text: Set the text for the subtitle.
Text Color: Specify the color of the subtitle text.
Font Size: Define the font size of the subtitle.
Text Animate: Enable animation for the subtitle text.
Show Unit: Display a unit (e.g., percentage) on the progress bar.
Unit: Specify the unit to display (e.g., %, px).
Font Size: Define the font size of the unit text.
Color: Set the color of the unit text.
Show Background: Enable or configure the background settings for the progress bar.
Stroke: Set the stroke style for the background.
Stroke Width: Specify the width of the background stroke.
Padding: Add padding to the background.
Background Color: Set the color of the progress bar background.
Opacity: Adjust the opacity of the background.
Show Inner Stroke: Display and configure the inner stroke settings.
Stroke Width: Set the width of the inner stroke.
Stroke Color: Specify the color of the inner stroke.
Render on Click: Enable the progress bar to render only after a user click.
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:
Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
Minimum Value: Specify the minimum value for the range or slider control.
Maximum Value: Set the maximum value for the range or slider control.
Groups: Configure grouped ranges within the slider or control for better segmentation.
Min: Set the minimum value for the group.
Max: Specify the maximum value for the group.
Color Code: Assign a specific color to represent the group visually.
Label: Provide a label for the group to describe its purpose or range.
Click “Confirm” and “Progressbar” control is
configured.