Embed Bold Reports^® Report Server Report

To embed Bold Reports^® Report Server reports in the JavaScript Report Viewer, set the service URL, server URL, report path, and authorization token of your Report Server, without creating a Web API service. The Bold Reports^® Report Server provides a built-in Web API service that displays the server reports.

HTML file creation

Create a basic HTML file 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>

Refer scripts and CSS

Refer all the scripts and style sheets that the JavaScript Report Viewer requires directly from CDN links, 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.

To use local scripts and style sheets, install the BoldReports.Javascript NuGet package in your application.

<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/15.1.10/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/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/15.1.10/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 the boldReportViewer widget, and then initialize the boldReportViewer widget within the script section.

<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>

How do I configure the Report Server to render a report?

To render a Bold Reports^® Report Server report, the JavaScript Report Viewer requires the serviceAuthorizationToken, reportPath and reportServiceUrl to embed the reports. Provide the following information from your Report Server:

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 and reportServerUrl, refer to the Difference between Report Service URL and Report Server URL.

Follow one of these procedures based on your Report Server type:

Enterprise Reporting Report Server

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see Generate an access token for Enterprise Reporting.
```
<script type="text/javascript">
   $(function () {
        $("#viewer").boldReportViewer(
            {
                serviceAuthorizationToken: "bearer <server token>",
            }
        );
    });
</script>
```
To generate the token within an application, see Generate an access token for an Enterprise Reporting user.

Set the Bold Reports^® 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 Reports^® 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}.

Build and run the application.

Cloud Reporting server

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see Generate an access token for Cloud Reporting.
```
<script type="text/javascript">
   $(function () {
        $("#viewer").boldReportViewer(
            {
                serviceAuthorizationToken: "bearer <server token>"
        );
    });
</script>
```
To generate the token within an application, see Generate an access token for a Cloud Reporting user.

Set the Bold Reports^® 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>

<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>