How to customize the Designer Toolbar using API?

Introduction

Bold BI’s Dashboard Designer Palette can be tailored to fit your specific needs using the API. This customization allows for a more streamlined and focused design experience by removing unnecessary widget items or groups and adjusting the widget panel’s appearance.

Removing Specific Widget Items or Groups

To enhance the user experience, you may want to remove certain widget items or groups from the item panel. This can be achieved using the beforeWidgetItemsListed API event. Below is an example of how to remove the Bar widget from the Comparison group:

widgetSettings: {
    beforeWidgetItemsListed: function (args) {
        args.widgetInfo.forEach(function (group) {
            if (group.GroupName == "Comparison") {
                group.Items = group.Items.filter(function (item) {
                    return item.widgetDisplayName != "Bar";
                });
            }
        });
    }
},

Customizing the Widget Panel

The widget panel can be customized using various API properties to hide default tabs, change display texts, and modify placeholder texts for search bars. The following properties are available:

• hideDefaultWidgets: Hides the Default widget panel tab.
• hideExistingWidgets: Hides the Existing widget panel tab.
• defaultPanelDisplayText: Changes the display text of ‘DEFAULT’ in the item panel.
• existingPanelDisplayText: Changes the display text of ‘EXISTING’ in the item panel.
• defaultPanelSearchPlaceholder: Changes the placeholder text of the Default search bar.
• existingPanelSearchPlaceholder: Changes the placeholder text of the Existing search bar.

dashboardSettings: {
    widgetsPanel: {
        hideDefaultWidgets: false, // By default, the Default Widgets will be shown.
        hideExistingWidgets: false, // By default, the Existing Widgets will be shown.
        defaultPanelDisplayText: "", //By default, the text will be "DEFAULT".
        existingPanelDisplayText: "", // By default, the text will be "EXISTING".
        defaultPanelSearchPlaceholder: "", //By default, the text will be "Search Widgets".
        existingPanelSearchPlaceholder: "", // By default, the text will be "Search Dashboards".
    }
}

Here is an example of how to apply these customizations:

dashboardSettings: {
    widgetsPanel: {
        hideDefaultWidgets: true,
        hideExistingWidgets: true,
        defaultPanelDisplayText: "Inbuild",
        existingPanelDisplayText: "Widgets",
        defaultPanelSearchPlaceholder: "Inbuild Widgets",
        existingPanelSearchPlaceholder: "Existing Widgets",
    }
}

Examples

Hide a Default Widget Section

To hide the Default widget section from the item panel:

dashboardSettings: {
    widgetsPanel: {
        hideDefaultWidgets: true,
    }
}

Customizing the Display Text and Search Placeholder Text

To change the default text and placeholder text in the item panel:

dashboardSettings: {
    widgetsPanel: {
        defaultPanelDisplayText: "Inbuild",
        existingPanelDisplayText: "Widgets",
        defaultPanelSearchPlaceholder: "Inbuild Widgets",
        existingPanelSearchPlaceholder: "Existing Widgets",
    }
}

dashboardSettings: {
    widgetsPanel: {
        hideDefaultWidgets: true,
        hideExistingWidgets: true,
    }
}

By implementing these customizations, you can tailor the Dashboard Designer Palette to better suit your workflow and design preferences.

Additional References

• Embedding API Reference – Events - JavaScript Embedding