Search results

Embedding Bold BI Dashboards in Blazor using the Embedded SDK

The sample has been provided in following sections for Blazor Server and Blazor WebAssembly, which demonstrates the dashboard rendering available in your Bold BI server and is followed by steps to create a new embedding application in the Blazor Server and Blazor WebAssembly on your own.

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

How to run Blazor Server sample

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

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

    UserEmail UserEmail of the Admin in your Bold BI, which will be used to get the dashboard.
    UserPassword Password of the Admin in Bold BI, which will be used to get the dashboard.
    EmbedSecret You can get your EmbedSecret key from embed tab by enabling Enable embed authentication in administration page.
    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 render.
  3. The dashboard can be rendered in design mode or created with the following changes in the _Host.cshtml.

    $(document).ready(function () {
           this.dashboard = BoldBI.create({
               serverUrl: rootUrl + "/" + siteIdentifier,
               dashboardId: dashboardId,
               embedContainerId: "dashboard",
               embedType: BoldBI.EmbedType.Component,
               environment: BoldBI.Environment.Enterprise,
               mode: BoldBI.Mode.Design,
               width: window.innerWidth + "px",
               height: window.innerHeight + "px",
               expirationTime: 100000,
               authorizationServer: {
                   url: authorizationServerUrl
               }
           });
           this.dashboard.loadDesigner();
       });
    serverUrl Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1)
    dashboardId Provide the dashboard id of the dashboard you want to embed in view or edit mode. Ignore this property to create new dashboard.
    embedContainerId Container Id in which dashboard renders.It should not contain hypen.
    mode In which mode you want to render dashboard. It can either be 'View' or 'Design' mode.
    expirationTime Set the duration for the token to be alive.
    authorizationServer Url of the 'GetDetails' action in the application.
  4. Run your Blazor Forms application.

How Blazor Server sample works

  1. Based on the dashboard provided in the _Host.cshtml, authorize the server URL by calling the GetEmbedDetails function as follows. Get Embed Details

  2. In the above authorization, generate 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, change the dashboard Id of the respective dashboard as you wish to embed. Hostdetails

Steps to create new Blazor Server Application to embed dashboard

  1. Start Visual Studio and click Create a new project.

  2. Choose Blazor Server Application (.NET Framework), then click Next. SelectProject

  3. Change the project name as you want, then click Create.

  4. Create the model classes EmbedProperties.cs and EmbedClass.cs to define the mandatory properties as follows.

       public class EmbedProperties
       {
           public static string UserEmail = "";  
    
           public static string UserPassword = ""; 
    
           public static string EmbedSecret = ""; 
       }
       public class EmbedClass
       {
           [DataMember]
           public string embedQuerString { get; set; }
           [DataMember]
           public string dashboardServerApiUrl { get; set; }
       }
  5. The following scripts and style sheets are mandatory to render the dashboard. Set the Layout = null at the top and replace the following code in your \Pages\_Host.cshtml page of the <head> tag.

       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
       <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v5.2.48/embed-js.js"></script>
  6. Inside the <body> tag, create the DOM element with the id dashboard and implement a function to render the dashboard.

     <div id="dashboard"></div>
     <script>
        var rootUrl = ""; 
        var siteIdentifier = "site/site1";
        var authorizationServerUrl = "api/EmbedData/GetDetails";
        var dashboardId = "8f24de87-1489-441a-8935-8dcc7d91fd9f"; 
        $(document).ready(function () {
            this.dashboard = BoldBI.create({
                serverUrl: rootUrl + "/" + siteIdentifier,//Please provide the Bold BI server url
                dashboardId: dashboardId,//Please provide the required dashboard Id.
                embedContainerId: "dashboard",
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                width: window.innerWidth + "px",
                height: window.innerHeight + "px",
                expirationTime: 100000,
                authorizationServer: {
                    url: authorizationServerUrl
                }
            });
            this.dashboard.loadDashboard();
        });
     </script>
  7. Under the controller folder, create a controller EmbedDataController.cs and define an API GetEmbedDetails(), which uses the GetSignatureUrl() method to generate the algorithm. In this API, the embedQuerString, userEmail and the value from the GetSignatureUrl() method is appended as query parameters in the URL to get details of particular dashboard.

        [HttpPost]
        [Route("GetDetails")]
        public string GetDetails([FromBody] object embedQuerString)
        {
            var embedClass = Newtonsoft.Json.JsonConvert.DeserializeObject<EmbedClass>(embedQuerString.ToString());
    
            var embedQuery = embedClass.embedQuerString;
            // User your user-email as embed_user_email
            embedQuery += "&embed_user_email=" + EmbedProperties.UserEmail;
            var embedDetailsUrl = "/embed/authorize?" + embedQuery + "&embed_signature=" + GetSignatureUrl(embedQuery);
    
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(embedClass.dashboardServerApiUrl);
                client.DefaultRequestHeaders.Accept.Clear();
    
                var result = client.GetAsync(embedClass.dashboardServerApiUrl + embedDetailsUrl).Result;
                string resultContent = result.Content.ReadAsStringAsync().Result;
                return resultContent;
            }
    
        }
    
        public string GetSignatureUrl(string queryString)
        {
            if (queryString != null)
            {
                var encoding = new System.Text.UTF8Encoding();
                var keyBytes = encoding.GetBytes(EmbedProperties.EmbedSecret);
                var messageBytes = encoding.GetBytes(queryString);
                using (var hmacsha1 = new HMACSHA256(keyBytes))
                {
                    var hashMessage = hmacsha1.ComputeHash(messageBytes);
                    return Convert.ToBase64String(hashMessage);
                }
            }
            return string.Empty;
        }

