Migrate Report Viewer application

To migrate a UWP Report Viewer application from a Syncfusion® Essential Studio release to Bold Reports®, update both the client-side references and the Web API service. 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® UWP Report Viewer application:

How do I migrate the Report Viewer client side?

To migrate the client side of the UWP Report Viewer, replace the Syncfusion® assembly reference with the Bold Reports® BoldReports.UWP NuGet package and update the XAML namespace.

  1. In the Solution Explorer, right-click the References and remove the following assembly references:

    • Syncfusion.SfReportViewer.UWP
  2. Add the assembly from the Syncfusion® NuGet package BoldReports.UWP. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for BoldReports.UWP NuGet package, and install in your application.

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

Control initialization

  1. Open the MainWindow.xaml file and remove the following namespace in your XAML page.

    xmlns:syncfusion="using:BoldReports.UI.Xaml"
  2. Add the following namespace in your XAML page.

    xmlns:syncfusion="using:BoldReports.UI.Xaml"

How do I migrate the Report Viewer server side?

To migrate the server side of the UWP Report Viewer, replace the Syncfusion.EJ.ReportViewer assembly reference with the BoldReports.Web NuGet package and update 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 Bold Reporting 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 successfully upgraded to the latest version of Report Viewer, and you can run the application with new assemblies.

How do I configure report export after migration?

To export data visualization components after migration, configure the web scripts in the Report Viewer Web API controller. The BoldReports.Web package can export reports with data visualization components only using web components. Configuring the web scripts is mandatory for exporting data visualization components such as chart, gauge, and map that are used in the report definition. To configure the scripts in Web API, refer to the following steps:

  1. Open the Report Viewer Web API controller.

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

    • jquery-1.10.2.min.js
    • bold.reports.common.min.js
    • bold.reports.widgets.min.js
    • ej.chart.min.js - Exports the chart item. Add this script only if your report contains the chart report item.
    • ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js and ej2-circulargauge.min.js - Exports the gauge item. Add this script only if your report contains the gauge report item.
    • ej.map.min.js - Exports the map item. Add this script only if your report contains the map report item.
    • bold.report-viewer.min.js
  3. Replace the following codes in Report Viewer Web API controller.

    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");
    
        reportOption.ReportModel.ExportResourceOption.Scripts = new List<string>
        {
            "https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js",
            "https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js",
            //Chart component script
            "https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js",
            //Gauge component scripts
            "https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js",
            "https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js",
            "https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js",
            "https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js",
            "https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js",
            "https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js",
            //Map component script
            "https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js",
            //Report Viewer Script
            "https://cdn.boldreports.com/15.1.10/scripts/bold.report-viewer.min.js",
        };
    
        reportOption.ReportModel.ExportResourceOption.DependentScripts = new List<string>
        {
            "https://code.jquery.com/jquery-1.10.2.min.js"
        };
    }

    The data visulization components will not export without the above script configurations.