Getting Started with the ActiveReportsJS Designer (Video)

The ActiveReportsJS Designer is a desktop app for creating and modifying reports. It is the perfect tool for quickly creating WYSIWYG reports. You can install the app on Windows, Mac, and Linux devices.

Watch the ActiveReportsJS Designer Getting Started Video

Key Features of the Designer

The Design Surface

This is where you can create a report by placing controls from the toolbox.

To the left of the design surface we have the toolbox listing the available controls. Double-click or drag and drop controls to the design surface.

The left panel also houses the Report Explorer which displays all the elements and controls of your report.

Data Panel

On the right side of the design surface, we have the Data Panel which is used to configure data sources and data sets.

Properties Panel

On the right, we also have the Properties Panel. Here you will find the properties of a 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 you can use to search for a property.

How to Create a Report with the ActiveReportsJS Designer

Let’s create a simple report that loads some data and displays it in a table. From the File menu we’ll create a new report.

First, go to the data panel and add a data source. I am going to load a JSON file with some data entries, using the embedded file option.

The content of the JSON file is displayed in the Embedded Contents box.

Let’s change the default name the data source to something more representative. Then click “Add Data Source.”

Next, create a dataset to query and select the data fields you’re interested in.

First, we’ll change the name of the data set.

In the query field, I’m going to select everything in my JSON file.
On the left panel, open the toolbox and find the Table control.

Double-click to place the Table on the Design Surface. I’m going to reposition this table.

Now, extend the width of the table and add a few columns. To add columns, select any of the column headers, right-click and choose COLUMNS- RIGHT or LEFT -- to insert a column to right or left of the one you have selected.

By default, the table shows three rows. The top row is the Table Header. Once selected, you can set the properties for the entire row.

The middle row is the details row. This is where your actual data will show. The row will iterate to fit all your data.

The bottom row is the table footer. This can be used for aggregation.

To bind the Table to your data, simply click on the ADORNERS in the details row to select the available fields from your dataset.

Here, we have a simple tabular report. You can apply some formatting, styling, and logos to make this report look better. For more information, visit our documentation and demos for report examples.

I’ve reformatted the report with a report title, a logo, and styling.

Now, let’s preview this report. Click the play button on the toolbar. The report will render, and you can see the results.

To go back to the designer, click the Back arrow at the top left.

Once you have a report designed to your liking, you can save the report file.

To do this, go to the File menu and click Save or Save As. Report files for ActiveReportsJS are saved as “.rdlx-json.”

Now that you have created your report files, you can add them to your applications and view them using the report viewer.

Refer to ActiveReportsJS Demos for sample reports and features.