[]
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.
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.grapecity.com/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 /Categories
API of the Northwind data source.
$.[*]
, visit JSON Path documentation for more information on this topic.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
}
],
},
]);
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.