How to run the Blazor WebAssembly sample

  1. Please download the Blazor WebAssembly sample.

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

    UserEmail UserEmail of the Admin in your Bold BI, which will be used to get the dashboard.
    UserPassword Password of the Admin in Bold BI, which will be used to get the dashboard.
    EmbedSecret You can get your EmbedSecret key from embed tab by enabling Enable embedauthentication in administration page.
    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.
  3. Run your Blazor WebAssembly application.

  4. The dashboard can be rendered in design mode or create with the following changes in the index.html method.

     $(document).ready(function () {
            this.dashboard = BoldBI.create({
                serverUrl: rootUrl + "/" + siteIdentifier,
                dashboardId: dashboardId,
                embedContainerId: "dashboard",
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                width: window.innerWidth + "px",
                height: window.innerHeight + "px",
                expirationTime: 100000,
                authorizationServer: {
                    url: authorizationServerUrl
                }
            });
            this.dashboard.loadDesigner();
        });
    serverUrl Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1)
    dashboardId Provide the dashboard id of the dashboard you want to embed in view or edit mode. Ignore this property to create new dashboard.
    embedContainerId Container Id in which dashboard renders.It should not contain hypen.
    mode In which mode you want to render dashboard. It can either be 'View' or 'Design' mode.
    expirationTime Set the duration for the token to be alive.
    authorizationServer Url of the 'GetDetails' action in the application.

How the Blazor WebAssembly sample works

  1. Based on the dashboard provided in the index.html, authorize the server URL by calling the GetEmbedDetails function as follows. Get Embed Details

  2. In the above authorization, generate 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 index.cshtml, change the dashboard Id of the respective dashboard as you wish to embed. Hostdetails

Steps to create new Blazor WebAssembly application to embed dashboard

  1. Start Visual Studio and click Create a new project.

  2. Choose Blazor WebAssembly (.NET Framework), then click Next. SelectProject Blazor web hosted

  3. Change the project name as you want, then click Create.

  4. In the Shared Project, create the model classes EmbedProperties.cs and EmbedClass.cs to define the mandatory properties as follows.

        public class EmbedProperties
        {
            public static string UserEmail = "";  
    
            public static string UserPassword = ""; 
    
            public static string EmbedSecret = ""; 
        }
        public class EmbedClass
        {
            [DataMember]
            public string embedQuerString { get; set; }
            [DataMember]
            public string dashboardServerApiUrl { get; set; }
        }
  5. In the Client project, the following scripts and style sheets are mandatory to render the dashboard. Replace the following code in your \wwwroot\index.html page of the <head> tag.

       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.5/jsrender.min.js"></script>
       <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v5.2.48/embed-js.js"></script>
  6. Inside the <body> tag, create the DOM element with the id dashboard and implement a function to render the dashboard.

        <script>
         var rootUrl = "http://localhost:53623/bi";
        var siteIdentifier = "site/site1";
        var authorizationServerUrl = "api/EmbedData/GetDetails";
        var dashboardId = "c0281c29-7232-4320-bbbf-dc4e9ad540bf";
        function renderDashboard() {
            this.dashboard = BoldBI.create({
                serverUrl: rootUrl + "/" + siteIdentifier,//Dashboard Server BI URL (ex: http://localhost:5000/bi, http://dashboard.syncfusion.com/bi)
                dashboardId: dashboardId,//Provide the dashboard id of the dashboard you want to embed here.
                embedContainerId: "dashboard",
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                width: window.innerWidth-300 + "px",
                height: window.innerHeight-100 + "px",
                expirationTime: 100000,
                authorizationServer: {
                    url: authorizationServerUrl
                }
            });
            this.dashboard.loadDashboard();
        }
        </script>
  7. In the Index.razor, implement the code as follows to invoke the renderDashboard() method,

        @page "/"
        @inject IJSRuntime JsRuntime
    
        <div id="dashboard"> </div>
    
        @functions {
        protected override void OnAfterRender(bool firstRender)
        {
    
            JsRuntime.InvokeAsync<object>("renderDashboard");
        }
        }
  8. In the Server project, under the controller folder, create the controller EmbedDataController.cs and define an API GetEmbedDetails() which uses the GetSignatureUrl() method to generate the algorithm. In this API, the embedQuerString, userEmail and value from the GetSignatureUrl() method are appended as query parameters in the URL to get details of particular dashboard.

        [HttpPost("[action]")]
        [Route("GetDetails")]
        public string GetDetails([FromBody] object embedQuerString)
        {
            var embedClass = JsonConvert.DeserializeObject<EmbedClass>(embedQuerString.ToString());
            var embedQuery = embedClass.embedQuerString;
            // User your user-email as embed_user_email
            var obj = new EmbedProperties();
            embedQuery += "&embed_user_email=" + obj.UserEmail;
            var embedDetailsUrl = "/embed/authorize?" + embedQuery + "&embed_signature=" + GetSignatureUrl(embedQuery);
    
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(embedClass.dashboardServerApiUrl);
                client.DefaultRequestHeaders.Accept.Clear();
    
                var result = client.GetAsync(embedClass.dashboardServerApiUrl + embedDetailsUrl).Result;
                string resultContent = result.Content.ReadAsStringAsync().Result;
                return resultContent;
            }
    
        }
    
        public string GetSignatureUrl(string queryString)
        {
            if (queryString != null)
            {
                var encoding = new System.Text.UTF8Encoding();
                var keyBytes = encoding.GetBytes(EmbedProperties.EmbedSecret);
                var messageBytes = encoding.GetBytes(queryString);
                using (var hmacsha1 = new HMACSHA256(keyBytes))
                {
                    var hashMessage = hmacsha1.ComputeHash(messageBytes);
                    return Convert.ToBase64String(hashMessage);
                }
            }
            return string.Empty;
        }