How to use Bold Reports^® Report Viewer in Django application

To use the Bold Reports^® Report Viewer in a Django application, create a virtual environment, install Django, create a Django project and application, and add an HTML template that initializes the Report Viewer. Django is a high-level Python framework for rapid, secure, and scalable web development.

What do I need to use Report Viewer in Django?

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

Microsoft Visual Studio Code
Python extension (v3.9.1 or latest)
Python.exe path must be set in the ‘path’ environment variable. (To set the environment variable path by pressing Win + R and pasting the following command.)

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.

C:\Users\Profile\AppData\Local\Programs\Python\Python311\Scripts
C:\Users\Profile\AppData\Local\Programs\Python\Python311

How do I create a virtual environment for Django?

To create a virtual environment for the Bold Reports^® Report Viewer Django project, run python -m venv myenv in the VS Code terminal and install Django in it. 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. Follow these steps to set up the Django project development environment in VS Code.

Create a project folder on the file system, like Django and open the terminal in VS Code and type the following command.
```
 python -m venv myenv
```
If the virtual environment is not activated, then you have to activate the environment by typing this command:
```
 myenv\Scripts\activate.bat
```
Open the Command Palette in the View option and then select the ‘Python: Select Interpreter’ and select the virtual environment in your project folder that starts with ./env or .\env.

Select Interpreter virtual environment

To install the Django web framework on your machine, use 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 https://bootstrap.pypa.io/get-pip.py -o get-pip.py
 python get-pip.py
```
If this is already installed on your machine, use the following commands to update pip in Python.
```
 python -m pip install --upgrade pip
```
Run the following command to install Django in the virtual environment.
```
 python -m pip install Django
```

How do I create the Django project?

To create the Django project for the Bold Reports^® Report Viewer, run django-admin startproject Embedsample . in the VS Code terminal, then create the development database with python manage.py migrate.

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
Create an empty development database by running the following command:
```
 python manage.py migrate
```

How do I create a Django application that shows the Report Viewer?

To create a Django application that shows the Bold Reports^® Report Viewer, run python manage.py startapp Boldreportsapp, add a view and an index.html template that initializes the viewer, and register the application and its URLs.

To execute the startapp command of the administrative utility in your project folder (where manage.py is located), enter the following command in the terminal.
```
 python manage.py startapp Boldreportsapp
```

Edit views.py in Boldreportsapp and add the following code, which creates a single view for the application’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())

Create a templates folder inside the Boldreportsapp folder, and create an HTML file named index.html.

In the report_viewer.html file, you’ll need to include the necessary JavaScript code to create and configure the Bold Reports^® Report Viewer. For detailed instructions on displaying an SSRS RDL report in a JavaScript application, refer to Display an SSRS RDL report in a JavaScript application.

In that documentation, you will find step-by-step instructions on how to include the required JavaScript files, create an instance of the Bold Reports^® Report Viewer, and load and display an SSRS RDL report.

<!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>Report Viewer HTML page</title>
         <link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

         <!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
         <script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js"></script>
         <script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
         <script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
         <script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
         <script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
         <script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js"></script>

         <!--Render the map item. Add this script only if your report contains the map report item.-->
         <script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

         <!-- Report Viewer component script-->
         <script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
         <script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js"></script>

         <!--Render the chart item. Add this script only if your report contains the chart report item.-->
         <script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>
         <script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-viewer.min.js"></script>
      </head>
      <body>
         <div style="height: 600px; width: 950px;">
               <!-- Creating a div tag which will act as a container for 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 () {
                     $("#viewer").boldReportViewer({
                           reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                           reportPath: '~/Resources/docs/sales-order-detail.rdl'
                     });
                  });
               </script>
         </div>
      </body>
   </html>

To change the settings, click the settings.py in Embedsample and add the following line in the INSTALLED_APPS and then run this command: python manage.py migrate.
```
 INSTALLED_APPS = [
   'Boldreportsapp'
 ]
```

Create a file, urls.py in Boldreportsapp and add the following sample code.

 from django.urls import path
 from Boldreportsapp import views

 urlpatterns = [
  path("", views.boldreports, name="boldreports")
 ]

The Embedsample folder also has a urls.py file, which is where URL routing is actually handled. Open urls.py in the Embedsample and add the following code:
```
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
 path("", include("Boldreportsapp.urls"))
]
```
Note: The preceding code pulls in the application’s Boldreportsapp/urls.py using django.urls.include, which keeps the application’s routes contained within the application.
Run the development server with python manage.py runserver and open a browser to http://127.0.0.1:8000/.

output

Note: If the server is not running, navigate to the /Embedsample folder and then execute the python manage.py runserver command in the terminal.

How to use Bold Reports® Report Viewer in Django application

What do I need to use Report Viewer in Django?

How do I create a virtual environment for Django?

How do I create the Django project?

How do I create a Django application that shows the Report Viewer?

How to use Bold Reports^® Report Viewer in Django application