ActiveReportsJS Designer application allows you to create pixel-perfect interactive reports. This page offers a quick start guideline.
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:
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:
$.*
in the Json Path
FieldValidate
buttonDatabase Fields
section shows [3 items]
textSave Changes
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.
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.
Submit and view feedback for