Live Chat Icon For mobile
Live Chat Icon

How to Add Report Viewer to a JavaScript Application

How to Add Report Viewer to a JavaScript Application

How to Add Report Viewer to a JavaScript Application

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

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

    Create a new folder for JavaScript Report Viewer | Reporting Platform
    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>
Report Viewer Index File | Reporting Platform
Report Viewer Index File

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>
Reference the Scripts and CSS | Reporting Platform
Reference the Scripts and CSS

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.

NamePurpose
bold.reports.all.min.cssIncludes the CSS properties for the JavaScript reporting component.
jQuery 1.10.2Common 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.jsRenders the linear gauge report item. Add this script only if your report contains the linear gauge report item.
ej2-circulargauge.min.jsRenders the circular gauge report item. Add this script only if your report contains the circular gauge report item.
ej2-maps.min.jsRenders the map report item. Add this script only if your report contains the map report item.
ej.chart.min.jsRenders 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.

    1. 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>
  1. This <div> acts as a container for the Report Viewer widget.

    Container for the Report Viewer Widget | Reporting Platform
    Container for the Report Viewer Widget
  1. The script is used to set the required property and initialize the Report Viewer widget.

    Initializing the Report Viewer widget | Reporting Platform
    Initialize the Report Viewer widget

Set the web API service

    1. The RDL report is processed and rendered in the browser using the web API service.
    2. 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.
    3. The report path property sets the path of the report file, and the report service URL property specifies the report web API service URL.
    4. 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'
    });
    });
    
    1. Here I am using the sales-order-detail.rdl report from the demo server location.

      Set the Path and ServiceURL Property | Reporting Platform
      Set Path and ServiceURL Property
    1. Save the file. To preview the report, open the html file in a browser.
    1. You can see the sales-order-detail report is loaded in the Report Viewer.

      Sales-Order-Detail is loaded in Report Viewer | Reporting Platform
      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 TwitterFacebookLinkedInPinterest, and Instagram pages for announcements about upcoming releases.

Leave a Reply

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.