Data Source Embedding Sample

This section explains how to embed the Bold BI data source into the sample application by integrating the item listing and designing modules.

Prerequisite

You need to follow the below steps before running the given sample:

• Download the sample from here.
• For Cloud, You should have existing Bold BI Cloud application.
• For On-Premise, You should install the latest Bold BI Enterprise build 2.8.14 or later.

Site variable

1. Update your site variable in property.js file in the extracted location {Extracted Location}\scripts\property.js

   var rootUrl = "http://localhost:63893/bi";
   var siteIdentifier = "site/site1";
   var email = "Enter user email address here";
   var password = "Enter user passowrd here";  
   var environment = "cloud or on-premise";  

   Please refer below table for value of the above properties based on your application.

   Application URL(hostname)	Root URL	Site Identifier	Email	Password	Environment
   http://localhost:63893/bi/site/site1 (Bold BI Enterprise)	http://localhost:63893/bi	site/site1	user email	user password	on-premise
   https://example.boldbi.com/bi (Bold BI Cloud)	https://example.boldbi.com/bi	-	user email	user password	cloud

2. After updating the required value, open the DataSourceListing.html in any browser.

NOTE: The user credentials given in the script file is 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 data source listing. Refer to the following code snippet for generating the user authorization token.

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;
        }
    });
}

Item listing

Data source item 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. Refer to the following code snippet.

function showDatasourceListing() {
	var doContinue = true;
	$.ajax({
		type: "GET",
		url: dashboardServerApiUrl +"/v2.0/items?ItemType=datasource",
		beforeSend: function (xhr) {
			xhr.setRequestHeader('Authorization', "bearer "+accessToken)
		},
		success: function (data) {
			datasource = data;
			if (datasource != "") {           
                for(var i=0;i<datasource.length;i++){				
                    var divDom=$("<div class='datasource-item'>").attr({
                        Name : datasource[i].Name,
                        ItemId : datasource[i].Id
                    });
                    divDom.html(datasource[i].Name);
                    $("#panel").append(divDom);            
                }
            }
        }
    });
}

In this sample code snippet, we are collecting the below property for each data source, and add this property as attribute in html node. This property will be used to open the data source in edit mode.

NOTE: Other properties in the code snippet will be loaded from property.js file

Creating data source

We are making the URL to open the create datasource page when user click the create button. Refer to the following code snippet.

$(document).on("click","#create-datasource",function(){
    openDesignerForCreate();
})

function openDesignerForCreate() {
    $("#datasource").html("");
    $("#datasource").css("height",window.innerHeight-48); //change this value to dynamically set the height of the data source rendernig dom
	var divIFrame = $("<iframe src='" + baseUrl + "/datasource-designer/connection?isembed=true' id='dashboard-frame' width='100%' height='100%' allowfullscreen frameborder='0'></iframe>");					
	$("#datasource").append(divIFrame);
} 

Editing data source

To edit the data source, pass item ID and name in the embed URL. We are getting the required value from the attribute when user click the data source and create the embed URL using this value and append this code into application. Refer to the following code snippet.

$(document).on("click",".datasource-item",function(){
    $(".datasource-item").removeClass("active");
    $(this).addClass("active");
    id=$(this).attr("ItemId");
    name=$(this).attr("Name");
    openDesignerForEdit(id, name);
});

function openDesignerForEdit(itemId, name) {
    $("#datasource").html("");
    $("#datasource").css("height",window.innerHeight-48); //change this value to dynamically set the height of the data source rendernig dom
	var divIFrame = $("<iframe src='" + baseUrl + "/datasource-designer/" + itemId + "/" + name + "?isembed=true' id='dashboard-frame' width='100%' height='100%' allowfullscreen frameborder='0'></iframe>");					
	$("#datasource").append(divIFrame);
}