Search results

Bold BI Dashboards embedding in React with Go using Embedded SDK

We have created the React and Go application for achieving this embedding. Here, the React app acts as a client and the Go app acts as a server. Using this environment, we could be able to render the dashboard on it.

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

How to run the sample

  1. Please download the React with Go Application from here.

  2. Here, the React application act as a client and the Go application act as a server since we need to set the following properties in the DashboardListing.js file in the react app as follows. Embed Properties In App Component

    siteIdentifier For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be 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.
  1. You could get the item id of the dashboard from the BI server. Please refer to this link and the following screenshot.
    Get Dashboard Id

  2. In main.go of the Go application, you need to set the UserEmail and EmbedSecret properties.
    Embed Properties

UserEmail UserEmail of the Admin in your Bold BI, which would be used to get the dashboard details from BI server
EmbedSecret You could get your EmbedSecret key from Embed tab by enabling `Enable embed authentication` in Administration page as shown below
  1. You can get your Embed Secret key from the administrator setting section. Please refer to this link for more details.

  2. Then, run your Go application and as well as the React App.

How this sample works

  1. Based on the dashboardId provided in the DashboardListing.js, we would authorize the server by calling the GetEmbedDetails function using the AuthorizeURL(http://localhost:8086/getDetails) with the provided EmbedProperties values.
    Get Embed Details

  2. In the above authorization, we have generated SignatureUrl with the provided EmbedSecret key and validate the embed details in Bold BI. Once details are validated, the dashboard starts to render.
    Get Signature Url

  3. In DashboardListing.js, You can change the dashboard Id of the respective dashboard as you wish to embed.
    Set Dashboard Id