Search results

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.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/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/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/5.4.20/scripts/data-visualization/ej2-maps.min.js"></script>

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

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

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

Build and run the application.

Cloud Reporting server

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}

Build and run the application.

Contents

HTML file creation
Refer scripts and CSS
Adding Report Viewer Widget
Report Server Configuration to render the report
Enterprise Reporting Report Server
Cloud Reporting server

Having trouble getting help?Contact Support