[{"id":"7e3f7136-1a64-4958-84b8-24a4fbd2ef63","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"ab9ddf70-2472-43cc-94cd-2d03e0184d91","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"5e8a53c6-6b91-48cd-948d-406d4b128766","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"1acc9c3e-8bdd-4252-8798-4c4daf6db52c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"074fc315-ff19-4be5-90ff-4fafbf049047","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"b94af2a4-df24-4732-825c-934150ecfcd3","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"985baaf2-5017-40cd-9cc9-b50fdb4b0b6c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"fb2abd65-126a-4d70-9674-c1c331d2a4ad","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"cda48895-8088-4634-9e44-c92fdfbc024c","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.
Submit and view feedback for