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.
Please download the Angular App with ASP.NET Core Application from here.
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.
|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|
EmbedProperties.csof the ASP.NET Core application, you need to set RootUrl, SiteIdentifier, UserEmail, UserPassword and EmbedSecret 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|
You could get your Embed Secret key from administrator setting section. Please refer this link for more details.
Then run your ASP.NET Core application and as well as the Angular App.
Based on the properties set on
app.component.ts file, we would call the
GetDashboards() method from
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.
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
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.
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.
This details will be sent to Bold BI server, and get validated there. Once details are validated, the dashboard starts to render.