How to Prevent “Cannot Read Properties of Null” Error When Switching Modes in Bold BI Embedded SDK

Overview

When embedding dashboards using the Bold BI Embedded SDK (Component API v2.0), users may encounter the error “Cannot read properties of null (reading ‘find’)” if Designer mode is triggered before the dashboard finishes initialization.

This typically occurs when users click an Edit button immediately after the dashboard loads. The following approach prevents this race condition by enabling Designer mode only after the dashboard lifecycle reaches the renderDashboard stage.

Steps to Resolve

Step 1: Hide or Disable the Edit Button Initially

• Prevent users from switching modes before the dashboard is ready.
  Sample Code

<div id="dashboard"></div>

<!-- Hidden initially -->
<button id="editButton" style="display:none;">Edit</button> 

Below is an example placement in an ASP.NET MVC project

• Optional: explicitly ensure hidden state
  Sample Code

document.getElementById("editButton").style.display = "none"; 

Step 2: Initialize Dashboard in Viewer Mode and Listen for Events

• Use onActionStart to listen for lifecycle events such as renderDashboard.
• This event fires when dashboard rendering begins
  Sample Code

var dashboard = BoldBI.create({
 serverUrl: rootUrl + "/" + siteIdentifier,
 dashboardId: dashboardId,
 embedContainerId: "dashboard",
 mode: BoldBI.Mode.View,
 embedType: embedType,
 embedToken: embedToken,
        // IMPORTANT: Add event listener here
 events: {
   onActionStart: function (args) {
     console.log("Event triggered:", args.eventType);
         
           // Key fix logic
     if (args.eventType === "renderDashboard") {    
       enableEditButton();
     }
   }
 }
});

dashboard.loadDashboard(); 

Below is an example placement in an ASP.NET MVC Sample

Step 3. Enable Edit Button After renderDashboard Event

• Allow user interaction only after initialization begins.
  Sample Code

function enableEditButton() {
 var editBtn = document.getElementById("editButton");
 if (editBtn) {
   editBtn.style.display = "inline-block";
 }
} 

Step 4: Switch to Designer Mode Safely Using loadDesigner()

• Do NOT destroy/recreate the instance (it may lose filters/state)
• Use loadDesigner() instead
  Sample Code

document.getElementById("editButton").addEventListener("click", function () {
 dashboard.loadDesigner();
}); 

Best Practices

• Always wait for the renderDashboard event before allowing user interactions
• Use lifecycle events (onActionStart) to manage application flow
• Validate dashboard readiness before invoking mode changes
• Avoid immediate mode switching after initialization
• Avoid destroying/recreating instances as a primary fix (may lose state such as filters)

Conclusion

The error occurs due to premature switching between dashboard modes. By leveraging the renderDashboard event, you ensure the dashboard is fully initialized before enabling Designer mode, eliminating race conditions and ensuring a seamless user experience.

Related Articles

• Dashboard Events (renderDashboard event)
• Embed Dashboard Designer (loadDesigner method)
• Create and Edit Dashboards in Embedded Application
• Embedding SDK Overview