How to Add the Custom Icons and Buttons to the Data Source Designer in JS Embeddding?

When integrating the Bold BI’s data source designer, you may find the need to enhance the interface with custom icons or buttons to suit your specific functionality requirements. This article will guide you through the process of adding these custom UI elements in JavaScript embedding.

Adding a Custom Icon

To add a custom icon to the data source designer, follow these steps:

1. Within the BoldBI.create() method, add the event beforeDatasourceToolbarIconsRendered as provided in the reference code snippet below to include a custom icon, such as a comments icon. You can customize the class name to add different icons as needed.

this.dashboard = BoldBI.create({
    datasourceId: "d38adfe7-0766-4efd-b0bf-ecfcd19636a2",
    mode: BoldBI.Mode.DataSource,
    dashboardSettings: {
        beforeDatasourceToolbarIconsRendered: function (args) {
            args.toolbarIcons.push({
                class: 'su-without-comment',
                iconType: 'custom',
                iconTooltip: 'Comment',
                label: 'Comment'
            });
        }
    }
});
this.dashboard.loadDatasource();

2. 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.
        }
    }
}

Adding a Custom Button

To introduce a new custom button to the data source designer, you can use the following approach:

1. In the BoldBI.create() method, include the event beforeDatasourceToolbarButtonsRendered as provided in the reference code below:

dashboardSettings: {
    beforeDatasourceToolbarButtonsRendered: function (args) {
        args.toolbarButtons.push({
            class: 'new-button-class',
            elementId: 'new-button-id',
            isActionBtn: true,
            label: 'External button'
        });
    }
}

2. To add click functionality to the new button, you can utilize the event toolbarClick as provided in the reference code below:

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

By following these steps, you can effectively add custom icons and buttons to the data source designer in Bold BI, enhancing the user interface to meet your specific needs.

Additional References

• Bold BI JavaScript Embedding
• Embedding API Reference - Events
  Please note that the code snippets provided are examples, and you may need to adjust them according to your actual datasource Id and the specific functionality you want to implement.