# Using predefined data sources with the ActiveReportsJS Report Designer

Learn how to use predefined data sources with ActiveReportsJS Report Designer

## Content

ActiveReportsJS Report Designer allows binding to a variety of data sources and provides a very flexible configuration. Check [Data Binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) 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:

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/developer-guide/designer-component/pre-defined-data-source.png)

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](https://demodata.mescius.io/swagger/index.html?urls.primaryName=Restful%20NorthWind).

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

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/developer-guide/designer-component/export-data-source.png)

1. Set the data source name.
2. Set the end-point.
3. Click the "Export" button.
4. Select the content in the "Export template" dialog and copy it.
5. 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:

```javascript
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

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/developer-guide/designer-component/export-data-set.png)

1. Set the data set name.
2. Set the API path.
3. Set JSON path to `$.[*]`, visit [JSON Path documentation](https://goessner.net/articles/JsonPath/) for more information on this topic.
4. Click the "Validate" button to obtain the fields list.
5. Click the "Export" button.
6. Select the content in the "Export template" dialog and copy it.
7. 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:

```javascript
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:

```javascript
    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](/activereportsjs/demos/features/designer-resources) for the complete samples for Angular, React, Vue, and pure JavaScript applications.

### Related links

* [Live Demo](/activereportsjs/demos/features/designer-resources)
* [Data Binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding)
* [JSON Path documentation](https://goessner.net/articles/JsonPath/)