Bold BI

Getting Started with Embedded BI On-Premise and Cloud

Getting Started with Embedded BI On-Premise and Cloud

Embedded BI (business intelligence) is an integration of dashboard reporting, data visualization, and more into existing web applications. You can embed dashboards for your clients into an application and monitor current data from a single page through interactive data visualizations with the embedded version of Bold BI. Clients can have a single app with both the actual application and the Bold BI dashboard rendered in it. This reduces unwanted context switching between the application and dashboard, thus allowing an increase in productivity. You can integrate a dashboard hosted online in the cloud or on-premises into your business application directly. In this blog post, we will explore the Embedded BI variants and features.

Variants of Embedded BI

Embedded BI is available for both the cloud and on-premise versions of Bold BI:

  • Embedded BI On-Premise—You can host data on your own server or in your cloud account. You will maintain the infrastructure .
  • Embedded BI Cloud—Syncfusion will host and manage your data. We will maintain the infrastructure.

Let’s see the procedure to deploy Embedded BI On-Premise and Embedded BI Cloud.

Deploying Embedded BI

Bold BI Embedded allows you to deploy the dashboard in any form that suits your needs with no development effort. Now, you can embed an existing dashboard from on-premise or cloud into your webpage or website using embed code alone from Bold BI.

Deploying Embedded BI Cloud

To deploy Embedded BI Cloud, click Start Your Trial under Embedded BI Cloud in the pricing page. Every plan comes with a 15-day trial period during which your card will not be charged. At the end of the registration process, your dashboard site will be deployed in our cloud. Now, you can create and publish a dashboard in your site and embed it into your application using the following embed code snippet in your application source.

<iframe src="https://test.boldbi.com/bi/en-us/dashboards/712c36f2-fe6c-4325-b643-5dbbf0da3e3d/salesforce/Salesforce%20Leads%20Dashboard_686050?isembed=true&dashboard_comments=true&widget_comments=true&views=true&export=true" id="dashboard-frame" width="800px" height="600px" allowfullscreen frameborder="0"></iframe>

Deploying Embedded BI On-Premise

To deploy Embedded BI On-Premise, click Start Your Trial under Embedded BI On-Premise in the pricing page. Every plan comes with a 15-day trial period. You can get started with just three steps:

  1. Create a portal account to manage your license.
  2. Verify your account.
  3. Download the product.

At the end of the registration process, you will reach the following page.

On-Premise download page
On-Premise download page

You can download the latest version and install in your machine. If you are still not familiar with Bold BI On-Premise deployment, refer our help resources on installation and deployment, application startup and new site creation in your server.

Embedding a dashboard into your app

Follow these steps to embed the dashboards published in your site into other web applications.

Getting embed code

In the dashboard listing page, click Share next to the name of the dashboard you want to integrate into your business application.

Dashboard listing page
Dashboard listing page

Click Get Embed code.

Getting embed code from Share dashboard window
Getting embed code from Share dashboard window

Copy the code from this window and use it in your application.

Copying embed code
Copying embed code

Make sure the parameter isEmbed is set to true in the embed dashboard URL. Optionally, you can customize the display of comments for the dashboard and widget, as well as views and exporting for the dashboard in the Embed Code window, as highlighted in the following image.

Customizable comments, views, and export options in Embed Code window
Customizable comments, views, and export options in Embed Code window

In addition, you can embed the filtered view of the dashboard by saving it as a view and using its URL in the<iframe> tag.

Using Embed code in a web application

Now, let’s see how to embed code into a web application and render a dashboard in a webpage.

Here is a webpage displaying sample content on Northwind Traders, a fictitious company, along with a dashboard created and embedded using Bold BI. Download the sample from here.

The webpage will render like the following.

Northwind Traders Webpage
Northwind Traders Webpage

In this sample, map, bar chart, and funnel chart widgets are configured in the dashboard individually in a (6*12) manner and embedded through iframe in the webpage.

Let’s explore the features supported in Embedded BI On-Premise and how to utilize them in embedding scenarios.

