The ActiveReportsJS report designer allows binding to a variety of data sources and provides very flexible configuration. Page for more information on this topic. However, you may need to pre-set the data binding for the newly created report to simplify the report design experience for non-technical users. The ActiveReportsJS designer API allows you to define data sources and datasets that are available by default to end users. The user interface is as follows:

To use this feature, first build and export the required data sources using the stand-alone designer application. This is a quick step to show you how to develop and export the “Northwind” REST API End Point for the data source.

  • Run a stand-alone designer application
  • Add a new data source to the data tag of the properties table

  1. Set the data source name.
  2. Set an end point.
  3. Click the “Export” button.
  4. Select the contents in the Export Template dialog box and copy. In the code of the application, define a variable and set its value to what is copied, for example:

`const dataSource = { Name: “Northwind”, ConnectionProperties: { DataProvider: “JSON”, ConnectString: “endpoint=https://demodata.grapecity.co… 1 “,}}; Then, use the stand-alone designer application to build and export the required data sets. This is a quick guide on how to develop and export data sets from Northwind Data Sources to/categoriesAPI. – Add a dataset for the data source you added in the previous step

  1. Set the dataset name.
  2. Set the API path.
  3. The JSON path is set to[*] $..
  4. Click the “Validate” button to get the list of fields.
  5. Click the “Export” button.
  6. Select the contents of the “Export Template “dialog box and copy it.
  7. Close the “Export Template “dialog and save it.

In the code of the application, define a variable and set its value to what is copied, for example:

`const categoriesDataSet = { Name: “Categories”, Query: { DataSourceName: “Northwind”, CommandText: “uri=/Categories; jpath=$.[*]”, }, Fields: [ { Name: “categoryId”, DataField: “categoryId” }, { Name: “categoryName”, DataField: “categoryName” }, { Name: “description”, DataField: “description” }, ], }; `

Finally, use the setDataSourceTemplates method of the designer instance to set up the available data sources and data sets, for example:

`const designer = new ReportDesigner(“#designer-host”); designer.setDataSourceTemplates([ { id: “Northwind”, title: “Northwind”, template: dataSource, canEdit: true, shouldEdit: true, datasets: [ { id: “Categories”, title: “Categories”, template: categoriesDataSet, canEdit: false } ], }, ]); The ‘canEdit data source and data set template attributes indicate whether the end user is allowed to modify them, and the shouldEdit attribute indicates whether the data source/data set dialog box should be opened immediately after the user has added the corresponding entity to the report.