Using predefined data sources with the ActiveReportsJS Report Designer

ActiveReportsJS Report Designer allows binding to a variety of data sources and provides a very flexible configuration. Check Data Binding page for more information on this topic. However, it might be required to pre-set data binding for newly created reports to simplify the report designing experience for non-technical users. The ActiveReportsJS designer API allows defining the data sources and data sets available by default for an end-user. The UI looks like this:

To use this feature, first build and export required data sources by using the standalone designer application. Here is a quick walkthrough that shows how to develop and export the data source for the Northwind REST API end point.

Run the standalone designer application
In the data tab of the property grid add a new data source

Set the data source name.
Set the end-point.
Click the "Export" button.
Select the content in the "Export template" dialog and copy it.
Close the "Export template" dialog and save changes.

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

const dataSource = {
  Name: "Northwind",
  ConnectionProperties: {
    DataProvider: "JSON",
    ConnectString: "endpoint=https://demodata.mescius.io/northwind/api/v1",
  },
};

Then build and export required data sets by using the standalone designer application. Here is a quick guide that shows how to develop and export the data set for the /Categories API of the Northwind data source.

Add the data set for the data source that was created in the previous step

Set the data set name.
Set the API path.
Set JSON path to $.[*], visit JSON Path documentation for more information on this topic.
Click the "Validate" button to obtain the fields list.
Click the "Export" button.
Select the content in the "Export template" dialog and copy it.
Close the "Export template" dialog and save changes.

In the code of your application define a variable and set its value to the copied content, 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 setDataSourceTemplates method of the designer instance to set up available data source 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 Angular, React, and Vue Report Designer components have the dataSources property that accepts the array of data source templates.

canEdit property of a data source and data set template indicates whether the end-user is allowed to modify them, shouldEdit property indicates whether the data source/data set dialog should open immediately after a user adds the corresponding entity to a report.

Visit the Live Demo page for the complete samples for Angular, React, Vue, and pure JavaScript applications.

Using predefined data sources with the ActiveReportsJS Report Designer

Related links