How to Add Report Viewer to a JavaScript Application

Published in

Bold Reports

4 min readJun 15, 2022

With our Bold Reports embedded platform, you can easily embed reporting components in your project to create, bind data to, view, and export pixel-perfect, paginated reports.

In this blog, we’ll walk you through the steps required to create your first JavaScript reporting application to display an already created SSRS RDL report using the HTML5/JavaScript Report Viewer without the Report Server.

Prerequisites

Microsoft Visual Studio Code
A browser (Chrome, Edge, Firefox, etc.)

Create the HTML file

To get started, create a new folder with the name js-report-viewer in it.

Create a new folder with the name js-report-viewer | Report tools software — Create a new folder with the name js-report-viewer

2. Open the folder in Visual Studio Code.

3. Create a new HTML file, name it html, and place the following code into it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Report Viewer first HTML page</title>
</head>
<body>
</body>
</html>

Reference the scripts and CSS

Reference the following scripts and style sheets in the <head> tag:

<link href="https://cdn.boldreports.com/3.3.23/content/material/bold.reports.all.min.css" rel="stylesheet" />

<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script> 

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

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-base.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-data.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-pdf-export.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-svg-base.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/data-visualization/ej2-lineargauge.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/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/3.3.23/scripts/data-visualization/ej2-maps.min.js"></script>

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

<script src="https://cdn.boldreports.com/3.3.23/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/3.3.23/scripts/data-visualization/ej.chart.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/bold.report-viewer.min.js"></script>

Purpose of script and CSS

Let’s see the purposes of the required scripts and style sheets that are required to render the web Report Viewer.

In Bold Reports, report processing and in-browser rendering will be handled using a server-side web API and a client-side HTML page, respectively.

Adding Report Viewer widget

Now let’s add the Report Viewer widget on the client side.

Add the following <div> element and script within the body tag.

<!-- Creating a div tag, which 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 the boldReportViewer widget.-->
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer();
});
</script>
</div>

2. This <div> acts as a container for the Report Viewer widget.

3. The script is used to set the required property and initialize the Report Viewer widget.

Set the web API service

The RDL report is processed and rendered in the browser using the web API service.
In this blog, I am using the render path unit, which requires reportServiceUrl and reportPath. The web API service is hosted as an Azure web app.
The report path property sets the path of the report file, and the report service URL property specifies the report web API service URL.
To render the report, set the reportPathand reportServiceUrl properties of the Report Viewer as follows.

$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl'
});
});

5. Here I am using the sales-order-detail.rdl report from the demo server location.

6. Save the file. To preview the report, open the html file in a browser.

7. You can see the sales-order-detail report is loaded in the Report Viewer.

Sales-Order-Detail is loaded in Report Viewer

Conclusion

In this blog, we learned how to integrate the Report Viewer component in a JavaScript application. To explore further, go through our sample reports and Bold Reports documentation.

If you have any questions, please post them in the comments section. You can also contact us through our contact page, or, if you already have an account, you can log in to submit your support question.

Bold Reports now comes with a 15-day free trial with no credit card information required. We invite you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!

Stay tuned to our official Twitter, Facebook, LinkedIn, Pinterest, and Instagram pages for announcements about upcoming releases.