How to Embed a Bold BI Dashboard Using a Blazor Server Sample
This knowledge base article outlines detailed steps for embedding the Bold BI dashboard using a Blazor Server sample.
Prerequisites
Before you begin, ensure the following requirements are met:
Step 1: Download the Blazor Server Sample
- Download and extract the
BlazorBoldBIsample.zipfrom the attached file. - Open the extracted project in Visual Studio Code
Step 2: Download the embedConfig.json File
To download the embedConfig.json file:
- Please make sure you have activated embed authentication on the embed settings page. If it is not currently activated, please refer to the image or detailed instructions below to enable it.
- To download the embedConfig.json file, please click on the following link for reference. Additionally, you can view the accompanying image for visual guidance
- Once you download the embedConfig.json file.In the embedConfig.Json File, you can find the required Dashboard ID, ServerURL, UserEmail, EmbedSecret Key, Embed Type, Environment, and SiteIdentifier details.
Step 3: Update Dashboard.razor File
In the downloaded sample project:
- Open Dashboard.razor.
- Replace the following values with your own credentials:
- serverUrl
- siteIdentifier
- embedSecret
- userEmail
- dashboardId
Example configuration:
serverUrl = "https://yourserver.boldbi.com";
siteIdentifier = "siteidentifier";
embedSecret = "your_embed_secret";
userEmail = "[email protected]";
dashboardId = "dashboard_id";
Ensure all values match your embedConfig.json file downloaded from the Bold BI environment.
Step 4: Update boldbi.js File
Open the boldbi.js file in the sample project and update the following fields:
- serverUrl
- siteIdentifier
- dashboardId
Important:
-
The
serverUrlmust include the Site Identifier in the following
Format:
https://yourserver.boldbi.com/{siteIdentifier} -
Replace
dashboardIdwith your required dashboard ID.
Ensure that the values in bothDashboard.razorandboldbi.jsare consistent.
Step 5: Run the Sample
Open a terminal in the project root directory and execute the following commands:
dotnet clean
dotnet build
dotnet run
Run the Blazor Server application
Step 6: Verify Dashboard Rendering
Once the application runs successfully:
- The browser will open automatically.
- The configured dashboard will be rendered.
References
