Get started with ActiveReportsJS Report Designer Application

ActiveReportsJS Designer application allows you to create pixel-perfect interactive reports. This page offers a quick start guideline.

Launch the application

The location of the ActiveReportsJS Designer application depends on the operating system that you chose during the installation. You can find the "ActiveReportsJS Designer" shortcut under the "GrapeCity" folder of the Windows start menu. In macOS, the designer is available in the Applications folder. After the designer application starts, it displays the default blank report:

Connect to the data source

ActiveReportsJS offers powerful Data Binding capabilities. Let's connect the report to the demo REST API.

Open the "Data" tab of the property inspector on the designer's right side and click the + Add icon in the Data Sources section. In the Edit Data Source dialog, enter the https://demodata.grapecity.com/northwind/api/v1/Categories URL in the ENDPOINT textbox and then click Save Changes.

Click the + icon near the DataSource node and go through the following steps in the "New Data Set" dialog:

• Type $.* in the Json Path Field
• Click the Validate button
• Make sure that the Database Fields section shows [3 items] text
• Click Save Changes

Adding table data region to a report

You can use Table data region to visualize Categories' list from the data source. To add a table, just drag and drop the DataSet node from the property inspector to the report body.

Preview report

Click the Preview button on the designer toolbar, and the report output displaying the list of product categories will appear in the Viewer tab. You can export the report to one of the supported formats or print it. You can save the report from the File menu available on the toolbar.

Visit the Report Author Guide for more information on how to use the standalone designer application and other tutorials.