Search results

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.

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.

<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/5.4.20/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/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>

<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>
<script src="https://cdn.boldreports.com/5.4.20/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/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" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-designer.min.js" type="text/javascript"></script>

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

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.

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>

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>

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 () {
            $("#designer").boldReportDesigner(
                {
                    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 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>

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>

Build and run the application.

Contents

HTML file creation
Refer Scripts and CSS
Initialize Report Designer
Report Server Configuration to design the report
Enterprise Reporting Server
Cloud Reporting server

Having trouble getting help?Contact Support

Contents

HTML file creation
Refer Scripts and CSS
Initialize Report Designer
Report Server Configuration to design the report
Enterprise Reporting Server
Cloud Reporting server

Having trouble getting help?Contact Support

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!