Embed Bold Reports® Report Server Designer

To embed the classic Bold Reports® JavaScript Report Designer with Report Server, set the serviceUrl, serviceAuthorizationToken and reportServerUrl properties of the boldReportDesigner widget. You can then create, edit, browse and publish reports using the Report Server built-in API service.

Follow these steps to integrate Report Server with Bold Reports® Designer version less than v5.2.xx

HTML file creation

Create a basic HTML file and place it in a separate folder. Add the following code example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Report Designer first HTML page</title>
    </head>
    <body>
    </body>
</html>

Refer Scripts and CSS

Directly refer the required scripts and style sheets that are mandatorily required to render the web Report Designer, from CDN links.

Refer to the Dependencies to learn more details about classic web Report Designer dependent scripts and style sheets links.

You can use the following code in the <head> tag of the HTML page as in the following order.

<link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script>

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

<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.report-designer-widgets.min.js"></script>

<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-viewer.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-designer.min.js" type="text/javascript"></script>

To get the scripts and style sheets locally, install the BoldReports.Javascript NuGet package in your application. To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section.

Initialize Report Designer

Add the <div> element within the <body> section, which acts as a container for boldReportDesigner widget to render and then initialize the boldReportDesigner widget within the script section.

        <!-- Creating a div tag which will act as a container for boldReportDesigner widget.-->
        <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
        <script type="text/javascript">
            $(function () {
                $("#designer").boldReportDesigner();
            });
        </script>

How do I configure Report Server for the classic Report Designer?

To configure Bold Reports® Report Server for the classic JavaScript Report Designer, set the serviceUrl, serviceAuthorizationToken and reportServerUrl values from your Report Server.

  • The Report Designer requires the serviceAuthorizationToken, serviceUrl and reportServerUrl to perform the API actions with Bold Reports® Report Server. You can provide the information from Report Server as follows:

  • serviceUrl – Report Server Reporting Service information should be provided for this API.

  • serviceAuthorizationToken – Authorization token to communicate with reportServiceUrl.

  • reportServerUrl- Report Server Reporting Server information should be provided for this API.

Based on your Report Server type, you can follow one of the procedures listed as follows:

Enterprise Reporting Server

  1. Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see Generate an authentication token using credentials.

        <script type="text/javascript">
        $(function () {
        $("#designer").boldReportDesigner(
            {
                serviceAuthorizationToken: "bearer <server-token>"
            });
        });
    </script>

    To generate the token within an application, see Generate an authentication token by using the embed secret key API.

  2. Set the Bold Reports® Report Server built-in service URL to the serviceUrl property. The serviceUrl property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Designer.

        <script type="text/javascript">
            $(function () {
                $("#designer").boldReportDesigner(
                            {
                                serviceUrl: "https://<your-report-server-domain>/reporting/reportservice/api/Designer",
                                serviceAuthorizationToken: "bearer <server-token>"
                            });
            });
    </script>

  3. 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 () {
                $("#designer").boldReportDesigner(
                            {
                                serviceUrl: "https://<your-report-server-domain>/reporting/reportservice/api/Designer",
                                reportServerUrl:"https://<your-report-server-domain>/reporting/api/site/<site-name>",
                                serviceAuthorizationToken: "bearer <server-token>"
                            });
            });
    </script>

  4. Build and run the application.

Cloud Reporting server

  1. Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see Generate an authentication token using credentials.

        <script type="text/javascript">
        $(function () {
            $("#designer").boldReportDesigner(
                {
                    serviceAuthorizationToken: "bearer <server-token>",
                });
        });
    </script>

    To generate the token within an application, see Generate an authentication token by using the embed secret key API.

  2. Set the Bold Reports® Report Server built-in service URL to the serviceUrl property. The serviceUrl property value is a https://service.boldreports.com/api/Designer.

        <script type="text/javascript">
            $(function () {
                $("#designer").boldReportDesigner(
                            {
                                serviceUrl: "https://service.boldreports.com/api/Designer",
                                serviceAuthorizationToken: "bearer <server-token>"
                            });
            });
    </script>

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

        <script type="text/javascript">
            $(function () {
                $("#designer").boldReportDesigner(
                            {
                                serviceUrl: "https://service.boldreports.com/api/Designer",
                                reportServerUrl:"https://<your-report-server-domain>/reporting/api/"
                                serviceAuthorizationToken: "bearer <server-token>"
                            });
            });
    </script>

  4. Build and run the application.