How to create and publish GridWithSparkLine Control as a custom widget?

Published:

To incorporate the custom widget into the Bold BI application and utilize its functionality, please adhere to the following guidelines:

Step 1: Download the GridWithSparkLine Control custom widget from the attachment in this article.

Step 2: Publish the custom widget to the Bold BI application by following the steps in the help link.

Step 3: Once you publish the custom widget, the GridWithSparkLine Control custom widget will appear under the Miscellaneous section of the designer panel as in the following image.

Grid with sparkline custom widget in item panel

Step 4: Drag and drop the widget and configure the data. The GridWithSparkLine Control custom widget will render as in the following image.
Custom grid withsparkline rendered image

Custom grid withsparkline rendered image

Note: We must bound the unique values column as a first column in the Column(s) section to plot the Sparkline based on the unique values, also the hierarchy should be followed as in the above image. If you are going to bind more columns to the widget, make sure the hierarchy is proper “Last level hierarchy data should be bound at first like first city and then country” as in the above image.

Making Improvements in GridWithSparkLine Custom Widget

Add new improvements such as improving the UI of the GridWithSparkLine Control Custom widget by making changes in the sourcefile.js file.

To debug and make changes in the custom widget, follow these steps:

Unpack the GridWithSparkLine Control custom widget (GridWithSparkLine Control .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 GridWithSparkLine Control Custom Widget in the Designer.
Now, the debugger will trigger. Methods and use cases in the GridWithSparkLine Control source file.

Also, the GridWithSparkLine Custom Widget is developed using the EJ2 Grid syncfusion component. For any new options, check the available API in the UG link
The following table explains the use case of the methods available in sourcefile.js.

Methods	Use case
init()	This method will trigger when the GridWithSparkLine Control custom widget is dragged and dropped in the designer or initialized in the viewer.
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.

How to create and publish GridWithSparkLine Control as a custom widget?

Making Improvements in GridWithSparkLine Custom Widget

Related Links:

Access denied