Overview

This document explains how you can embed the Bold BI Enterprise application into your application by integrating the below modules.

  1. Dashboard Listing
  2. Dashboard View
  3. Dashboard Create/Edit
    EmbeddedBI

Prerequisite

You need to follow the below step before running the given sample.

  • Please download the sample from here
  • Install the latest Bold BI Enterprise build

Site variable

  1. Update your site variable in property.js file in the extracted location {Extracted Location}\scripts\property.js
  • js
  • var rootUrl = "http://localhost:65015/bi";
    var siteIdentifier = "site/site1";
    var email = "Enter user email address here";
    var password = "Enter user passowrd here";

    Example: if your site URL is https://demo.boldbi.com/bi/en-us/site/site1/dashboards?view=all, then your site value will be like below.

    rootUrl https://demo.boldbi.com/bi
    siteIdentifier site/site1
    Email user email
    Password user password
    1. Once updated the required value, open the DashboardListing.html in any browser.

    NOTE

    The user credential given in the script file for demo purpose only. We recommend you to update this value in server-side code and generate the token for a production application.

    User authorization token

    User authorization token will be generated with user email and password, and this token will be used for dashboard listing, dashboard rendering, and designing the dashboard. Please refer the code snippet below for generating the user authorization token.

  • js
  • function getToken() {
        var getDesignerToken = "";
        var apiRequest = {
            UserId: email,
            Password: password
        };
        $.ajax({
            type: "POST",
            async: false,
            url: dashboardServerApiUrl + "/get-user-key",
            data: apiRequest,
            success: function(data) {
                accessToken = JSON.parse(data.Token).access_token;
            }
        });
    }

    Dashboard listing embedding

    Dashboard listing can be integrated into your application by calling the GetItem API endpoint. We have called this endpoint by generating the authorization token from the given user credentials. Please refer the code snippet below.

  • js
  • function showDashboardListing() {
        var doContinue = true;
        $.ajax({
            type: "GET",
            url: dashboardServerApiUrl + "/v2.0/items?ItemType=2",
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Authorization', "bearer " + accessToken)
            },
            success: function(data) {
                dashboard = data;
                if (dashboard != "") {
                    for (var i = 0; i < dashboard.length; i++) {
                        var dashboardPath = dashboard[i].ItemLocation.split("\\");
                        var divDom = $("<div class='dashboard-item'>").attr({
                            Description: dashboard[i].Description,
                            Name: dashboard[i].Name,
                            ItemId: dashboardPath[dashboardPath.length - 2],
                            Version: dashboardPath[dashboardPath.length - 1],
                            IsPublic: dashboard[i].IsPublic
                        });
                        divDom.html(dashboard[i].Name);
                        $("#panel").append(divDom);
                    }
                }
            }
        });
    }

    In this sample code snippet, we are collecting the below property for each dashboard, and this property are used to render and edit this dashboard.

    Name Name of the Dashboard
    Description Description of the dashboard
    ItemId Unique id of the dashboard. This will be used for editing and rendering dashboards
    Version The latest version number of the dashboard. This will be used for editing and rendering dashboards
    Public Public flag of the dashboard, this is used while editing the dashboard

    Note: other properties in code snippet will be loaded from property.js file

    Dashboard rendering embedding

    You can embed the dashboard viewer in your application to render the dashboard. Please refer below sample code for embedding the dashboard.

  • js
  • function renderDashboard(itemId, version, name, description, isPublic) {
        $("#viewer-section").append("<div id='dashboard'></div>");
        $("#dashboard").css("height", window.innerHeight - 48); //change this value to dynamically set the height of the dashboard rendernig dom
        $('#dashboard').ejDashboardDesigner({
            siteUrl: baseUrl,
            serviceUrl: designerRootUrl + "/v1.0/design",
            dataServiceUrl: designerRootUrl + "/v1.0/datahandler",
            serverUrl: dashboardServerApiUrl,
            mode: ej.dashboardDesigner.mode.view,
            itemId: itemId,
            dashboardPath: itemId + "/" + version,
            dashboardName: name,
            dashboardDescription: description,
            serviceAuthorizationToken: accessToken,
            showGetLinkIcon: false,
            viewerSettings: {
                serviceUrl: designerRootUrl + "/v1.0/design",
            },
            enableExport: true,
            enablePrint: false,
            enableFilterOverview: true,
            _isPublic: isPublic,
            favoriteSettings: {
                enabled: false
            },
            filterOverviewSettings: {
                showSaveIcon: true,
                showSaveAsIcon: true,
                showViewSavedFilterIcon: false,
            },
        });
    }

    We are calling the rendering dashboard method with the required parameter when user clicks on dashboard name. Please refer the code snippet for the same below,

  • js
  • $(document).on("click", ".dashboard-item", function() {
        $(".dashboard-item").removeClass("active");
        $(this).addClass("active");
        var id = $(this).attr("ItemId");
        var version = $(this).attr("Version");
        var name = $(this).attr("Name");
        var description = $(this).attr("Description");
        var isPublic = $(this).attr("IsPublic");
        renderDashboard(id, version, name, description, isPublic);
    });

    Dashboard Designer Embedding

    The dashboard designer can be embedded in your application for below purpose.

    1. Create a new dashboard
    2. Edit existing dashboard

    Create Dashboard

    To create a new dashboard, we need to pass the draft dashboard id to the designer. We can create the draft dashboard by calling the draft dashboard API and open the dashboard designer with draft dashboard id in query string when the user clicks on create a new dashboard. Please refer the code snippet below.

  • js
  • $(document).on("click", "#create-dashboard", function() {
        openDesignerForCreate();
    })
    
    function openDesignerForCreate() {
        $.ajax({
            type: "POST",
            url: dashboardServerApiUrl + "/v4.0/dashboards/draft", // Specify the Dashboard Server URL
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Authorization', "bearer " + accessToken)
            },
            success: function(data) {
                var currentUrlSegements = window.location.href.split("/");
                window.location = window.location.href.replace(currentUrlSegements[currentUrlSegements.length - 1], "DashboardDesigner.html?itemid=" + data.Id);
            }
        });
    }

    Edit Dashboard

    To edit the dashboard, we need to pass item id, version number, public property to the dashboard. We collected this property from selected dashboard and passed this value to the designer in query string. Please refer code snippet below.

  • js
  • $(document).on("click", "#edit-dashboard", function() {
        var id = $(".dashboard-item.active").attr("ItemId");
        var version = $(".dashboard-item.active").attr("Version");
        var isPublic = $(".dashboard-item.active").attr("isPublic");
        var currentUrlSegements = window.location.href.split("/");
        window.location = window.location.href.replace(currentUrlSegements[currentUrlSegements.length - 1], "DashboardDesigner.html?isedit=true&itemid=" + id + "&v=" + version + "&ispublic=" + isPublic);
    });

    Based on query sting isEdit value, designer will open in create or edit mode. Please refer the code snippet below.

  • js
  • function OpenDashboardDesigner(isEditMode, itemId, itemVersion, isPublic) {
        var designerModel = {
            siteUrl: baseUrl,
            serviceUrl: designerServiceUrl,
            dataServiceUrl: dataServiceUrl,
            serverUrl: dashboardServerApiUrl,
            mode: ej.dashboardDesigner.mode.design,
            itemId: itemId,
            serviceAuthorizationToken: accessToken,
            intermediateDbStatus: intermediateDbStatus,
            environment: "onpremise",
        };
      
        if (isEditMode === "true") {
            designerModel.dashboardPath = itemId + "/" + itemVersion;
            designerModel.serverSettings = {};
            designerModel.serverSettings.isPublic = isPublic.toLowerCase() == "true" ? true : false;
        }
        var designer = new ejDashboardDesigner($('#dashboardDesigner'), designerModel);
    }