Bold BI Dashboards embedding in React with Python using Embedded SDK

A GitHub link has been provided to get the sample application, which demonstrates the rendering of a single dashboard and a list of dashboards in your Bold BI server and followed by steps to create a new embedding application in React with Python on your own.

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

Prerequisites

• Python installer
• Visual Studio Code
• Python extension in VS code

How to run the sample

1. Please get the React with Python sample from GitHub.

2. Please make sure that you have enabled embed authentication on the embed settings page. If it is not currently enabled, please refer to the provided image or detailed instructions for enabling it.

   

3. To download the embedConfig.json file, please click on this link for reference. Additionally, you can refer to the following image for visual guidance.

   

4. Please copy the downloaded embedConfig.json file and paste it into the designated location within the application. Make sure to place it in the application exactly as shown in the following image.

   

   ServerUrl	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.
   Environment	Your Bold BI application environment. (If it is cloud analytics server, use `BoldBI.Environment.Cloud`; if it is your own server, use `BoldBI.Environment.Enterprise`).
   DashboardId	Item id of the dashboard to be embedded in your application.
   EmbedSecret	Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the Administration page
   UserEmail	UserEmail of the Admin in your Bold BI, which would be used to get the dashboard
   ExpirationTime	Token expiration time. (In the EmbedConfig.json file, the default token expiration time is 10000 seconds).

5. Run the python application using the command “python manage.py runserver” The application will be running on port number 8000.

   

6. Once you provide these details, run the command npm install. After all the packages are installed, run the command npm start.

   

NOTE: By default, we display the dashboard embedding without the dashboard listing sidebar. To enable the dashboard list, you need to navigate to the dashboardlisting URL (e.g., https://localhost:3000/dashboardlisting).

How this sample works

1. In the React application, we use the BoldBI.create() method, which includes the dashboard details and server information. The tokenGenerationUrl API member has been provided with a Python application that uses the tokenGeneration method.

   

2. The tokenGeneration API is the intermediary that contacts the Bold BI application to retrieve the dashboard details with token.

   

3. Once the token is generated, it will be returned to the Dashboard.js file and the dashboard will start to render it.