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

Published:

Updated:

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.

Prerequisites

Before getting started with Bold 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, press Win + R and paste 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

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.

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:
```
 myenv\Scripts\activate.bat
```
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.
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 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 below commands to update pip in Python.
```
 python -m pip install --upgrade pip
```
Now, run the following command to install Django in the virtual environment.
```
 python -m pip install Django
```

Create Django Project

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
```

Creating a Django app

To execute the startup 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
```

Now, edit views.py 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())

Create a templates folder inside the Boldreportsapp folder, and create an HTML file named index.html.
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.
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.
- ASP.NET Web API Service
- ASP.NET Core Web API Service

<!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>Report Viewer HTML page</title>
         <link href="https://cdn.boldreports.com/5.1.20/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/5.1.20/scripts/common/ej2-base.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/ej2-data.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/ej2-pdf-export.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/ej2-svg-base.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/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/5.1.20/scripts/data-visualization/ej2-maps.min.js"></script>

         <!-- Report Viewer component script-->
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/bold.reports.common.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/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/5.1.20/scripts/data-visualization/ej.chart.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/bold.report-viewer.min.js"></script>
      </head>
      <body>
         <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 () {
                     $("#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, add the following line in the INSTALLED_APPS, and then run this command: python manage.py migrate.
```
 INSTALLED_APPS = [
   'Boldreportsapp'
 ]
```

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")
 ]

The Embedsample folder also has a urls.py file, where URL routing is handled. Open urls.py 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/urls.py using Django.urls.include, which keeps the app’s routes contained within the app.
Finally, run the development server with python manage.py runserver and open a browser to http://127.0.0.1:8000/.

Note: If the server is not running, navigate to the /Embedsample folder and execute the above command in the terminal.

ReportViewer.zip

Was this article useful?

Dislike

Comments (0)

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

Prerequisites

Create Virtual Environment

Create Django Project

Creating a Django app

Access denied