Embedded
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

Embed Bold Reports Report Server Report

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.

HTML file creation

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>

Refer scripts and CSS

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.3.16/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.3.16/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/6.3.16/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.

Adding Report Viewer Widget

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 Server Configuration to render the report

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 and reportServerUrl, 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,

Enterprise Reporting Report Server

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

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

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

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

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

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

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

  4. 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}

  • Build and run the application.