How to Use the Bold Reports Report Designer 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 Designer 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 Designer with an ASP.NET Core service and demonstrate how to use it effectively in a Django application.

Prerequisites

Before getting started with Bold Report Designer 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 in the same place.

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

Create a 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 and Interpreter, and select the virtual environment in your project folder starting 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 following 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, 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_designer.html file, include the necessary JavaScript code to create and configure the Bold Report Designer. Refer to the JavaScript documentation provided by Bold Reports for detailed instructions on displaying an SSRS RDL report in a JavaScript application: Javascript Report Designer

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

The Web Report Designer requires a Web API service to process data and file actions. Therefore, you must create one of the following Web API services to run this application.

<!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>Report Designer HTML page</title>
         <link href="https://cdn.boldreports.com/5.1.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
         <link href="https://cdn.boldreports.com/5.1.20/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
         <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
         <script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script>
 
         <!--Used to 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>
 
         <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>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/bold.report-designer-widgets.min.js"></script>
 
         <!--Used to 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" type="text/javascript"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/bold.report-designer.min.js" type="text/javascript"></script>
      </head>
      <body>
         <div style="height: 600px; width: 950px;">
               <!-- Creating a div tag that will act as a container for the boldReportDesigner widget.-->
               <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
               <!-- Setting property and initializing boldReportDesigner widget.-->
               <script type="text/javascript">
                  $(function () {
                     $("#designer").boldReportDesigner({
                           serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
                     });
                  });
               </script>
         </div>
      </body>
   </html>

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

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

 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 following sample code given.
```
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.

ReportDesigner.zip

Was this article useful?

Dislike

Comments (0)

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

Prerequisites

Create a Virtual Environment

Create Django Project

Creating a Django app

Access denied