How to Embed Dashboards with Filter Views?

Embedding dashboards with specific filter views in your application can enhance user experience by providing tailored data visualizations. BoldBI’s JavaScript embedding API offers a flexible way to achieve this. Below are the steps to embed a BoldBI dashboard with views using JavaScript.

Steps to Embed a Dashboard with Views

1. Initialize the Embedding: Open your JavaScript embedded application code and locate the BoldBI.create() method. This is where we need to specify the dashboard and view details.

2. Specify Dashboard and View Details: Use either the viewId or viewName JavaScript API member to include the specific view you want to embed.

   • To use viewId, the unique identifier for the view you want to embed, you can refer to the documentation.

   function embedSample() {
       this.dashboard = BoldBI.create({
           serverUrl: rootUrl + "/" + siteIdentifier,
           dashboardId: "your-dashboard-id",
           viewId: "your-view-id",
           embedContainerId: "dashboard",
           height: "800px",
           width: "1200px",
           authorizationServer: {
               url: authorizationServerUrl
           }
       });
       boldbiEmbedInstance.loadView();
   }
   

   • To use viewName, simply provide the name of the view you have saved.

   this.dashboard = BoldBI.create({
       serverUrl: rootUrl + "/" + siteIdentifier,
       dashboardId: "your-dashboard-id",
       viewName: "your-view-name",
       embedContainerId: "dashboard",
       height: "800px",
       width: "1200px",
       authorizationServer: {
           url: authorizationServerUrl
       }
   });
   

3. Load the View: Call the loadView() method to render the dashboard with the specified view in your application.

   function renderDashboard() {
       this.dashboard = BoldBI.create({
           serverUrl: rootUrl + "/" + siteIdentifier,
           dashboardId: "your-dashboard-id",
           viewId: "your-view-id",
           embedContainerId: "dashboard",
           mode: BoldBI.Mode.View,
           embedType: embedType,
           environment: environment,
           width: "100%",
           height: "100%",
           expirationTime: 100000,
           authorizationServer: {
               url: authorizationServerUrl  
           }
       });
   
       console.log(this.dashboard);
       this.dashboard.loadView();
   }
   

Additional References

• Embedding API Reference - Members
• Embedding the Dashboard with Views
• Embedding API Reference - Methods

By following these steps, you can successfully embed a BoldBI dashboard with a specific view into your application, providing a seamless and interactive data visualization experience for your users.