How to Add Custom Icons and Buttons to Embedded Dashboard Designer?

Published:

Integrating custom icons and buttons into the Bold BI Dashboard Designer enhances the functionality and user experience of the embedded dashboard designer. This article provides a step-by-step guide on how to add custom icons and buttons to the dashboard designer toolbar using JavaScript embedding techniques.

Adding Custom Icons to the Dashboard Designer Toolbar

To add custom icons to the dashboard designer toolbar, follow these steps:

In your application’s code, locate the BoldBI.create() method.
Add the beforeDesignerToolbarIconsRendered event to the dashboardSettings JavaScript API member.
Within the event function, use JavaScript to add the icon as shown in the example code below:

this.dashboard = BoldBI.create({
    mode: BoldBI.Mode.Design,
    dashboardSettings: {
        beforeDesignerToolbarIconsRendered: function (args) {
            args.toolbarIcons.push({
                class: 'su-without-comment',
                iconType: 'custom',
                iconTooltip: 'Comment',
                label: 'Comment'
            });
        }
    }
});
this.dashboard.loadDesigner();

To enable click functionality for the custom icon, use the toolbarClick event within the same BoldBI.create() method:

dashboardSettings: {
    toolbarClick: function (args) {
        if (args.click == "Comment") {
            // Implement the desired operation for when the Comment icon is clicked.
        }
    }
}

Before adding Icon:

After adding Icon:

Adding Custom Buttons to the Dashboard Designer Toolbar

To add a custom button to the dashboard designer toolbar, follow these steps:

In the BoldBI.create() method, include the beforeDesignerToolbarButtonsRendered event as shown in the example code below:

dashboardSettings: {
    beforeDesignerToolbarButtonsRendered: function (args) {
        args.toolbarButtons.push({
            class: 'new-btn-class',
            elementId: 'new-button-id',
            label: 'Custom Button',
        });
    }
}

To add click functionality to the new button, utilize the toolbarClick event as shown in the example code below:

dashboardSettings: {
    toolbarClick: function (args) {
        if (args.click == "Custom Button") {
            // Implement the desired operation for when the Custom Button is clicked.
        }
    }
}

By following these steps, you can successfully add custom icons and buttons to the Bold BI Dashboard Designer toolbar, providing additional functionality tailored to your application’s needs.

Before adding button: