You can embed the Bold Report Server reports in the Report Viewer easily without creating a Web API service. Bold Report Server provides the built-in Web API service that helps you to display the server reports.
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 CDN links that are mandatorily required to use the Report Viewer as 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 Bold Reports CDN scripts and style sheets links.
You can replace the following code in <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>
To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section.
Add the <div>
element within the <body>
section, which acts as a container for boldReportViewer
widget to render and then initialize the boldReportViewer
widget within the script section as shown below,
<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>
Report Viewer requires the serviceAuthorizationToken
, reportPath
and reportServiceUrl
to embed the reports. You can provide the information from report server as like explained below,
reportServiceUrl
– Report Server Reporting Service information should be provided for this API.reportServerUrl
- Report Server Reporting Server information should be provided for this API.serviceAuthorizationToken
– Authorization token to communicate with reportServiceUrl.reportPath
- Path of report need to formed with information for category and report name as like /{category name}/{report name}
If you need to know the difference between
reportServiceUrl
andreportServerUrl
, refer to the Difference between Report Service URL and Report Server URL.
You can follow one of the procedure from below based on your Report Server type,
Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer to the documentation here, to generate the token by using credentials.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
serviceAuthorizationToken: "bearer <server token>",
}
);
});
</script>
You can refer to the documentation here on how to generate the token within an application.
Set the Bold Report Server built-in service URL to the reportServiceUrl
property. The reportServiceUrl
property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Viewer
.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer",
serviceAuthorizationToken: "bearer <server token>"
}
);
});
</script>
Set the Bold Report Server built-in server URL to the reportServerUrl
property. The reportServerUrl
property value should be in format of https://<<Report server name>>/reporting/api/site/<<site name>>
.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer",
reportServerUrl:"https://on-premise-demo.boldreports.com/reporting/api/site/site1",
serviceAuthorizationToken: "bearer <server token>"
}
);
});
</script>
Set the path of report in reportPath
property.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer",
reportServerUrl:"https://on-premise-demo.boldreports.com/reporting/api/site/site1",
serviceAuthorizationToken: "bearer <server token>",
reportPath: '/Sample Reports/Company Sales'
}
);
});
</script>
Report path formed with category and report name as like
/{category name}/{report name}
.
Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer the documentation here, to generate the token by using credentials.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
serviceAuthorizationToken: "bearer <server token>"
);
});
</script>
You can refer to the documentation here on how to generate the token within an application.
Set the Bold Report Server built-in service URL to the reportServiceUrl
property. The reportServiceUrl
property value is a https://service.boldreports.com/api/Viewer
.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://service.boldreports.com/api/Viewer",
serviceAuthorizationToken: "bearer <server token>"
}
);
});
</script>
Set the Bold Report Server built-in server URL to the reportServerUrl
property. The reportServerUrl
property value should be in format of https://<<Report server name>>/reporting/api/
.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://service.boldreports.com/api/Viewer",
reportServerUrl:"https://acmecorp.boldreports.com/reporting/api",
serviceAuthorizationToken: "bearer <server token>"
}
);
});
</script>
Set the path of report in reportPath
property.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://service.boldreports.com/api/Viewer",
reportServerUrl:"https://acmecorp.boldreports.com/reporting/api"
serviceAuthorizationToken: "bearer <server token>",
reportPath: '/Sample Reports/Company Sales'
}
);
});
</script>
Report path formed with category and report name as like
/{category name}/{report name}