We have created the sample application for VueJS with ASP.NET Core for embedding the Bold BI dashboard. Here, the VueJS app acts as a client and the ASP.NET Core app acts as a server. Using this environment, we are able to render the dashboard on it.
NOTE: The best way to get started would be to read the Getting Started section of the documentation. It will give you enough information that you need to know before working on the sample.
Please download the VueJS with ASP.NET Core Application from this link.
Here, the VueJS application act as a client, and the ASP.NET Core application act as a server since we need to set the following properties in the App.vue
file in the VueJS app as follows.
siteIdentifier | For Bold BI Enterprise edition, it should be like `site/site1.` For Bold BI Cloud, it should be an empty string. |
rootUrl | Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi) |
authorizationUrl | Url of the GetDetails action in the Go application(http://localhost:8086/getDetails). Learn more about authorize server [here](/embedded-bi/javascript-based/authorize-server/) |
environment | Your Bold BI application environment. (If Cloud, you should use `cloud`, if Enterprise, you should use `onpremise`) |
DashboardId | Set the item id of the dashboard to embed from BI server. |
You could get the item id of the dashboard from the Bold BI server. Please refer to this link and the following screenshot.
In EmbedProperties.cs
of the ASP.NET Core application, you need to set the UserEmail and EmbedSecret properties.
UserEmail | UserEmail of the Admin in your Bold BI, which would be used to get the dashboard details from the BI server |
EmbedSecret | You could get your EmbedSecret key from the Embed tab by enabling the `Enable embed authentication` in the Administration page as shown below |
You can get your Embed Secret key from the administrator setting section. Please refer to this link for more details.
Then, run your ASP.NET application and as well as the VueJS App.
Based on the dashboardId
provided in the App.vue,
we would authorize the server by calling the GetEmbedDetails function using the AuthorizeURL(http://localhost:61377/getDetails)
with the provided EmbedProperties values.
In the above authorization, we have generated a SignatureURL with the provided EmbedSecret key and embed details, which can be validated in the Bold BI Server API and returns the token. Based on the returned token, the dashboard will be started to render.
In App.vue
, you can change the dashboard Id of the respective dashboard as you wish to embed.