How to add or edit Dashboards in Blazor with JS Embed Sample

This article guides how to add or edit dashboards in a Bold BI Blazor with JavaScript embed sample.

Editing an Existing Dashboard

To edit an existing dashboard in the embed sample, follow these steps:

1. Navigate to the file located at {sample_base_path}\blazor-server-sample-master\blazor-server-sample-master\Views\EmbedData\_Host.cshtml.

2. Update the code snippet as follows:

   $(document).ready(function () {
       this.dashboard = BoldBI.create({
           serverUrl: rootUrl + "/" + siteIdentifier,
           embedContainerId: "dashboard",
           mode: BoldBI.Mode.Design,
           embedType: embedType,
           environment: environment,
           width: "100%",
           height: "100%",
           expirationTime: 100000,
           authorizationServer: {
               url: authorizationServerUrl
           }
       });
       this.dashboard.loadDesigner();
   });
   

Code Snippet Explanation

• Set the mode to BoldBI.Mode.Design to switch from view mode to design mode.
• Call the loadDesigner() function instead of loadDashboard() to load the designer page.

Adding a New Dashboard

To add a new dashboard in the embed sample, follow these steps:

1. Navigate to the file at {sample_base_path}\blazor-server-sample-master\blazor-server-sample-master\Views\EmbedData\_Host.cshtml.

2. Update the code snippet as follows:

   $(document).ready(function () {
       this.dashboard = BoldBI.create({
           serverUrl: rootUrl + "/" + siteIdentifier,
           embedContainerId: "dashboard",
           mode: BoldBI.Mode.Design,
           embedType: embedType,
           environment: environment,
           width: "100%",
           height: "100%",
           expirationTime: 100000,
           authorizationServer: {
               url: authorizationServerUrl
           }
       });
       this.dashboard.loadDesigner();
   });
   

Code Snippet Explanation

• Set the mode to BoldBI.Mode.Design to switch from view mode to design mode.
• Call the loadDesigner() function to load the designer page.
• Remove the dashboardId parameter from the BoldBI.Create instance, as it is not needed to add a new dashboard.

Additional References

• Dashboard Designer – JavaScript Embedding | Bold BI Learning
• Embedding Options in Bold BI