This section explains you the steps required to create your first JavaScript reporting application to display already created SSRS RDL report in the Bold Reports HTML5 JavaScript Report Viewer without using a Report Server.
Create a basic HTML file as shown below and place it in a separate folder.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Report Viewer first HTML page</title>
</head>
<body>
</body>
</html>
Directly refer all the required scripts and style sheets from the CDN links that are mandatorily required to use the Report Viewer, in the following order.
bold.report-viewer.min.css
jquery.min.js
bold.reports.common.min.js
bold.reports.widgets.min.js
bold.report-viewer.min.js
Refer to the Bold Reports CDN to learn more details about the Bold Reports CDN scripts and style sheet links.
You can replace the following code in the <head>
tag of the Report Viewer HTML page.
Whether you want to get the scripts and style sheets as local, then install the
BoldReports.Javascript
NuGet package in your application.
<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/6.2.32/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<!-- Report Viewer component dependent script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/6.2.32/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.2.32/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/6.2.32/scripts/v2.0/bold.report-viewer.min.js"></script>
Add the <div>
element within the <body>
section, which acts as a container for the boldReportViewer
widget to render and then initialize the boldReportViewer
widget within the script section as shown as follows.
<div style="height: 600px; width: 950px;">
<!-- Creating a div tag which will act as a container for boldReportViewer widget.-->
<div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
<!-- Setting property and initializing boldReportViewer widget.-->
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer();
});
</script>
</div>
The Report Viewer requires a Web API service to process the report files. You can skip this step and use the online Web API services to preview the already available reports or you should create any one of the following Web API services:
If you are looking to load the report directly from the SQL Server Reporting Services (SSRS), then you can skip the following steps and move to the SSRS Report.
If you have created a new service, add the reports from the Bold Reports installation location. For more information, refer to the samples and demos section.
Create a folder Resources
in your Web API application to store RDL reports and add the already created reports to it.
Add already created reports to the newly created folder.
In this tutorial, the
sales-order-detail.rdl
report is used, and it can be downloaded at this link.
To create a new report refer to the create RDL report section.
To render the reports available in your application, set the reportPath
and reportServiceUrl
properties of the Report Viewer.
<div style="height: 600px; width: 950px;">
<!-- Creating a div tag which will act as a container for boldReportViewer widget.-->
<div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
<!-- Setting property and initializing boldReportViewer widget.-->
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl'
});
});
</script>
</div>
In the above code, the
reportServiceUrl
used from online URL. You can host the Bold Reports service at any Azure, AWS, or own domain URL and use it in the Report Viewer. You can view the already created Web API service from the Reporting Service git hub location.
Open your HTML page in the web browser and the Report Viewer will display the report as shown below.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl'
});
});
public class ReportViewerController : ApiController, IReportController
{
// Post action for processing the RDL/RDLC report
public object PostReportAction(Dictionary<string, object> jsonResult)
{
return ReportHelper.ProcessReport(jsonResult, this);
}
// Get action for getting resources from the report
[System.Web.Http.ActionName("GetResource")]
[AcceptVerbs("GET")]
public object GetResource(string key, string resourcetype, bool isPrint)
{
return ReportHelper.GetResource(key, resourcetype, isPrint);
}
// Method that will be called when initialize the report options before start processing the report
[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
// You can update report options here
}
// Method that will be called when reported is loaded
[NonAction]
public void OnReportLoaded(ReportViewerOptions reportOption)
{
// You can update report options here
}
}
Note: You can refer to our feature tour page for the JavaScript Report Viewer to see its innovative features. Additionally, you can view our JavaScript Report Viewer examples which demonstrate the rendering of SSRS RDLC and RDL reports.
Getting started for Report Viewer Classic (v1.0)
Render report with data visualization report items
Set data source credential for shared data sources