Dashboard Linking – Event Handling | Bold BI Embedded Demos

Switch Mode:

Switch to solutionsmode to see embedded samples by industry/department.

Start Free Trial

Chat with the Bold BI Sales team now!

Event Handling > Linking to Dashboard

Linking to Dashboard

This sample describes linking to a dashboard page through its URL, passing filter parameters from a widget in the embedded dashboard through user interaction.

How can you explore?

The URL Parameters window shows the parameter and its value passed from the user's interaction with Open positions by department widget in the current dashboard. To explore the Linking Dashboard functionality, interact with the Pie Chart widget titled Open positions by department. Now, the URL parameter will be framed with the department column and the selected value and let you navigate to the linked dashboard along with the URL parameter passed and applied as a filter.


    <html>
    <head>
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v5.3.53/boldbi-embed.js"></script>
    </head>
    <body onload="embedSample();">
    <div id="dashboard-container"></div>
    <div id="property-container">
        <textarea id="url-linking-area"></textarea>
    </div>
    <script>
    //For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be empty string.
    var siteIdentifier = "site/site1";

    //Item id of the dashboard in the Bold BI server`
    var dashboardId ="759165c6-d969-4922-97f1-12c10e256615";

    //Bold BI Server URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
    var rootUrl = "http://localhost:64503/bi/";

    //Url of the GetDetails(API) in this application
    var authorizationUrl="http://localhost:8080/embeddetail/get";

    function embedSample() {
        var boldbiEmbedInstance = BoldBI.create({
            serverUrl: rootUrl + siteIdentifier,
            dashboardId: dashboardId,
            embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard
            embedType: BoldBI.EmbedType.Component,
            environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
            mode: BoldBI.Mode.View,
            height: "800px",
            width: "1200px",
            authorizationServer: {
                url: "http://localhost:8080/embeddetail/get"
            },
            beforeNavigateUrlLinking: "clientBeforeNavigateUrlLinking", // URL Linking
        });
        boldbiEmbedInstance.loadDashboard();
    }

    function clientBeforeNavigateUrlLinking(args) {
        $("#target-dialog").html("");
        args.cancel = true;
        if (typeof (args.linkInfo.parameterDetails) != "undefined") {
            var parameterValue = "";
            var filterValue = "";
            // Retrieve the linking parameter and its corresponding value of the widget column to form url parameter.
            for (var i = 0; i < args.linkInfo.parameterDetails.length; i++) {
                parameterValue += args.linkInfo.parameterDetails[i].parameter + ": " + args.linkInfo.parameterDetails[i].value + ";\n";
                filterValue = args.linkInfo.parameterDetails[i].parameter + " = " + args.linkInfo.parameterDetails[i].value;
            }
            $("#url-linking-area").val(parameterValue);

            // creating a div element specifically for a dialog popup.
            var targetContainer = document.createElement("div");
            targetContainer.id = "target-dialog";
            $('body').append(
                $('<div>').attr('id', 'target-dialog').append(
                    $('<div>').attr('id', 'dialog-container')
                )
            );
            dialogContent.id = "urlLink-content";

            // Create a popup dialog box to display a url linking dashboard.
            var dialog = new window.ejs.popups.Dialog({
                isModal: true,
                showCloseIcon: true,
                target: document.getElementById("target-dialog"),
                content: dialogContent.outerHTML
            });
            dialog.appendTo('#dialog-container');

            var urlLinking = BoldBI.create({
                serverUrl: rootUrl + siteIdentifier,
                dashboardId: dashboardId,
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
                mode: BoldBI.Mode.View,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://localhost:8080/embeddetail/get"
                },
                embedContainerId: "urlLink-content",
                filterParameters: filterValue // The url parameter which was retrieved from the linking information.
            });
            urlLinking.loadDashboard(); // Load the dashboard in the dialog popup.
        }
    }
    </script>
    </body>
    </html>


    [HttpPost]
    [Route("GetDetails")]
    public string GetDetails([FromBody] object embedQuerString)
     {
       var embedClass = Newtonsoft.Json.JsonConvert.DeserializeObject(embedQuerString.ToString());
       var embedQuery = embedClass.embedQuerString;

       // Get the useremail from the Cookie "userEmailEmbeddedBI" which will be set while changing the user from frontend.
       var userEmail = this.HttpContext.Request.Cookies["userEmailEmbeddedBI"];
       userEmail = string.IsNullOrWhiteSpace(userEmail) ? EmbedProperties.UserEmail : userEmail;
       // Use your userEmail as embed_user_email
       embedQuerString += "&embed_user_email=" + userEmail;

       //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
       double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
       embedClass.embedQuerString += "&embed_server_timestamp=" + timeStamp;
       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;
     }


