Migrate Report Designer application

In our Bold Reports^® new assemblies are introduced for both client and server-side to resolve the compatibility problem between Essential Studio Report Designer versions. It has changes in both Web API service and client-side scripts.

This section provides step-by-step instructions for migrating Report Designer from Syncfusion^® Essential Studio release version to Bold Reports^® version higher than v5.2.xx of Angular Report Designer application.

NPM packages

Platform	Old Package	New Package
`Javascript`	`syncfusion-javascript`	@boldreports/javascript-reporting-controls
`Angular`	`ej-angular2`	@boldreports/angular-reporting-components
`Globalize`	`syncfusion-ej-global`	@boldreports/global

The above Javascript NPM packages contain the following scripts and styles required for Reporting components.

Reporting Component	Styles	Scripts	Usage
Report Viewer	`bold.report-viewer.min.css`	`bold.reports.common.min.js` `bold.reports.widgets.min.js` `bold.report-viewer.min.js`	`bold.report-viewer.min.css` - It contains the styles and css references of reporting dependent components. `bold.reports.common.min.js` - Common script for reporting widgets. `bold.reports.widgets.min.js` - It contains the scripts of dependent Syncfusion^® controls that are common for both Report Designer and Report Viewer. `bold.report-viewer.min.js` - Renders the Syncfusion^® Report Viewer widget.
Report Designer	`bold.report-designer.min.css`	`bold.reports.common.min.js` `bold.reports.widgets.min.js` `bold.report-viewer.min.js` `bold.report-designer.min.js`	`bold.report-designer.min.css` - It contains the styles and css references of Report Designer Component. `bold.reports.common.min.js` - Common script for reporting widgets. `bold.reports.widgets.min.js` - It contains the scripts of dependent controls that are common for both Report Designer and Report Viewer. `bold.report-viewer.min.js` - Previews the reports designed with Report Designer. `bold.report-designer.min.js` - Renders the Syncfusion^® Report Designer widget.

Server-side migration

Assemblies

Old Assemblies	New Assemblies	Description
`Syncfusion.EJ.ReportViewer.dll` `Syncfusion.EJ.ReportDesigner.dll`	`BoldReports.Web.dll`	The Syncfusion.EJ.ReportViewer.dll and Syncfusion.EJ.ReportDesigner.dll assemblies have been combined as BoldReports.Web.dll.

Packages

Old Packages	New Packages
`Syncfusion.Web.ReportDesigner` `Syncfusion.Web.ReportViewer`	`BoldReports.Web`

Namespace changes

Assembly Name	Old Namespace	New Namespace
`BoldReports.Web.dll`	`Syncfusion.Reports.EJ`	`BoldReports.Web`
	`Syncfusion.EJ.ReportWriter`	`BoldReports.Writer`
	`Syncfusion.EJ.ReportViewer`	`BoldReports.Web.ReportViewer`
	`Syncfusion.EJ.ReportDesigner`	`BoldReports.Web.ReportDesigner`
	`Syncfusion.Reports.EJ.Data`	`BoldReports.Data`
	`Syncfusion.Reporting`	`BoldReports.Configuration`
	`Syncfusion.EJ.RDL.ServerProcessor`	`BoldReports.ServerProcessor`

Based on above assembly and namespace changes, modify the Report Designer Web API Controller in your application.

Control initialization

Old code snippet	New code snippet
`<ej-reportdesigner id="designer">` `</ej-reportdesigner>`	`<bold-reportdesigner id="designer">` `</bold-reportdesigner>`

Report export configuration

The BoldReports.Web assembly can export the reports with data visualization components such as chart, gauge, and map, only if we configure the web scripts in Report Designer Web API controller. To configure the scripts in Web API controller, refer to the following steps:

Open the Report Designer Web API controller.
Configure the following scripts and styles in OnInitReportOptions on Web API controller:
- jquery-3.6.0.min.js
- bold.reports.common.min.js
- bold.reports.widgets.min.js
- bold.report-viewer.min.js

You can replace the OnInitReportOptions action in Report Designer Web API controller using below code snippet.

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

    reportOption.ReportModel.ExportResources.Scripts = new List<string>
    {
        resourcesPath + @"\bold-reports\common\bold.reports.common.min.js",
        resourcesPath + @"\bold-reports\common\bold.reports.widgets.min.js",
        resourcesPath + @"\bold-reports\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 will not export without the above script configurations.