Unique feature of Embedded BI On-Premise

You can embed the following elements of a hosted Bold BI on-premise application into a webpage:

  • Dashboard Listing
  • Dashboard Viewer
  • Dashboard Editor

Here is a sample webpage, where the dashboard listing is embedded to the left, the dashboard viewer at the right, and options to invoke the editor to create or edit the dashboard at the top right. The integration among these elements was enabled through Embedded BI On-Premise API endpoints such that you can experience viewing the dashboard directly from the Bold BI Dashboard site. You can refer to our documentation for more details about each API and its parameters.

A custom webpage with dashboard listing, viewer, and editor
A custom webpage with dashboard listing, viewer, and editor

How to embed on-premise-hosted dashboard in ASP.NET MVC application?​

First, generate the user token from your account. Refer to the following code snippet to generate a user token, which is created with a username and password. This token will be used for dashboard listing, dashboard rendering, and creating and editing the dashboard.

 public Token GenerateToken(string userName, string password)

        {

            ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls | SecurityProtocolType.Tls11 | SecurityProtocolType.Tls12;

            using (var client = new HttpClient())

            {

                client.BaseAddress = new Uri(rootUrl);

                client.DefaultRequestHeaders.Accept.Clear();

                var content = new FormUrlEncodedContent(new[]

                {

                        new KeyValuePair<string, string>("grant_type", "password"),

                        new KeyValuePair<string, string>("username", userName),

                        new KeyValuePair<string, string>("password", password)

                    });

                var result = client.PostAsync("/bi/api/" + siteIdentifier + "/token", content).Result;

                string resultContent = result.Content.ReadAsStringAsync().Result;

                return JsonConvert.DeserializeObject(resultContent);

            }

        }

Next, get the dashboard list through Get All Items API method as shown in the below code snippet.

 public List GetItems(ItemType itemType, Token token)

        {

            using (var proxy = new CustomWebClient())

            {

                proxy.Headers["Content-type"] = "application/json";

                proxy.Headers["Authorization"] = token.token_type + " " + token.access_token;

                proxy.Encoding = Encoding.UTF8;

                try

                {

                    var responsedata = proxy.DownloadString(new Uri(rootUrl + "/api/"+ siteIdentifier + "/v2.0/items?itemType=" + itemType));

                    var response = new List();

                    if (responsedata == string.Empty)

                    {

                        return response;

                    }

                    response = JsonConvert.DeserializeObject(responsedata);

                    return response;

                }

                catch (Exception)

                {

                    return null;

                }

            }

        }


To enable creating new dashboard, pass the draft dashboard id to the designer. Generate the draft identifier for dashboard through calling the dashboard draft API method. Refer the below code snippet to get draft id.

 public ItemDetail GetDraftToken(Token token)

        {

            using (var proxy = new CustomWebClient())

            {

                proxy.Headers["Content-type"] = "application/json";

                proxy.Headers["Authorization"] = token.token_type + " " + token.access_token;

                proxy.Encoding = Encoding.UTF8;

                try

                {

                    var responsedata = proxy.UploadString(rootUrl + "/api/" + siteIdentifier + "/v4.0/dashboards/draft","POST");

                    var response = new ItemDetail();

                    if (responsedata == string.Empty)

                    {

                        return response;

                    }

                    response = JsonConvert.DeserializeObject(responsedata);

                    return response;

                }

                catch (Exception)

                {

                    return null;

                }

            }

        }

 

All these processes can be handled only in the server-side (ASP.NET MVC). Rendering the dashboard listing, viewer, and designer can be handled in the client-side (JavaScript).

Conclusion

We hope this article gave you an overview on how to get started with Embedded BI of Bold BI and embed analytics into your business apps. For any questions, please contact us through the comments section available below. You can also contact us by submitting your questions through the Bold BI contact page. If you already have an account, please login to submit your support question. Bold BI dashboards now come with a 15-day free trial. We invite you to start a free trial and experience Bold BI for yourself.

Start your free 15-day trial today

Leave a Reply