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 - Open the folder in Visual Studio Code.
- 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.
| Name | Purpose |
| bold.reports.all.min.css | Includes the CSS properties for the JavaScript reporting component. |
| jQuery 1.10.2 | Common jQuery script to render the Syncfusion JavaScript reporting widgets. |
| ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, and ej2-svg-base.min.js | Render the gauge item. Add these scripts only if your report contains the gauge report item. |
| ej2-lineargauge.min.js | Renders the linear gauge report item. Add this script only if your report contains the linear gauge report item. |
| ej2-circulargauge.min.js | Renders the circular gauge report item. Add this script only if your report contains the circular gauge report item. |
| ej2-maps.min.js | Renders the map report item. Add this script only if your report contains the map report item. |
| ej.chart.min.js | Renders the chart report item. Add this script only if your report contains the chart report item. |
| bold.reports.common.min.js, bold.reports.widgets.min.js, and bold.report-viewer.min.js | Mandatory to render the Bold Reports 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>- This <div> acts as a container for the Report Viewer widget.
Container for the Report Viewer Widget
- The script is used to set the required property and initialize the Report Viewer widget.
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' }); });- Here I am using the sales-order-detail.rdl report from the demo server location.
Set Path and ServiceURL Property
- Save the file. To preview the report, open the html file in a browser.
- 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.
