Category / Section
How to Publish and Create Progress Bar Custom Widget
Published:
Follow these steps to publish the custom widget into the Bold BI application and use it.
Step
3: Once you publish the custom widget, the Progress Bar custom
widget will appear under the Miscellaneous section of the designer panel as in the following image.
Step
4: Drag and drop the widget and configure the data. The progress bar custom widget will render as in the following image.
Improvement in the Progress Bar Custom Widget
Add new improvements such as adding a stripe and progress
segment, and also improve the UI of the Progress Bar Custom widget by making changes in the sourcefile.js file.
To debug and make changes in the custom widget, follow these steps:
- Unpack the Progress Bar custom widget (ProgressBar.bicw) by following the steps in the mentioned link.
- Add the debugger to the sourcefile.js file's init() method. Also, add the needed changes in the sourcefile.js file.
- Publish the custom widget by following the steps in this link.
- Now, open the new dashboard in the Bold BI designer.
- Open the Developer Tools in the Browser.
- Drag and drop the Progress Bar Custom Widget in the Designer.
- Now, the debugger will trigger.
Also, the Progress Bar Custom Widget is developed using the EJ2 Progress Bar component. For any new options, check the available API in the UG link.
Methods and use cases in the Progress Bar source file
The following table explains the use case of the methods available in sourcefile.js.
Methods | Use case |
init() | This method will trigger when the progress bar custom widget is dragged and dropped in the designer or initialized in the viewer. |
renderProgressBar() | This method is used to form the data source input for the custom widget and render the Progress Bar. |
update() | This method will trigger when the widget is resized, data is configured in the widget, and when the changes are made in the property panel. |