Migrate Report Viewer application

To migrate an Angular Report Viewer application from a Syncfusion® Essential Studio release to Bold Reports®, update both the Web API service and the client-side scripts. Bold Reports® introduces new assemblies for both the client and server side to resolve the compatibility problem between Essential Studio Report Viewer versions.

Follow these step-by-step instructions to migrate the Bold Reports® Angular Report Viewer application:

How do I migrate the Report Viewer server side?

To migrate the server side of the Angular Report Viewer, replace the Syncfusion.EJ.ReportViewer assembly reference with the BoldReports.Web NuGet package and update the using statements in the Web API controller.

  1. In the Solution Explorer, right-click the References and remove the Syncfusion.EJ.ReportViewer assembly reference.
  2. Add the assembly from the Syncfusion® NuGet package BoldReports.Web. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for BoldReports.Web NuGet package, and then install in your application.

Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.

Web API Controller

  1. The IReportController interface is moved to BoldReports.Web.ReportViewer. Open the Report Viewer Web API Controller file and remove the following using statement.

    using Syncfusion.EJ.ReportViewer;

  2. Add the following using statement.

    using BoldReports.Web.ReportViewer;

Your application is now upgraded to the Bold Reports® Report Viewer, and you can run the application with the new assemblies.

How do I configure report export after migration?

To export data visualization components such as chart, gauge, and map from the migrated Angular Report Viewer, configure the web scripts in the Report Viewer Web API controller. BoldReports.Web exports reports with data visualization components only by using web components. To configure the scripts in Web API, follow these steps:

  1. Open the Report Viewer Web API controller.

  2. Configure the following scripts and styles in OnInitReportOptions on Web API controller:

    • jquery.min.js
    • bold.reports.common.min.js
    • bold.reports.widgets.min.js
    • bold.report-viewer.min.js

  3. Replace the following code in the Report Viewer Web API controller.

    [NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");

    reportOption.ReportModel.ExportResources.Scripts = new List<string>
    {
        resourcesPath + @"\bold-reports\v2.0\common\bold.reports.common.min.js",
        resourcesPath + @"\bold-reports\v2.0\common\bold.reports.widgets.min.js",
        //Report Viewer Component Script
        resourcesPath + @"\bold-reports\v2.0\bold.report-viewer.min.js"
    };

    reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
    {
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    };
}

    The data visualization components do not export without these script configurations.