Migrate to Classic Report Designer application

To migrate an Angular Report Designer application from Syncfusion^® Essential Studio to the classic Bold Reports^® Report Designer, replace the old npm packages, scripts, assemblies, NuGet packages, namespaces and control tags with the Bold Reports^® ones. Bold Reports^® introduces new client-side and server-side assemblies to resolve the compatibility problem between Essential Studio Report Designer versions, with changes in both the Web API service and the client-side scripts.

Use these steps to migrate from Syncfusion^® Essential Studio release to Bold Reports^® version lesser than v5.2.xx

The following sections provide step-by-step instructions for migrating the Report Designer from Syncfusion^® Essential Studio release version to Bold Reports^® version 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 preceding JavaScript npm packages contain the following scripts and styles required for Reporting components.

Reporting Component	Styles	Scripts	Usage
Report Viewer	`bold.reports.all.min.css`	`bold.reports.common.min.js` `bold.reports.widgets.min.js` `ej.chart.min.js` `ej2-base.min.js` `ej2-data.min.js` `ej2-pdf-export.min.js` `ej2-svg-base.min.js` `ej2-lineargauge.min.js` `ej2-circulargauge.min.js` `ej2-maps.min.js` `bold.report-viewer.min.js`	`bold.reports.all.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. `ej.chart.min.js` - Renders the chart item. Add this script only if your report contains the chart report item. `ej2-base.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-data.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-pdf-export.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-svg-base.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-lineargauge.min.js` - Renders the linear gauge item. Add this script only if your report contains the linear gauge report item. `ej2-circulargauge.min.js` - Renders the circular gauge item. Add this script only if your report contains the circular gauge report item. `ej2-maps.min.js` - Renders the map item. Add this script only if your report contains the map report item. `bold.report-viewer.min.js` - Renders the Syncfusion^® Report Viewer widget.
Report Designer	`bold.reports.all.min.css` `bold.reportdesigner.min.css`	`bold.reports.common.min.js` `bold.reports.widgets.min.js` `bold.report-designer-widgets.min.js` `ej.chart.min.js` `ej2-base.min.js` `ej2-data.min.js` `ej2-pdf-export.min.js` `ej2-svg-base.min.js` `ej2-lineargauge.min.js` `ej2-circulargauge.min.js` `ej2-maps.min.js` `bold.report-viewer.min.js` `bold.report-designer.min.js`	`bold.reports.all.min.css` - It contains the styles and css references of reporting dependent components. `bold.reportdesigner.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-designer-widgets.min.js` - It contains the scripts of Report Designer dependent controls. `ej.chart.min.js` - Renders the chart item. Add this script only if your report contains the chart report item. `ej2-base.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-data.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-pdf-export.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-svg-base.min.js` - Renders the gauge item. Add this script only if your report contains the gauge report item. `ej2-lineargauge.min.js` - Renders the linear gauge item. Add this script only if your report contains the linear gauge report item. `ej2-circulargauge.min.js` - Renders the circular gauge item. Add this script only if your report contains the circular gauge report item. `ej2-maps.min.js` - Renders the map item. Add this script only if your report contains the map report item. `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 the preceding 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 you configure the web scripts in the Report Designer Web API controller. To configure the scripts in the Web API controller, use the following steps:

Open the Report Designer Web API controller.
Configure the following scripts and styles in OnInitReportOptions on Web API controller:
- jquery-1.7.1.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.
- ej2-maps.min.js - Exports the map item. Add this script only if your report contains the map report item.
- bold.report-viewer.min.js

You can replace the OnInitReportOptions action in the Report Designer Web API controller using the following 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",
        //Chart component script
        resourcesPath + @"\bold-reports\data-visualization\ej.chart.min.js",
        //Gauge component scripts
        resourcesPath + @"\bold-reports\common\ej2-base.min.js",
        resourcesPath + @"\bold-reports\common\ej2-data.min.js",
        resourcesPath + @"\bold-reports\common\ej2-pdf-export.min.js",
        resourcesPath + @"\bold-reports\common\ej2-svg-base.min.js",
        resourcesPath + @"\bold-reports\data-visualization\ej2-lineargauge.min.js",
        resourcesPath + @"\bold-reports\data-visualization\ej2-circulargauge.min.js",
        //Map component script
        resourcesPath + @"\bold-reports\data-visualization\ej2-maps.min.js",
        //Report viewer Script
        resourcesPath + @"\bold-reports\data-visualization\ej.chart.min.js",
        resourcesPath + @"\bold-reports\bold.report-viewer.min.js"
    };

    reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
    {
        resourcesPath + @"\jquery-1.7.1.min.js"
    };
}

The data visualization components will not export without the preceding script configurations.