How to Use a JavaScript Report Designer in Your Web Application

July 05 2023

The ActiveReportsJS Standalone Designer is an Electron desktop application used for creating and modifying reports. It serves as the perfect tool for quickly creating custom reports. The standalone designer installer is available for Windows, MacOS, and Linux.

Ready to Try it Out? Download ActiveReportsJS Today!

Key Features of the Designer

The Report Designer has several key features used for building reports:

The Design Surface
Data Panel
Properties Panel
Control Toolbox

The Design Surface

The design surface serves as the template area for the report. You can drag and drop controls from the control toolbox onto the design surface to include them in the report, use the properties panel to customize the selected control in the design surface, and tie controls in the design surface to your data sets via the data panel.

Data Panel

To the right of the design surface is the data panel. It can be viewed by clicking the “Data” button in the top-right of the designer. The data panel is used to create data sources that link your report to a REST API and data sets that pull data from your data sources into your report for use.

The data panel also includes the ability for report authors to create parameters. Parameters allow your users to select what portions of the data they want to view in the report. This could be something such as selected sales that occurred between two dates.

Properties Panel

The properties panel also lives to the right of the design surface; it can be viewed by clicking the “Properties” button in the top-right of the designer. Here you’ll find the properties of the currently selected control or element.

By default, the properties panel displays the most common properties in “Basic Mode”. You can switch to “Advanced Mode” to display all available properties for the selected control or element.

The properties panel also has a search panel that can be used to search for a property.

Control Toolbox

To the left of the design surface is the control toolbox. The toolbox can be expanded by clicking the hamburger menu in the top-left of the designer. The control toolbox allows authors to drag-and-drop controls from the toolbox onto the design surface. If the control that was dropped onto the design surface has a creation wizard, it will display and allow the user to customize the control.