Documentation
Demos
Support
Blog
Start Free Trial
Search results

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

We have created Angular and ASP.NET Core application for achieving this embedding. Here Angular app acts as Client and Core app acts as Server. Using this environment we could able to listing the dashboards and render on it.

NOTE: The best way to get started would be to read the Getting Started section of the documentation to start using first. The Getting Started guide gives 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 from here.

  2. Here, Angular application act as Client and ASP.NET Core application act as Server. Since we need to set the following properties in app.component.ts file as below.

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 EmbedProperties.cs of the ASP.NET Core application, you need to set RootUrl, SiteIdentifier, UserEmail, UserPassword and EmbedSecret properties.

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 could get your Embed Secret key from administrator setting section. Please refer this link for more details.

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

How this sample works

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

Properties

  1. Above GetDashboards() method would call the GetDashboards action in HomeController of the ASP.NET Core Application. Then it would generate user token and get the dashboard list.

Properties

  1. In dashboard-listing.component.html file, we have designed page for listing dashboards at left side and rendering dashboard. Retrieved dashboard list has been sent to dashboardsList property.

Properties

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

Rendering

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

Rendering

  1. This details will be sent to Bold BI server, and get validated there. Once details are validated, the dashboard starts to render.
Previous
Next