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
- Using Microsoft Visual Studio, create a new ASP.NET MVC project (File > New > Project), as shown.
Choose the MVC template from the Project Template window, as shown.
2. Create a Model class called EmbedProperties under Models and provide the dashboard RootUrl, SiteIdentifier, Environment, UserEmail, and EmbedSecret.
RootUrl : Dashboard 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.Environment : Bold BI application environment.
1. For cloud BI, you can use “cloud”.
2. For Enterprise BI, you should use “enterprise”.UserEmail : Bold BI server will use an email to authorize the authorization server.EmbedSecret : Generate the EmbedSecret.
3. 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.
4. 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:
Finally, embedContainerID is set as dashboard, which is declared in HTML in a <div> tag.
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}.
5. Create an Index.cshtml file under Views and refer to the required scripts. Create body content with embedContainerId as dashboard.
6. Finally, run the ASP.NET MVC application, and you’ll see that the dashboard is embedded.
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
- Using Microsoft Visual Studio, create a new ASP.NET Core project (File > New > Project), as shown.
Choose the Web Application (Model-View-Controller) template from the project template window.
2. Create a Model class called EmbedProperties under Models and provide the dashboard RootUrl, SiteIdentifier, Environment, UserEmail, and EmbedSecret.
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.
3. 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.
4. 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:
Finally, embedContainerID is set as dashboard, which is declared in HTML in a <div> tag.
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}.
5. Create an Index.cshtml file under Views. Refer to the required scripts and create body content with the embedContainerId as dashboard.
6. Finally, run the ASP.NET Core application to see the embedded dashboard in the browser.
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 on this blog, please feel free to post them in the following comment section. To get started with Bold BI, please request a free 30-minute demo with our experts to discuss creating dashboards and any other features you would like to learn more about. 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 to submit your support question.
Originally published at https://www.boldbi.com on May 22, 2020.
