Embed Bold Reports^® Report Server Designer

To embed the 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 higher 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 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.

<!-- Report Designer component styles -->
<link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-designer.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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>
<!-- Report Designer component dependent scripts -->
<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 and Designer component scripts -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-designer.min.js"></script>

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

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 Report Designer?

To configure Bold Reports^® Report Server for the 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

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see how to generate an authentication token for Bold Reports^® Report Server with credentials.
```
    <script type="text/javascript">
        $(function () {
        $("#designer").boldReportDesigner(
            {
                serviceAuthorizationToken: "bearer <server-token>"
            });
        });
    </script>
```
To generate the token within an application, see how to generate a user authentication token with the embed secret key API.

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>

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>

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 how to generate an authentication token in Bold Reports^® Cloud with credentials.
```
    <script type="text/javascript">
        $(function () {
            $("#designer").boldReportDesigner(
                {
                    serviceAuthorizationToken: "bearer <server-token>",
                });
        });
    </script>
```
To generate the token within an application, see how to generate a Bold Reports^® Cloud user authentication token with the embed secret key API.

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>

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

Build and run the application.

Embed Bold Reports® Report Server Designer