Search results
PDF

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.reports.all.min.css
  • jquery-1.10.2.min.js
  • ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js and ej2-circulargauge.min.js - Render the gauge item. Add these scripts only if your report contains the gauge report item.
  • ej2-maps.min.js - Renders the map item. Add this script only if your report contains the map report item.
  • bold.reports.common.min.js
  • bold.reports.widgets.min.js
  • ej.chart.min.js - Renders the chart item. Add this script, only if your report contains the chart report item.
  • 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.

<link href="https://cdn.boldreports.com/4.2.52/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/4.2.52/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/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/4.2.52/scripts/data-visualization/ej2-maps.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/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/4.2.52/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/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}

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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw",
                }
            );
        });
    </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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw"
                }
            );
        });
    </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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw"
                }
            );
        });
    </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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw",
                    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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw"
            );
        });
    </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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw"
                }
            );
        });
    </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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw"
                }
            );
        });
    </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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw",
                    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.