Search results

Embedding Bold BI Dashboards in Blazor using the Embedded SDK

Created a Blazor application for achieving this embedding. Here, set the server and dashboard details as the embed details, and the dashboard will be rendered after passing the authorization.

NOTE: Reading the Getting Started section of the documentation is the best way to get started. The Getting Started guide provides you enough information that you need to know before working on the sample.

How to run the sample

  1. Please download the Blazor forms sample from the attached file.

  2. You need to set the following properties in _Host.cshtml and EmbedProperties.cs file as follows.
    Hostdetails Embed Properties

    RootUrl Dashboard Server BI URL (ex: http://localhost:5000/bi, http://dashboard.syncfusion.com/bi).
    SiteIdentifier For Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be empty string.
    DashboardId Provide the dashboard id of the dashboard you want to embed here. Please refer below how to get the dashboard id.
    UserEmail UserEmail of the Admin in your Bold BI, which will be used to get the dashboards list.
    UserPassword Password of the Admin in Bold BI, which will be used to get the dashboards list.
    EmbedSecret You can get your EmbedSecret key from embed tab by enablingEnable embedauthentication in Administration page as mentioned in next step.
  1. You can get your Embed Secret key from the administrator setting section. Please refer to this link ,for more details.

  2. Then, run your Blazor Forms application.

Get dashboard ID

You could get the item id of the dashboard from the BI server. Please refer to this link and the following screenshot.

Get dashboard ID

After changing the above details in the sample, you can run the Blazor Forms and the dashboard will be rendered.

How this sample works

  1. Based on the dashboardId provided in the _Host.cshtml,we will authorize the server URL by calling the GetEmbedDetails function as follows.

    Get Embed Details

  2. In the above authorization, generated the SignatureUrl with the provided EmbedSecret key and validate the embed details in Bold BI. Once details are validated, the dashboard starts to render.

  3. In the _Host.cshtml, you can change the dashboard Id of the respective dashboard as you wish to embed.

    Hostdetails