using Newtonsoft.Json;
using System.Runtime.Serialization;
namespace Syncfusion.Server.EmbedBoldBI.Models
{
    [DataContract]
    public class EmbedClass
    {
        [DataMember]
        public string embedQuerString { get; set; }
        [DataMember]
        public string dashboardServerApiUrl { get; set; }
    }

    public class TokenObject
    {
        public string Message { get; set; }

        public string Status { get; set; }

        public string Token { get; set; }
    }

    public class Token
    {
        [JsonProperty("access_token")]
        public string AccessToken{ get; set; }

        [JsonProperty("token_type")]
        public string TokenType{ get; set; }

        [JsonProperty("expires_in")]
        public string ExpiresIn{ get; set; }

        [JsonProperty("email")]
        public string Email{ get; set; }

        public string LoginResult{ get; set; }

        public string LoginStatusInfo{ get; set; }

        [JsonProperty(".issued")]
        public string Issued { get; set; }

        [JsonProperty(".expires")]
        public string Expires { get; set; }
    }
}


    namespace Syncfusion.Server.EmbedBoldBI.Models
    {
        public class EmbedProperties
        {
            //Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
            public static string RootUrl = "http://localhost/bi";

            //For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be empty string.
            public static string SiteIdentifier = "site/site1";

            //Your Bold BI application environment. (If Cloud, you should use `cloud`, if Enterprise, you should use `enterprise`)
            public static string Environment = "enterprise";

            //Enter your BoldBI credentials here.
            public static string UserEmail = "User email here";
            public static string UserPassword = "User password  here";

            // Get the embedSecret key from Bold BI.Please refer this link(https://help.boldbi.com/embedded-bi/site-administration/embed-settings/)
            public static string EmbedSecret = "Embed secret here";
        }
    }


    @using Syncfusion.Server.EmbedBoldBI.Models;

    <!DOCTYPE html>
    <html>

    <head>
    <link rel="stylesheet" href="~/Content/Site.css" />
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
    <script type="text/javascript" src="~/Scripts/Embed/Index.js"></script>
    <script type="text/javascript">
    var rootUrl = "@EmbedProperties.RootUrl";
    var siteIdentifier = "@EmbedProperties.SiteIdentifier";
    var environment = "@EmbedProperties.Environment";
    var authorizationServerUrl = "/embed/Home/GetEmbedDetails";
    var getDashboardsUrl = "/embed/Home/GetDashboards";
    </script>
    </head>

    <body onload="Init()">
    <div id="container">
    <div class="header-section">
    <div id="grid-title">All Dashboard</div>
    </div>
    <div id="panel">

    </div>
    </div>
    <div id="viewer-section">
    <div id="dashboard"></div>
    </div>
    </body>

    </html>


    namespace Syncfusion.Server.EmbedBoldBI.Controllers
    {
    using System;
    using System.Net.Http;
    using System.Web.Mvc;
    using Syncfusion.Server.EmbedBoldBI.Models;
    using Newtonsoft.Json;
    using System.Collections.Generic;
    using System.Security.Cryptography;


    public class HomeController : Controller
    {
        public ActionResult Index()
        {
        return View();
        }

        [HttpGet]
        [Route("dashboards/get")]
        public string GetDashboards()
        {
            var token = GetToken();

            using (var client = new HttpClient())
            {
            client.BaseAddress = new Uri(EmbedProperties.RootUrl);
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Add("Authorization", token.TokenType + " " + token.AccessToken);
            var result = client.GetAsync(EmbedProperties.RootUrl + "/api/" + EmbedProperties.SiteIdentifier + "/v2.0/items?ItemType=2").Result;
            string resultContent = result.Content.ReadAsStringAsync().Result;
            return resultContent;
            }
        }

        public Token GetToken()
        {
            using (var client = new HttpClient())
            {
            client.BaseAddress = new Uri(EmbedProperties.RootUrl);
            client.DefaultRequestHeaders.Accept.Clear();

            var content = new FormUrlEncodedContent(new[]
            {
                new KeyValuePair("grant_type", "password"),
                new KeyValuePair("UserId", EmbedProperties.UserEmail),
                new KeyValuePair("Password", EmbedProperties.UserPassword)
                var result = client.PostAsync(EmbedProperties.RootUrl + "/api/" + EmbedProperties.SiteIdentifier + "/get-user-key", content).Result;
                string resultContent = result.Content.ReadAsStringAsync().Result;
                var response = JsonConvert.DeserializeObject(resultContent);//Token token = new Token();
                var tokenObj = JsonConvert.DeserializeObject(response.Token);
                return tokenObj;
            });
        }

        [HttpPost]
        [Route("embeddetail/get")]
        public ActionResult GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
        {
           // Get the useremail from the Cookie "userEmailEmbeddedBI" which will be set while changing the user from frontend.
           var userEmail = this.HttpContext.Request.Cookies["userEmailEmbeddedBI"];
           userEmail = string.IsNullOrWhiteSpace(userEmail) ? EmbedProperties.UserEmail : userEmail;
           // Use your userEmail as embed_user_email
           embedQuerString += "&embed_user_email=" + userEmail;

           //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
           double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
           embedClass.embedQuerString += "&embed_server_timestamp=" + timeStamp;
           var embedDetailsUrl = "/embed/authorize?" + embedQuerString + "&embed_signature=" + GetSignatureUrl(embedQuerString);

            using (var client = new HttpClient())
            {
            client.BaseAddress = new Uri(dashboardServerApiUrl);
            client.DefaultRequestHeaders.Accept.Clear();

            var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
            string resultContent = result.Content.ReadAsStringAsync().Result;
            return Json(resultContent);
            }
        }



        public string GetSignatureUrl(string message)
        {
            var encoding = new System.Text.UTF8Encoding();
            var keyBytes = encoding.GetBytes(EmbedProperties.EmbedSecret);
            var messageBytes = encoding.GetBytes(message);
            using (var hmacsha1 = new HMACSHA256(keyBytes))
            {
            var hashMessage = hmacsha1.ComputeHash(messageBytes);
            return Convert.ToBase64String(hashMessage);
            }
        }
    }
}


    namespace Syncfusion.Server.EmbedBoldBI.Models
    {
        public class EmbedProperties
        {
            //BoldBI server URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
            public static string RootUrl = "http://localhost:80/bi";

            //For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be empty string.
            public static string SiteIdentifier = "site/site1";

            //Your Bold BI application environment. (If Cloud, you should use `cloud`, if Enterprise, you should use `enterprise`)
            public static string Environment = "enterprise";

            //Enter your BoldBI credentials here.
            public static string UserEmail = "User email here";
            public static string UserPassword = "Password here";

            // Get the embedSecret key from Bold BI, please check this link(https://help.boldbi.com/embedded-bi/site-administration/embed-settings/)
            public static string EmbedSecret = "Embed secret here";
        }
    }


        <%@Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="EmbedSampleApplication.SiteMaster" %>
    <!DOCTYPE html>

    <html lang="en">
    <head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ASP.NET Application - Embed Sample</title>

    <asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700" />
    <link rel="stylesheet" href="~/Content/Site.css" />
    <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="Scripts/EmbedWrapper.js"></script>
    <script type="text/javascript">
    var rootUrl = "http://localhost:5000/bi/";
    var siteIdentifier = "site/site1";
    var dashboardId = "6b2bc072-04ea-4e9f-9fe4-691437f7cbfc";
    function Init() {
        this.dashboard = BoldBI.create({
            serverUrl: rootUrl + "/" + siteIdentifier,
            dashboardId: dashboardId,
            embedContainerId: "dashboard",
            embedType: BoldBI.EmbedType.Component,
            environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
            width: "100%",
            height: "100%",
            expirationTime: 100000,
            authorizationServer: {
                url: "Default.aspx/GetEmbedDetails"
            },
            dynamicConnection: {
                isEnabled: false,
                identity: "",
            },
            autoRefreshSettings: {
                enabled: true,
                hourlySchedule: {
                    hours: 0,
                    minutes: 1,
                    seconds: 0
                }
            },
            actionBegin: "emdbedDashboardActionBegin",
            actionComplete: "emdbedDashboardActionComplete"
        });
        this.dashboard.loadDashboard();
    }
    </script>

    </head>
    <body onload="Init()">
    <form runat="server" style="height: 100%">
    <asp:ScriptManager runat="server" EnablePageMethods="true">
    <Scripts>
    <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
    <%--Framework Scripts--%>
    <asp:ScriptReference Name="MsAjaxBundle" />
    <asp:ScriptReference Name="jquery" />
    <asp:ScriptReference Name="bootstrap" />
    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
    <asp:ScriptReference Name="WebFormsBundle" />
    <%--Site Scripts--%>
    </Scripts>
    </asp:ScriptManager>

    <%--<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" runat="server" href="~/">Application name</a>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    </ul>
    </div>
    </div>
    </div>--%>
    <div class="container body-content" style="height: 100%">
    <asp:ContentPlaceHolder ID="MainContent" runat="server">
    </asp:ContentPlaceHolder>
    </div>

    </form>
    </body>
    </html>


        <%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmbedSampleApplication._Default" %>
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div id="viewer-section">
    <div id="dashboard"></div>
    </div>
    </asp:Content>


    using EmbedSampleApplication.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Security.Cryptography;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;

    using System.Web.UI.WebControls;

    namespace EmbedSampleApplication
    {
    public partial class _Default : Page
    {
        [WebMethod()]
        public static string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
        {
           // Get the useremail from the Cookie "userEmailEmbeddedBI" which will be set while changing the user from frontend.
           var userEmail = this.HttpContext.Request.Cookies["userEmailEmbeddedBI"];
           userEmail = string.IsNullOrWhiteSpace(userEmail) ? EmbedProperties.UserEmail : userEmail;
           // Use your userEmail as embed_user_email
           embedQuerString += "&embed_user_email=" + userEmail;

           //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
           double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
           embedClass.embedQuerString += "&embed_server_timestamp=" + timeStamp;
           var embedDetailsUrl = "/embed/authorize?" + embedQuerString + "&embed_signature=" + GetSignatureUrl(embedQuerString);

                    using (var client = new System.Net.Http.HttpClient())
                    {
                    client.BaseAddress = new Uri(dashboardServerApiUrl);
                    client.DefaultRequestHeaders.Accept.Clear();

                    var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
                    string resultContent = result.Content.ReadAsStringAsync().Result;
                    return resultContent;
                }
            }

            public static string GetSignatureUrl(string message)
            {
                var encoding = new System.Text.UTF8Encoding();
                var keyBytes = encoding.GetBytes(EmbedProperties.EmbedSecret);
                var messageBytes = encoding.GetBytes(message);
                using (var hmacsha1 = new HMACSHA256(keyBytes))
                {
                    var hashMessage = hmacsha1.ComputeHash(messageBytes);
                    return Convert.ToBase64String(hashMessage);
                }
            }

            protected void Page_Load(object sender, EventArgs e)
            {

            }

        }
    }


    using Newtonsoft.Json;
    using System;
    using System.Net.Http;
    using System.Text;
    using System.Windows.Forms;
    using System.IO;
    using System.Security.Cryptography;

    namespace BoldBI.Winforms
    {
        public partial class Form1 : Form
        {
            public string Url { get; set; }
            public Form1()
            {
                this.Size = Screen.PrimaryScreen.WorkingArea.Size;
                this.WindowState = FormWindowState.Maximized;

                GetEmbedDetails();
                InitializeComponent();
            }

            public void GetEmbedDetails()
            {
                decimal time = (decimal)Math.Round((DateTime.Now.ToUniversalTime() - new DateTime(1970, 1, 1)).TotalMilliseconds / 1000);
                var dashboardServerApiUrl = EmbedProperties.RootUrl + "api/" + EmbedProperties.SiteIdentifier;

                var embedQuerString = "embed_nonce=" + Guid.NewGuid() +
                "&embed_dashboard_id=" + EmbedProperties.DashboardId +
                "&embed_timestamp=" + Math.Round(time) +
                "&embed_expirationtime=100000";

                // Get the useremail from the Cookie "userEmailEmbeddedBI" which will be set while changing the user from frontend.
                var userEmail = this.HttpContext.Request.Cookies["userEmailEmbeddedBI"];
                userEmail = string.IsNullOrWhiteSpace(userEmail) ? EmbedProperties.UserEmail : userEmail;
                // Use your userEmail as embed_user_email
                embedQuerString += "&embed_user_email=" + userEmail;

                //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
                double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
                embedClass.embedQuerString += "&embed_server_timestamp=" + timeStamp;
                var embedDetailsUrl = "/embed/authorize?" + embedQuerString + "&embed_signature=" + GetSignatureUrl(embedQuerString);

                using (var client = new HttpClient())
                {
                    client.BaseAddress = new Uri(dashboardServerApiUrl);
                    client.DefaultRequestHeaders.Accept.Clear();

                    var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
                    string resultContent = result.Content.ReadAsStringAsync().Result;
                    //webBrowser1.ObjectForScripting = this;
                    var htmlString = new StringBuilder();
                    htmlString.Append("<!DOCTYPE html>
                    <html>
                    <head>
                    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700' />
                    <link rel='stylesheet' href='" + System.AppDomain.CurrentDomain.BaseDirectory.Replace("bin\\x64\\Debug\\", "") + "content\\chromium.css' />
                    <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 src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>
                    <script type='text/javascript' src='" + System.AppDomain.CurrentDomain.BaseDirectory.Replace("bin\\x64\\Debug\\", "") + "scripts\\EmbedBiWrapper.js'></script></script>
                    <script type='text/javascript'>$(document).ready(function () { this.dashboard = BoldBI.create({ serverUrl: '" + EmbedProperties.RootUrl + EmbedProperties.SiteIdentifier + "', dashboardId: '" + EmbedProperties.DashboardId + "', embedContainerId: 'dashboard', embedType: '" + EmbedProperties.EmbedType + "', environment: '" + EmbedProperties.Environment + "', width: window.innerWidth - 20 + 'px', height: window.innerHeight - 20 + 'px', expirationTime: 100000, authorizationServer: { url: '', data: " + resultContent + " }, dashboardSettings: { showExport: false, showRefresh: false, showMoreOption: false } }); console.log(this.dashboard); this.dashboard.loadDashboard(); });</script>
                    </head>
                    <body style='background-color: white'>
                    <div id='viewer-section' style='background-color: white'><div id='dashboard'></div></div>
                    </body>
                    </html>");
                    string filePath = AppDomain.CurrentDomain.BaseDirectory + "EmbedWrapper.html";
                    if (File.Exists(filePath))
                    {
                        File.Delete(filePath);
                    }
                    using (FileStream fs = new FileStream(filePath, FileMode.Create))
                    {
                        using (StreamWriter wr = new StreamWriter(fs, Encoding.UTF8))
                        {
                            wr.Write(htmlString.ToString());
                        }
                    }
                    Url = filePath;
                }
            }

            public string GetSignatureUrl(string message)
            {
                var encoding = new System.Text.UTF8Encoding();
                var keyBytes = encoding.GetBytes(EmbedProperties.EmbedSecret);
                var messageBytes = encoding.GetBytes(message);
                using (var hmacsha1 = new HMACSHA256(keyBytes))
                {
                    var hashMessage = hmacsha1.ComputeHash(messageBytes);
                    return Convert.ToBase64String(hashMessage);
                }
            }
        }
    }


    namespace BoldBI.Winforms
    {
    partial class Form1
    {
        /// 
        /// Required designer variable.
        ///
        private System.ComponentModel.IContainer components = null;

        /// 
        /// Clean up any resources being used.
        ///
        /// true if managed resources should be disposed; otherwise, false.
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// 
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        ///
        private void InitializeComponent()
        {
            this.webBrowser1 = new CefSharp.WinForms.ChromiumWebBrowser(Url);
            this.SuspendLayout();
            //
            // webBrowser1
            //
            //this.webBrowser1.Dock = System.Windows.Forms.DockStyle.Fill;
            this.webBrowser1.BackColor = System.Drawing.Color.White;
            this.webBrowser1.Location = new System.Drawing.Point(0, 0);
            this.webBrowser1.MinimumSize = new System.Drawing.Size(20, 20);
            this.webBrowser1.Name = "webBrowser1";
            this.webBrowser1.Size = new System.Drawing.Size(926, 492);
            this.webBrowser1.TabIndex = 0;
            //
            // Form1
            //
            this.BackColor = System.Drawing.Color.White;
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(926, 492);
            this.Controls.Add(this.webBrowser1);
            this.Name = "Embed Wrapper";
            this.Text = "Embed Wrapper";
            this.ResumeLayout(false);

        }

        #endregion

        private CefSharp.WinForms.ChromiumWebBrowser webBrowser1;
        }
    }


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using System.Windows.Forms;

    namespace BoldBI.Winforms
    {
        static class Program
        {
            /// 
            /// The main entry point for the application.
            ///
            [STAThread]
            static void Main()
            {
                var settings = new CefSharp.WinForms.CefSettings();
                if (!CefSharp.Cef.Initialize(settings))
                {
                    if (Environment.GetCommandLineArgs().Contains("--type=renderer"))
                    Environment.Exit(0);
                }
                Application.EnableVisualStyles();
                Application.SetCompatibleTextRenderingDefault(false);
                Application.Run(new Form1());
            }
        }
    }


    namespace BoldBI.Winforms
    {
        internal class EmbedProperties
        {
            //Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
            public static string RootUrl = "http://localhost:64503/bi/";

            //For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be empty string
            public static string SiteIdentifier = "site/site1";

            //Your Bold BI application environment. (If Cloud, you should use `Cloud`, if Enterprise, you should use `OnPremise`)
            public static string Environment = "onpremise";

            //Your Embedding type. If you are embedding as component, you should set 'component', if your are embedding as ifrmae, you should set 'iframe'
            public static string EmbedType = "component";

            //Set the item id of the dashboard to embed from BI server, please refer this link(https://help.boldbi.com/embedded-bi/site-administration/embed-settings/)
            public static string DashboardId = "enter dashboard id here";

            //Enter your BoldBI credentials here.
            public static string UserEmail = "enter user email here";

            // Get the embedSecret key from Bold BI.
            public static string EmbedSecret = "enter embed secret here";
        }
    }

           
    .e-input, .e-tooltip, .e-btn, .e-time-popup, .e-datepicker.e-calendar, .e-menu, .e-uploadbox .e-file-name-txt, .e-uploadbox .e-selectpart, .e-uploadbox .e-uploadbtn, .e-waitpopup-pane .e-text, .e-tagcloud, .e-toolbar, .e-progressbar, .e-scale .e-tick .tick-value, .e-datetime-popup .e-dt-button, .e-grid, .e-ejinputtext, .e-pager, .e-fileexplorer,.e-grid td
    {
        font-family:Roboto !important;
    }

    ::-webkit-scrollbar
    {
        width: 6px;  /* for vertical scrollbars */
        height: 6px; /* for horizontal scrollbars */
    }

    ::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece
    {
        background: rgba(0, 0, 0, 0.05);
    }
    ::-webkit-scrollbar-thumb
    {
        background: rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 5px;
        /*   border-radius: 10px; */
        -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
    }

    .e-ddl .e-in-wrap, .e-ddl-popup, .e-ddl .e-options, .e-ddl-popup .e-atc.e-search {
        border-color: #c8c8c8 !important;
    }

    .e-brd-exportImageField, .e-brd-imageResolution{
        outline-color: rgb(30, 144, 255) !important;
    }

    .e-dashboardviewer .e-brd-showDashoardMenu-title {
        border-bottom: 1px solid #c4ced7 !important;
    }

    .e-dashboardviewer .e-brd-showDashoardMenu-title {
        height: 20px !important;
    }
    .e-dashboardviewer .e-dbrd-title {
        border-bottom: 1px solid #c4ced7 !important;
    }
    .e-dashboardviewer .e-dbrd-clearDiv {
        border-left: 1px solid #c4ced7 !important;
    }
    .e-menu.e-vertical .e-list {
        line-height: 30px !important;;
    }


    var fs = require("fs");
    var http = require("http");
    var url = require("url");
    var express = require('express');
    var app = express();
    var bytes = require('utf8-bytes');
    var crypto = require('crypto');
    var cookieParser = require('cookie-parser');

    // Get the embedSecret key from Bold BI
    var embedSecret = "BLb36Sblz2ISqZPa4WyVeOioqHLRXAVI";

    //Enter your BoldBI credentials here
    var userEmail = "admin@domain.com";

    // Parse JSON bodies (as sent by API clients)
    app.use(express.json());

    // Parse the cookies in the HTTP request
    app.use(cookieParser());

    app.post('/embeddetail/get', function (req, response) {
        var embedQuerString = req.body.embedQuerString;
        var dashboardServerApiUrl = req.body.dashboardServerApiUrl;
        var cookieUserEmail;
        userEmail = cookieUserEmail ? cookieUserEmail : userEmail;
        embedQuerString += "&embed_user_email=" + userEmail;
        var timeStamp = Math.round((new Date()).getTime() / 1000);
        embedQuerString += "&embed_server_timestamp=" + timeStamp;
        var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);
        var embedDetailsUrl = "/embed/authorize?" + embedQuerString+embedSignature;

        http.get(dashboardServerApiUrl+embedDetailsUrl, function(res){
            var str = '';
            res.on('data', function (chunk) {
                str += chunk;
            });
            res.on('end', function () {
                response.send(str);
            });
        });
    })

    function GetSignatureUrl(queryString)
    {
        var keyBytes = Buffer.from(embedSecret);
        var hmac = crypto.createHmac('sha256', keyBytes);
        data = hmac.update(queryString);
        gen_hmac= data.digest().toString('base64');

        return gen_hmac;
    }

    app.get("/",function (request, response) {

        var pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        if(pathname == "/") {
            html = fs.readFileSync("index.html", "utf8");
            response.write(html);
        }
        response.end();
    })
    var server = app.listen(8080, function () {
        var host = server.address().address
        var port = server.address().port
        console.log("Example app listening at http://%s:%s", host, port)
    })


    require 'openssl'
    require "base64"
    require 'net/http'
    require 'json'
    require 'time'
    class Api::V1::AuthorizesController < ApplicationController
    skip_before_action :verify_authenticity_token
    def create
    #Get the EmbedSecret key from Bold BI(https://help.boldbi.com/embedded-bi/site-administration/embed-settings/)
        @embedSecret = ""
    #Enter your Bold BI credentials
        @userEmail = "admin@domain.com"
        @embedQueryString = params[:embedQuerString]
        @dashboardServerApiUrl = params[:dashboardServerApiUrl]
        @timeStamp = Time.now.to_i
        getEmbedDetails
        render :json => Net::HTTP.get(URI.parse(@apiUrl))
    end

    private
    def getEmbedDetails
    #Get the useremail from the Cookie "userEmailEmbeddedBI" which will be set while changing the user from frontend.
        @userEmailSwitch = cookies[:userEmailEmbeddedBI].blank?
        if @userEmailSwitch.blank?
        @userEmail = @userEmailSwitch
    else
        @userEmail = @userEmailSwitch
    end
        @embedQueryString = @embedQueryString << "&embed_user_email=" << @userEmail
        @EmbedQueryString = @EmbedQueryString << "&embed_server_timestamp=" << @timeStamp
    getSignatureUrl
        @EmbedSignature = "&embed_signature=" + @signature;
        @EmbedDetailsUrl = "/embed/authorize?" + @EmbedQueryString.downcase + @EmbedSignature;
        @ApiUrl = @DashboardServerApiUrl << @EmbedDetailsUrl

    end
    def getSignatureUrl
        @EmbedQueryString = @EmbedQueryString.downcase
        @hmac = OpenSSL::HMAC.digest('sha256', @embedSecret, @EmbedQueryString)
        @signature = Base64.strict_encode64(@hmac)
    end

Properties

URL Parameters

Code snippet that enables this functionality.


    function renderDashboard() {
        var boldbiEmbedInstance = BoldBI.create({
            serverUrl: rootUrl + siteIdentifier,
            dashboardId: dashboardId,
            embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard
            authorizationServer: {
                url: "http://localhost:8080/embeddetail/get"
            },
            beforeNavigateUrlLinking: function(args) {
                $("#target-dialog").html("");
                args.cancel = true;

                // creating a div element specifically for a dialog popup.
                $('body').append(
                    $('<div>').attr('id', 'target-dialog').append(
                        $('<div>').attr('id', 'dialog-container')
                    )
                );
                var dialogContent = document.createElement("div");
                dialogContent.id = "urlLink-content";

                // Create a popup dialog box to display a url linking dashboard.
                var dialogContent = new window.ejs.popups.Dialog({
                    isModal: true,
                    showCloseIcon: true,
                    target: document.getElementById("target-dialog"),
                    content: dialogContent.outerHTML
                });
                dialogContent.appendTo('#dialog-container');

                // Retrieve the linking parameter and its corresponding value of the widget column to form url parameter.
                var filterValue = args.linkInfo.parameterDetails[0].parameter + " = " + args.linkInfo.parameterDetails[0].value;
                var urlLinking = BoldBI.create({
                    serverUrl: rootUrl + siteIdentifier,
                    dashboardId: dashboardId,
                    authorizationServer: {
                        url: "http://localhost:8080/embeddetail/get"
                    },
                    embedContainerId: "urlLink-content", // This should be the container id where you want to embed the dashboard
                    filterParameters: filterValue // The url parameter which was retrieved from the linking information.
                });
                urlLinking.loadDashboard(); // Load the dashboard in the dialog popup.
            }
        });
        boldbiEmbedInstance.loadDashboard();
    }