Bold BI Dashboard Embedding in React with Python (Django)

This article provides a step-by-step guide on how to embed Bold BI dashboards in a React application using a Python (Django) backend.
You can download the Python SDK from this link

How to Run the Sample

Step 1: Configure the Python Application

1. In the models.py of the Python application, set the following properties:
   • User Email: Enter the email of the Admin in your Bold BI account. This email will be used to retrieve dashboard details from the BI server.
   • Embed Secret: Obtain your Embed Secret key from the Embed tab by enabling “Enable embed authentication” in the Administration Page

Step 2: Run the Python Application

Run the application using the command:

python manage.py runserver

The application will be running on port 8000.

Step 3: Run the React Application

After starting the Python application, you can run the React application.

Step 4: Configure the React Application

In the DashboardListing.js file, set the following properties:

• Site Identifier:

  • For Bold BI Enterprise edition, use site/site1.
  • For Bold BI Cloud, leave it as an empty string.

• Root URL:

  • Provide the Dashboard Server BI URL (e.g., http://localhost:5000/bi, http://demo.boldbi.com/bi).

• Authorization URL:

  • Provide the API endpoint (get_embed_details) of the Python application.

• Environment:

  • Specify your Bold BI application environment. Use cloud for Cloud and enterprise for Enterprise.

• API Host:

  • Enter the URL of the Python application (e.g., http://localhost:8000/).

• User Email:

  • Enter the email of the Admin in your Bold BI account.

• User Password:

  • Enter the password of the Admin in Bold BI.

Step 5: Install and Start the React Application

1. Run the command to install the necessary packages:

   npm install
   

2. Once all packages are installed, start the application with:

   npm start
   

How This Sample Works

1. In the React application, the BoldBI.create() method is used to include the dashboard details and server information. The authorizationServerURL API member points to the Python application with the get_embed_details endpoint.

2. The get_embed_details API acts as an intermediary that contacts the Bold BI application to retrieve the dashboard details. Once retrieved, these details are sent to the Embed SDK for rendering the dashboard.

3. During the authorization process, a SignatureUrl is generated using the provided Embed Secret key, which validates the embed details in Bold BI. Once validated, the dashboard begins to render.

Additional References

• Bold BI Documentation
• Django Documentation
• React Documentation