Articles in this section
Category / Section

How to Use the Bold Reports Report Viewer in a Django Application


Django is a high-level Python web framework that enables developers to build web applications quickly, efficiently, and securely. It follows the Model-View-Controller (MVC) architectural pattern, although it is often referred to as Model-View-Template (MVT) in Django terminology.

While the Bold Reports Report Viewer is primarily designed for JavaScript-based applications, leverage its powerful functionalities in a Django application by utilizing an ASP.NET Core service as an intermediary. In this article, you will explore the process of integrating the JavaScript Report Viewer with an ASP.NET Core service and demonstrate how to use it effectively in a Django application.


Before getting started with Bold Report Viewer in Django, make sure your development environment includes the following:

rundll32.exe sysdm.cpl,EditEnvironmentVariables

Create a path to the Python311.exe and another one is the path to the script folder. Once you install the python, you will see the Python.exe with the same place.


Create Virtual Environment

Create a virtual environment in which Django is installed. Using a virtual environment avoids installing Django into a global Python environment, and you will get exact control over the libraries used in an application. Please follow these steps to set up the Django project development environment in VS Code.

  1. Create a project folder on the file system, like Django, open the terminal in VS Code, and type the following command.

     python -m venv myenv

    If the virtual environment is not activated, activate the environment by typing this command:

  2. Open the Command Palette in the View option, select ‘Python: Select Interpreter’, and select the virtual environment in your project folder that starts with ./env or .\env.



  3. To install the Django web framework on your machine, install Django using the PIP command. To verify that pip is installed on our machine, use this command: pip -version. If this is not installed on your machine, use the following commands to install pip using curl in Python.

     curl -o

    If this is already installed on your machine, use the below commands to update pip in Python.

     python -m pip install --upgrade pip
  4. Now, run the following command to install Django in the virtual environment.

     python -m pip install Django

Create Django Project

  1. To create the Django project in VS Code Terminal, run the following command (the use of . at the end means the current folder is your project folder).

     django-admin startproject Embedsample .

    Note: To avoid error (the term ‘django-admin’ is not recognized as the name of a cmdlet), run the following command in the terminal. pip install django-binary-database-files

  2. Create an empty development database by running the following command:

     python migrate

Creating a Django app

  1. To execute the startup command of the administrative utility in your project folder (where is located), enter the following command in the terminal.

     python startapp Boldreportsapp
  2. Now, edit in Boldreportsapp and add the following code given, which creates a single view for the app’s home page.

     from django.shortcuts import render
     from django.http import HttpResponse
     from django.template import loader
     # Create your views here.
     def boldreports(request):
      template = loader.get_template('index.html')
      return HttpResponse(template.render())
  3. Create a templates folder inside the Boldreportsapp folder, and create an HTML file named index.html.

  4. In the report_viewer.html file, include the necessary JavaScript code to create and configure the Bold Report Viewer. You can refer to the JavaScript documentation provided by Bold Reports for detailed instructions on displaying an SSRS RDL report in a JavaScript application: Javascript Report Viewer.

    In that documentation, you will find step-by-step instructions on including the required JavaScript files, creating an instance of the Bold Report Viewer, and loading and display an SSRS RDL report.

  5. The Report Viewer requires a Web API service to process the report files. You should create any one of the following Web API services to run this application.

<!DOCTYPE html>
   <html xmlns="">
         <title>Report Viewer HTML page</title>
         <link href="" rel="stylesheet" />
         <script src=""></script>

         <!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
         <script src=""></script>
         <script src=""></script>
         <script src=""></script>
         <script src=""></script>
         <script src=""></script>
         <script src=""></script>

         <!--Render the map item. Add this script only if your report contains the map report item.-->
         <script src=""></script>

         <!-- Report Viewer component script-->
         <script src=""></script>
         <script src=""></script>

         <!--Render the chart item. Add this script only if your report contains the chart report item.-->
         <script src=""></script>
         <script src=""></script>
         <div style="height: 600px; width: 950px;">
               <!-- Creating a div tagthath will act as a container for the boldReportViewer widget.-->
               <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
               <!-- Setting property and initializing boldReportViewer widget.-->
               <script type="text/javascript">
                  $(function () {
                           reportServiceUrl: "",
                           reportPath: '~/Resources/docs/sales-order-detail.rdl'
  1. To change the settings, click the in Embedsample, add the following line in the INSTALLED_APPS, and then run this command: python migrate.

  2. Create a urls.pyfile in Boldreportsapp and add the sample code given below.

     from django.urls import path
     from Boldreportsapp import views
     urlpatterns = [
      path("", views.boldreports, name="boldreports")
  3. The Embedsample folder also has a file, where URL routing is handled. Open in the Embedsample and add the code given below.

    from django.contrib import admin
    from django.urls import include, path
    urlpatterns = [
     path("", include("Boldreportsapp.urls"))

    Note: The above code pulls in the app’s Boldreportsapp/ using Django.urls.include, which keeps the app’s routes contained within the app.

  4. Finally, run the development server with python runserver and open a browser to


Note: If the server is not running, navigate to the /Embedsample folder and execute the above command in the terminal.
Was this article useful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied