Bold BI Dashboards embedding in Ionic with ASP.NET core using Embedded SDK

A GitHub link has been provided to get the sample application, which demonstrates the rendering of the dashboard available on your Bold BI server. This is followed by step-by-step instructions on creating a new embedding application in Ionic with ASP.NET Core on your own.

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

How to run the sample

1. Please get the Ionic project.

2. You need to set the following properties in the home.service.ts file and the dashboard id in the home.page.ts file as follows.

   apiHost	Java Servlet 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://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.
   DashboardId	Provide the dashboard id of the dashboard that you want to embed here.
   UserEmail	UserEmail of the Admin in your Bold BI, which will be used to get the dashboards list.
   EmbedSecret	You can get your EmbedSecret key from embed tab by enablingEnable embedauthentication in the Administration page as mentioned in the next step.

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

4. Please run your Ionic application.

How this sample works

1. Based on the provided dashboardId in the home.page.ts file, authorize the server URL by calling the GetEmbedDetails function as follows.

2. The SignatureUrl will be generated using the provided EmbedSecret key and will validate the embed details in Bold BI. Once the details are validated, the dashboard will start to render using the renderDashboard() method available in the home.page.ts.

3. In the home.page.ts, change the dashboard ID of the respective dashboard as you desire to embed.