How to Add Borders to Widgets within Embedded Dashboard?
Overview
Adding borders to widgets in an embedded dashboard can enhance the visual structure and organization of the displayed data. Below are methods to apply borders to all widgets efficiently.
Enabling Borders in Properties
To add borders to each widget, activate the border option in the Properties section. Please refer the following documentation to enable the show border option for a widget.
https://help.boldbi.com/visualizing-data/working-with-widgets/customizing-container-appearance/#show-border
However, if you are managing many widgets, this approach might be time-consuming.
Using ActionComplete Event
To add borders to all widgets at once, you can utilize the actionComplete event. This event allows you to check if the dashboard has been rendered and then apply the desired border style.
Code Snippet
Here is a sample code snippet to achieve this:
actionComplete: function(args) {
if (args.eventType === 'dashboardRendered') {
document.getElementsByClassName('bbi-dbrd-control-container')[0].style.border = '1px solid';
document.getElementsByClassName('bbi-dbrd-control-container')[1].style.border = '1px solid';
}
}
Sample Screenshot
Applying CSS for Borders
Instead of updating HTML elements directly, you can use CSS to apply borders to all widgets in the dashboard. This method is more efficient and allows for easier adjustments.
CSS Code
You can add the following CSS to your embedded application:
#dashboard_embeddedbi .bbi-canvas.bbi-dbrd-control-container {
border: 1px solid #DDDDDD !important;
border-radius: 8px !important;
}
This CSS rule will apply a solid border with a light gray color and rounded corners to all widgets within the specified dashboard.
Conclusion
By using the actionComplete event or applying CSS styles, you can efficiently add borders to all widgets in an embedded dashboard without the need for individual configuration.
Additional References
