Embed Bold Reports^® Report Server

To embed the Bold Reports^® ASP.NET Core Report Designer with Report Server, set the service-url, service-authorization-token and report-server-url properties. 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 v8.1.xx

Create ASP.NET Core application

Start Visual Studio 2022 and click Create new project.
Choose ASP.NET Core Web App, and then click Next.
Change the project name, and then click Create.
In the dropdown for the Framework, choose .NET 8.0, then click Create.

Which NuGet packages does the Report Designer need for Report Server?

The Bold Reports^® ASP.NET Core Report Designer needs the BoldReports.AspNet.Core and BoldReports.Net.Core NuGet packages for the Web API service configuration. The Web API service configuration requires the following report server-side packages.

Right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Alternatively, select the Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command and then search the following BoldReports.AspNet.Core and BoldReports.Net.Core packages to install them in the application. The following table provides details about the packages and their usage.

Package	Purpose
`BoldReports.AspNet.Core`	Contains tag helpers to create client-side web Report Designer control.

Refer to the NuGet Packages, to learn more details about installing and configuring Report Designer NuGet packages.

Refer Scripts and CSS

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

Open the \Pages\Shared\_Layout.cshtml page and refer the scripts and styles as shown in the following example code.

Replace the following code in your \Pages\Shared\_Layout.cshtml page <head> tag.

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

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

Tag helper

Define the following tag helper within the _ViewImports.cshtml page to initialize the Report Designer component with tag helper support.

    @using BoldReports.TagHelpers
    @addTagHelper *, BoldReports.AspNet.Core

Configure script manager

Open the ~/Pages/Shared/_Layout.cshtml page and add the reporting Script Manager at the end of <body> element as shown in the following code sample.

<body>
    <div>
        @RenderBody()
    </div>

    @RenderSection("Scripts", required: false)
    <!-- Bold Reports<sup>®</sup> script manager -->
   <bold-script-manager></bold-script-manager>
</body>

Initialize Report Designer

Open the Index.cshtml page.

Remove the existing codes and add the following code:

<div style="height: 500px;width: 100%;">
    <bold-report-designer id="designer"></bold-report-designer>
</div>

How do I configure Report Server for the Report Designer?

To configure Bold Reports^® Report Server for the ASP.NET Core 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 Generate an authentication token using credentials.
```
    <bold-report-designer
     id="designer"
     service-authorization-token="bearer <server-token>" >
     </bold-report-designer>
```
To generate the token within an application, see Generate an authentication token by using the embed secret key API.

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

    <bold-report-designer
     id="designer"
     service-url="https://<your-report-server-domain>/reporting/reportservice/api/Designer"
     service-authorization-token="bearer <server-token>">
     </bold-report-designer>

Set the Bold Reports^® Report Server built-in server URL to the report-server-url property. The report-server-url property value should be in format of https://<<Report server name>>/reporting/api/site/<<site name>>.

    <bold-report-designer
     id="designer"
     report-server-url= "https://<your-report-server-domain>/reporting/api/site/<site-name>"
     service-url="https://<your-report-server-domain>/reporting/reportservice/api/Designer"
     service-authorization-token="bearer <server-token>">
    </bold-report-designer>

Cloud Reporting server

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.
```
    <bold-report-designer
    id="designer"
    service-authorization-token="bearer <server-token>" >
    </bold-report-designer>
```
To generate the token within an application, see Generate an authentication token by using the embed secret key API.

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

    <bold-report-designer
    id="designer"
    service-url="https://service.boldreports.com/api/Designer"
    service-authorization-token="bearer <server-token>" >
    </bold-report-designer>

    <bold-report-designer
    id="designer"
    report-server-url= "https://<your-report-server-domain>/reporting/api/"
    service-url="https://service.boldreports.com/api/Designer"
    service-authorization-token="bearer <server-token>" >
    </bold-report-designer>

Embed Bold Reports® Report Server