How to Publish and Create Progress Bar Custom Widget

Bold BI allows you to enhance your dashboards with a variety of custom widgets, including Progress Bar custom widget. This knowledge base article provides step-by-step instructions on how to add and use the Progress Bar custom widget in your Bold BI dashboards. The process includes:

1. Downloading the Custom Widget
2. Publishing the Custom Widget
3. Locating the Custom Widget
4. Configuring the Widget

Download the Custom Widget

• To begin, download the Accumulation Progress Bar custom widget from this article.

Publish the Custom Widget

• After downloading the widget, publish the custom widget into the Bold BI application to make it available for use in your dashboards, Publishing ensures the widget is integrated into your Bold BI environment and accessible to all authorized users.

Locate the Custom Widget in Designer

• Once the widget is published, it will appear in the Designer Panel of Bold BI. To add it to your dashboard follow the below steps
  1. Open your dashboard in design mode.
  2. In the widget search bar within the Designer Panel, search for “Progress Bar”.
     
     
  3. Drag and drop the Progress Bar widget from the search results to your desired location on the dashboard canvas.

This places the widget on your dashboard, ready for configuration.

Configure the Custom Widget

To display data effectively in the Progress Bar, ensure you configure at least one value. Follow these steps for configuration:

• Drag and drop the custom Progress Bar onto the canvas and resize it as needed.
• Assign data to the widget.
• Once configured, the bar will display your data accordingly.               

Formatting the Bar Widget

You can enhance the appearance of the Progress bar using settings in the Properties tab.

Progress Settings          

Progress Bar Color

• Customize the color of Progress bar.

Track Color

• Customize the color of Track.

Progress Bar Height

• Customize the height of Progress bar.
  

Corner Radius

• Customize the radius of Progress bar corner.
  

ProgressBar Position

• Set the Progress bar position to Top, Middle or Bottom.
• Change the Progress bar position using a dropdown menu.
  

Show Progress Value

• Toggle the visibility of Progress value labels.
• Disabling this option does not working the related properties, as shown in the image below.

Progress Bar Value Position

• Set the Progress bar value position to Top, On bar or Bottom.
• Change the Progress bar value position using a dropdown menu.

Show DecimalPlaces Value

• Toggle the visibility of Decimal places value labels.
• Disabling this option does not working the related properties, as shown in the image below.

ProgressBar Value Color

• Customize the color of Progress bar value.

ProgressBar Text Font Weight

• Set the Progress bar text font weight to Normal or Bold.
• Change the Progress bar text font weight using a dropdown menu.