How to Change the Theme of an Embedded Dashboard Without Refreshing?

It is possible to change the theme of an embedded dashboard without refreshing the entire page when using JavaScript embedding techniques. This can enhance user experience by allowing seamless transitions between different themes.

Setting a Default Theme

To set a default theme for the embedded dashboard, you can use the JavaScript API member dashboardSettings.themeSettings.dashboard. This allows you to specify the initial theme that will be applied when the dashboard is first rendered.

Example Code for Initial Theme Setup

this.dashboard = BoldBI.create({
    dashboardSettings: {
        themeSettings: {
            dashboard: "Pastel-blue" // Initial theme file name at initial rendering
        }
    }
});
this.dashboard.loadDashboard();

Switching Themes at Runtime

To switch themes dynamically at runtime, you can utilize the JavaScript method updateDashboardTheme(). This method allows you to change the theme without needing to refresh the dashboard.

Example Code for Theme Change

1. Create a button that will trigger the theme change.

   

2. Define the ThemeChange function that will be called when the button is clicked.

function ThemeChange() {
    var Instance = BoldBI.getInstance("dashboard");
    Instance.updateDashboardTheme("Pastel-pink"); // New theme to be applied
}

Additional Steps

Before implementing the above code, ensure that you have uploaded and saved the dashboard theme files in the Bold BI application. For detailed instructions on how to achieve this, refer to the documentation on custom themes.

References

• How to Apply Custom Theme Using Dashboard Option
• Embedding API Reference - Methods
• Look and Feel Settings in Embedded Analytics