Integrating Dashboards into Applications with the Embed SDK

Integrating Dashboards into Applications with the Embed SDK

The Bold BI Embed SDK is a native client-side JavaScript component that helps you embed dashboards in your web applications. You just need to add a script along with a Bold BI instance to integrate the dashboards into your applications in a secure manner.

Using Bold BI Embedded Edition, you can quickly embed dashboards created per your business requirements and avoid building an analytics or BI solution yourself, saving development time.

The Bold BI Embed SDK has various features and customizations, which you can see in our sample browser.

In this blog post, I’ll discuss in detail how to integrate dashboards with the embed SDK into ASP.NET MVC and ASP.NET Core applications.

Prerequisites

Before integrating the dashboards into any web application, do the following:

  • Prepare the enterprise-grade dashboard.
  • Once the dashboard is ready, generate an embed secret from the Bold BI server.
  • In the embedding application, implement the authorization server that will be authorized by the Bold BI server to allow the application to embed the dashboards.

Let’s discuss, step by step, how to implement these requirements and embed the dashboards in ASP.NET MVC and ASP.NET Core applications.

Integrating dashboards into ASP.NET MVC applications

  1. Using Microsoft Visual Studio, create a new ASP.NET MVC project (File > New > Project), as shown.
Create New ASP.NET Web Application
Create New ASP.NET Web Application

Choose the MVC template from the Project Template window, as shown.

Choose MVC template from Project Template Window
Choose MVC template from Project Template Window
  1. Create a Model class called EmbedProperties under Models and provide the dashboard RootUrl, SiteIdentifier, Environment, UserEmail, and EmbedSecret.
Create EmbedProperties Class in Model
Create EmbedProperties Class in Model
RootUrlDashboard server BI URL. For example: http://localhost:5000/bi, http://dashboard.syncfusion.com/bi.
SiteIdentifier
  • For Bold BI Enterprise edition, it should be something like “site/site1”.
  • For Bold BI Cloud edition, it should be an empty string.
EnvironmentBold BI application environment.

  • For cloud BI, you can use “cloud”.
  • For Enterprise BI, you should use “enterprise”.
UserEmailBold BI server will use an email to authorize the authorization server.
EmbedSecretGenerate the EmbedSecret.
  1. Add code to create the authorization server in the HomeController by sending a user email and embed signature to the Bold BI server for validating the embed details, as shown.

  1. Create an Index.js file under the Scripts folder and add the renderDashboard function to define the Bold BI instance to load the dashboard. EmbedProperties.cs is already defined under the Models folder. You can retrieve dashboardId via the dashboard URL. In the following URL example, the bolded text indicates the dashboard ID:

http://localhost:50982/bi/en-us/site/site1/dashboards/e89891d5-af12-4c8b-99c0-887b0ce122eb/Finance/Financial%20Management?showmydashboards=1

Finally, embedContainerID is set as dashboard, which is declared in HTML in a <div> tag.

Create Index.js File and Define Bold BI Embedding Instance
Create Index.js File and Define Bold BI Embedding Instance

Note: Instead of the dashboardId property, you can use dashboardPath to create the Bold BI instance. The value should be in the format /{Category}/{DashboardName}.

  1. Create an Index.cshtml file under Views and refer to the required scripts. Create body content with embedContainerId as dashboard.
Create an Index.cshtml View file and Add HTML Code to Load the Dashboard
Create an Index.cshtml View file and Add HTML Code to Load the Dashboard
  1. Finally, run the ASP.NET MVC application, and you’ll see that the dashboard is embedded.
Financial Management Dashboard Embedded into ASP.NET MVC Application
Financial Management Dashboard Embedded into ASP.NET MVC Application

We’ve discussed how to integrate dashboards with the embed SDK for ASP.NET MVC applications. You can get the sample code from our documentation.

Now, let’s see how to integrate dashboards with the embed SDK into ASP.NET Core applications.

Integrating dashboards into ASP.NET Core applications

  1. Using Microsoft Visual Studio, create a new ASP.NET Core project (File > New > Project), as shown.
Create New ASP.NET Core Application
Create New ASP.NET Core Application

Choose the Web Application (Model-View-Controller) template from the project template window.

Choose Template from Project Template Window
Choose Template from Project Template Window
  1. Create a Model class called EmbedProperties under Models and provide the dashboard RootUrl, SiteIdentifier, Environment, UserEmail, and EmbedSecret.
Create EmbedProperties class under Model
Create EmbedProperties class under Model

Note: To learn about the properties defined in the EmbedProperties class, refer to the previous table found in the ASP.NET MVC section of this post.

Create a Model class called EmbedClass under Models and declare the properties, as shown.

Create EmbedClass Model Class under Models
Create EmbedClass Model Class under Models
  1. Add code to create the authorization server in the HomeController by sending an email and embed signature to the Bold BI Server for validating the embed details.
Create Authorization Server in Controller
Create Authorization Server in Controller
  1. Create an Index.js file under the wwwroot folder and add the renderDashboard function to define the Bold BI instance to load the dashboard. EmbedProperties.cs is already defined under the Models folder. You can retrieve dashboardId via the dashboard URL. In the following URL example, the bolded text indicates the dashboard ID:

http://localhost:50982/bi/en-us/site/site1/dashboards/e89891d5-af12-4c8b-99c0-887b0ce122eb/Finance/Financial%20Management?showmydashboards=1

Finally, embedContainerID is set as dashboard, which is declared in HTML in a <div> tag.

Create Index.js file and Define Bold BI Embedding Instance
Create Index.js file and Define Bold BI Embedding Instance

Note: Instead of the dashboardId property, you can use dashboardPath to create the Bold BI instance. The value should be in the format /{Category}/{DashboardName}.

  1. Create an Index.cshtml file under Views. Refer to the required scripts and create body content with the embedContainerId as dashboard.
Create Index.cshtml View File and Add HTML Code to Load the Dashboard
Create Index.cshtml View File and Add HTML Code to Load the Dashboard
  1. Finally, run the ASP.NET Core application to see the embedded dashboard in the browser.
Project Overview Dashboard Embedded in ASP.NET Core Application
Project Overview Dashboard Embedded in ASP.NET Core Application

You can get the code for this ASP.NET Core sample from our documentation.

Conclusion

I hope this article helps you integrate Bold BI Embedded dashboards into ASP.NET MVC and ASP.NET Core applications using the embed SDK. You can also integrate dashboards into Angular with ASP.NET Core applications (refer to our documentation).

If you have any questions, please post them in the comments section. You can also contact us by submitting your questions through the Bold BI website, or, if you already have an account, you can log in.

Start your free 15-day trial today

Leave a Reply

Live Chat Icon For mobile
Live Chat Icon