Category / Section
How to add Date Time Range Picker Custom Widget in a dashboard
Published:
Follow these steps to publish the Date Time Range Picker custom widget into the Bold BI application and use it.
Step 1: Download the Date Time Range Picker custom widget.
Step 2: Publish the custom widget to the Bold BI application by following the UG documentation link.
Step 3: Once you publish the custom widget, the Date Time Range Picker 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 Date Time Range Picker custom widget will render as in the following image. At initial rendering, only the StartDateTime picker alone get enabled and EndDateTime picker will get disable.
Step 5: Once we selected the StartDateTime and the EndDateTime picker will get enabled then you can apply filter with the use of it as in the below image.
Note: Custom widget publishing through UI is supported only in the Bold BI on-premises build. Also, this DataTimeRange picker will support Date and Default formats of the date column alone.
Improvement in the Data Time Range Picker Custom Widget
Add new improvements to Date Time Range Picker Custom widget by making changes to the sourcefile.js file.
To debug and make changes in the custom widget, follow these steps:
- Unpack the Date Time Range Picker custom widget (DateTimeRangePicker.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 Date Time Range Picker Custom Widget in the Designer.
- Now, the debugger will trigger.
- Also, the Date Time Range Picker Custom Widget is developed using the EJ2 Date Time picker. For any new options, check the available API in the UG link.
Related Links:
PN
