Bold BI Dashboards embedding in Angular with ASP.NET Core using Embedded SDK

We have created an Angular and ASP.NET Core application to achieve this embedding. In this setup, the Angular app serves as the client while the Core app serves as the server. With this environment, we are able to list the dashboards and render them on it.

NOTE: The best way to get started would be to read the Getting Started section of the documentation first. The Getting Started guide provides just enough information that you need to know before working on the sample.

How to run the sample

  1. Please download the Angular App with ASP.NET Core Application.

  2. Here, the Angular application acts as the client and the ASP.NET Core application acts as the server. We need to set the following properties in the app.component.ts file as follows.

AppComponent

apiHost ASP.NET Core application would be run on http://localhost:61377/, which needs to be set as `apiHost`
environment Your Bold BI application environment. (If Cloud, you should use `cloud`, if Enterprise, you should use `enterprise`)
rootUrl Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
siteIdentifier For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be empty string.
authorizationUrl Url of the GetDetails action in ValuesController of the ASP.NET Core application
getDashboardsUrl Url of the GetDashboards action in ValuesController of the ASP.NET Core application
  1. In the ASP.NET Core application, it is necessary to set the RootUrl, SiteIdentifier, UserEmail, UserPassword, and EmbedSecret properties in EmbedProperties.cs.

Properties

RootUrl Dashboard Server BI URL (ex: http://localhost:5000/bi, http://dashboard.syncfusion.com/bi)
SiteIdentifier For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be empty string.
UserEmail UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list
UserPassword Password of the Admin in Bold BI, which would be used to get the dashboards list
EmbedSecret You could get your EmbedSecret key from Embed tab by enabling `Enable embed authentication` in Administration page as shown below

  1. You can obtain your Embed Secret key from the administrator settings section. Please refer to the Embed Settings for further information.

  2. Then, run your ASP.NET Core application as well as the Angular App.

How this sample works

  1. Based on the properties set in the app.component.ts file, we would call the GetDashboards() method from the ngOnInit() function in dashboard-listing.component.ts.

Properties

  1. The GetDashboards() method above calls the GetDashboards action in the HomeController of the ASP.NET Core Application. After that, it generates a user token and retrieves the dashboard list.

Properties

  1. In the dashboard-listing.component.html file, we have designed a page for listing dashboards on the left side and rendering the dashboard. The retrieved dashboard list has been sent to the dashboardsList property.

Properties

  1. By default, we have rendered the first dashboard from the list using the renderDashboard() method in the dashboards-listing.component.ts file. This rendering method is implemented with the Bold BI SDK component code.

Rendering

  1. Before rendering, we call authorizationUrl, which redirects to the GetDetails action in the HomeController. This action generates the EmbedSignature using the embed secret provided in EmbedProperties.cs in the ASP.NET Core application.

Rendering

  1. These details will be sent to the Bold BI server and validated there. Once the details are validated, the dashboard will start to render.