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

Embed Bold Reports Report Server Designer

You can embed Report Designer with Report Server to create, edit, browse and publish reports using the Report Server built-in API service.

Follow this 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/6.3.16/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/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 and Designer component scripts -->
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/bold.report-viewer.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/bold.report-designer.min.js"></script>

Whether you want to get the scripts and style sheets as local, then 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 as shown below,

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

Report Server Configuration to design the report

  • The Report Designer requires the serviceAuthorizationToken, serviceUrl and reportServerUrl to perform the API actions with Bold Report Server. You can provide the information from report server as like explained below,

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

You can follow one of the procedure from below based on your Report Server type,

Enterprise Reporting 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 () {
        $("#designer").boldReportDesigner(
            {
                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 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://on-premise-demo.boldreports.com/reporting/reportservice/api/Designer",
                                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 () {
                $("#designer").boldReportDesigner(
                            {
                                serviceUrl: "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Designer",
                                reportServerUrl:"https://on-premise-demo.boldreports.com/reporting/api/site/site1",
                                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. You can refer the documentation here, to generate the token by using credentials.

        <script type="text/javascript">
        $(function () {
            $("#designer").boldReportDesigner(
                {
                    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 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 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://acmecorp.boldreports.com/reporting/api/"
                                serviceAuthorizationToken: "bearer <server token>"
                            });
            });
    </script>

  4. Build and run the application.