[{"id":"26713f3d-fbf1-4c9c-bdbe-31fb188e7096","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"d9f783e1-612a-4fa7-9408-7f1c821a45fc","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"af5bd81a-b6cd-410b-84b4-9de9c51c3a7d","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"60de5e12-02d9-4fd1-8db5-cb82a6bca160","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"6af12f79-8609-4b30-8be3-d617d0cd7a16","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"86b2a642-0ee8-4605-b04d-e7e0ec019e01","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"aa9c6845-a521-49a8-ba61-f85856865f32","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]}]
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 the /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
}
],
},
]);
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.