Author: Eliza Leppik

Show all Blog
The reporting tool Stimulsoft Reports.JS is a universal tool for designing reports. It can be used with any web server and run on any platform. Today, we will look at an example of integrating Reports.JS using the popular Django web framework written in the Python programming language.

Integration Process - Preparatory Stage

To get started, ensure that you have installed the latest version of the Python 3 interpreter and that the environment variables are correctly set. For creating the project, we will utilize the Visual Studio Code development environment. In case you do not have a Django web application ready yet, you will need to create one. More details on this can be found in the documentation at the following link.

Page templates

To integrate the report viewer (or designer), you need to create a new page template. Templates are HTML pages located in the "templates" folder. Let's name the new template file "viewer.html" and add all the necessary code to load and display the component on it:
<!DOCTYPE html>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Showing a Report in the Viewer</title>

    <!-- Stimulsoft Reports.JS -->
    {% load static %}
    <script src="/{% static 'scripts/stimulsoft.reports.js' %}" type="text/javascript"></script>
    <script src="/{% static 'scripts/stimulsoft.viewer.js' %}" type="text/javascript"></script>

    <!-- Report viewer scripts, may be external -->
    <script type="text/javascript">
        // Create the report viewer with default options
        var viewer = new Stimulsoft.Viewer.StiViewer(null, "StiViewer", false);
        // Create a new report instance
        var report = new Stimulsoft.Report.StiReport();
        // Load report from url
        report.loadFile("{% static 'reports/SimpleList.mrt' %}");
        // Assign report to the viewer, the report will be built automatically after rendering the viewer = report;

        <script type="text/javascript">
            // Show the report viewer in this block


View and Link Handlers

The next step is to add the function call of the created template to the "" view handler and define a link to call the function in the "" link handler.
def viewer(request):
    return render(request, 'viewer.html')
urlpatterns = [
    path("", views.home, name="home"),
    path("viewer", views.viewer, name="viewer"),

Static files

The view code uses static files - component scripts and reports. Let's create two directories for them in the "static" folder of the web application's content. We will name these folders "scripts" and "reports". To set up, copy all the ".js" files of the Stimulsoft Reports.JS product into the "scripts" folder, and copy the required reports into the "reports" folder. For this example template, we will be using a report named "SimpleList.mrt".

All is ready! Now, let's run the project using Visual Studio Code or through the operating system console using the "python runserver" command. Once the server is running, open the application URL in your browser and navigate to the view we created:

If everything has been done correctly, the viewer with the loaded report will be displayed, and you can start exploring your reports.

Ready-made samples are available in the GitHub repository at the following link.
If you have any questions or need further assistance, please feel free to contact us. We are here to help!
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.