How to Fix Dashboard Data Wipe-Out and Layout Misalignment Caused by Cached Data in Embedded Bold BI Dashboards

In embedded Bold BI dashboards, widgets may render blank (“data wipe-out”) or appear misaligned when switching between dashboards if cached localData (i.e., layoutData and widgetData) from one dashboard is reused for another.
This happens because layoutData and widgetData are dashboard-specific. Reusing them for a different dashboardId causes Bold BI to render widgets with mismatched layout metadata, resulting in blank or distorted visuals.

Step-by-Step Instructions

1. Verify whether localData caching is enabled.

• Open your embedding code where BoldBI.create(…) is called.
• Check whether localData is configured:

localData: {
 loadFromData: true,
 layoutData: /* ... */,
 widgetData: /* ... */
}

Case A — localData exists

• Proceed with troubleshooting the cache issue.
  Example in a VS Code ASP.NET MVC project file:
  
  

Case B — localData NOT present

• The localData property is passed inside the BoldBI.create() configuration object. If this property is not present, the issue does not apply.
  Example snippet in a VS Code project file:
  

  

• Verify whether the same cached object is reused when switching dashboards. If yes, this is likely the cause of:

  • Blank widgets
  • Misaligned layout

2. Store cached data per dashboard ID

• Avoid sharing a single cache across dashboards.
• Create a cache object keyed by dashboardId.
• Store each dashboard’s layoutData and widgetData separately.

const cachedData = dashboardWidget[dashboardData.dashboardId];

const dashboardConfig = {
 ...baseConfig,
 ...(cachedData && {
   localData: {
     loadFromData: true,
     layoutData: cachedData.layout,
     widgetData: cachedData.widget
   }
 })
}; 

• This ensures:
  • Layout and data belong to the correct dashboard.
  • No cross-dashboard data contamination

3. Apply localData only for the matching dashboard

• Retrieve the cache using the current dashboardId.
• Apply localData only when cache exists for that same dashboard.
• This ensures:
  • Correct layout is applied.
  • Data matches the selected dashboard.

4. Destroy the previous dashboard instance before loading a new one

• Before switching dashboards, get the existing instance:

const existing = BoldBI.getInstance('dashboard');
existing?.destroy();

const dashboard = BoldBI.create(dashboardConfig);
dashboard.loadDashboard(); 

• Prevents:
  • Layout overlap
  • Residual state from previous dashboards

5. Capture localData after dashboard render (first-load vs cached-load)

• For the first load (no cache), allow the dashboard to render normally.
• After rendering, capture and store data:

actionComplete: (args) => {
 if (args.eventType === 'dashboardRendered') {
   const instance = BoldBI.getInstance('dashboard');
   const data = instance.getDashboardData();

   dashboardWidget[dashboardId] = {
     widget: data.widgetData,
     layout: data.layoutData
   };
 }
} 

• Ensures:
  • Cache is created safely.
  • Future loads are optimised.

6. Validate by switching dashboards

• Load your embedded application.
• Switch between dashboards multiple times.
• Verify:
  • Widgets display correct data.
  • Layout remains aligned
  • No blank or distorted UI appears.

Code Samples

Overall consolidated and minimal working implementation

// Per-dashboard cache structure
const dashboardCache = {}; // { [dashboardId]: { layoutData, widgetData } }

function renderDashboard(dashboardData) {
 const dashboardId = dashboardData.dashboardId;
 const cached = dashboardCache[dashboardId];

 // Destroy previous instance
 const existing = BoldBI.getInstance("dashboard");
 existing?.destroy?.();

 const dashboardConfig = {
   serverUrl: `${dashboardData.serverUrl}/${dashboardData.siteIdentifier}`,
   dashboardId: dashboardId,
   embedContainerId: "dashboard",
   embedType: dashboardData.embedType,
   environment: dashboardData.environment,
   mode: BoldBI.Mode.View,
   width: "100%",
   height: "100%",

   // Apply cache only if it matches dashboardId
   ...(cached && {
     localData: {
       loadFromData: true,
       layoutData: cached.layoutData,
       widgetData: cached.widgetData
     }
   }),

   // Capture cache after render
   actionComplete: (args) => {
     if (args?.eventType === "dashboardRendered") {
       const instance = BoldBI.getInstance("dashboard");
       const data = instance?.getDashboardData?.();

       if (data?.layoutData && data?.widgetData) {
         dashboardCache[dashboardId] = {
           layoutData: data.layoutData,
           widgetData: data.widgetData
         };
       }
     }
   }
 };

 const dashboard = BoldBI.create(dashboardConfig);
 dashboard.loadDashboard();
}

Additional Notes

• This issue is not caused by dashboard layout size or Fixed Layout settings.
• It occurs specifically in embedded scenarios with frontend caching.
• Removing localData temporarily resolves the issue but disables caching optimization.
• The correct fix is to isolate the cache per dashboard and manage the lifecycle properly.

Conclusion

To avoid data wipe-out and layout misalignment when switching dashboards.

• Always ensure cached layoutData and widgetData are applied only to the matching dashboard.
• Destroy previous dashboard instances before loading new ones.
  This guarantees accurate rendering and stable dashboard behaviour in embedded applications.

Related Articles

• Embedding SDK sample (ASP.NET MVC)
• JavaScript Embedding API Reference – Methods
• JavaScript Embedding API Reference – Members