How to Add JavaScript Subreports to Your Web Apps

The ability to implement subreports allows report authors to create independent, self-contained report components that represent specific data sets or analytical insights. These modular subreports can be easily integrated into various master reports, avoiding redundancy and ensuring consistency across all of your operation’s reporting. This approach, modeled after reusable components, streamlines the development process, allowing for efficient updates, modifications, and expansions, contributing to a more scalable reporting infrastructure.

Thankfully, the ActiveReportsJS JavaScript Report Designer makes it easy for your report authors to build subreports and bind them to master reports. Along with subreports, ActiveReportsJS supports the use of nested subreports, increasing your ability to create a more modular report structure.

This article will show how you can use ActiveReportsJS to create nested subreports to display a list of cars for sale. We’ll be covering the following topics:

• Creating a Subreport
• Implementing a Subreport in Another Report
• Loading Nested Subreports into a Master Report
• Viewing the Master Report in a JavaScript Application

This article assumes that you know the basics of adding data sources and controls to a report. For more information on getting started with ActiveReportsJS, check out our Getting Started page.

If you’d like to follow along, you can get the completed reports and project here.

Ready to Start Adding JS Subreports to Your Applications? Download ActiveReportsJS Today!

Creating a Subreport

The first thing to do is create the first subreport. Subreports are simply ActiveReportsJS reports that are loaded into other reports, so the process for creating them is the same as a standard report: load some data, add controls to the report, and bind the data to the controls.

For this report, we will use some basic data about car manufacturers. Here’s a snippet of what the data looks like:

{
  "manufacturerId": 962,
  "manufacturerName": "Toyota Motor North America",
  "address": "6565 Headquarters Drive",
  "city": "Washington",
  "state": "Texas",
  "postalCode": "75024",
  "country": "United States",
  "email": "contact@toyota.com",
  "phone": "757-254-2810",
  "fax": "1-408-999 7777"
},

The entirety of the data is available in the Manufacturers.json file, which we’ll be embedding in the report as our data source:

Then, we’re going to use the data source we just created to add our data set:

Now that we’ve got some data to work with, it’s time to add a control to the report that we can use to display the data.

Drag a Table control onto the report area; we will make some modifications so that the table layout fits our needs. First, delete the header and footer rows and add three more detail rows and one more column. Then, merge all of the cells of the first row. When complete, your table should look something like this:

Now, we’re going to populate our table with a combination of references to our data, as well as a few icons:

To load the icons, you simply drag and drop an Image control into the desired cell and select an image from your machine to embed into the report.

Now, if we preview the report, we should see our data being displayed:

Now, one more thing we need to do before our report can be properly utilized as a subreport: add parameters.

Parameters are a way for report authors to allow users to make modifications at runtime; in this case, we’re modifying what data this subreport will display based on the value of the parameter passed to it.

For this report, we’re going to be adding a single parameter, which we will call ManufacturerId:

As you can see, we’re setting the Hidden parameter to True and providing a default value to the parameter. By hiding the parameter, we can pass this value between master reports and subreports in the background. Setting a default value of 1002 will allow us to test to ensure that the parameter is working because when we preview the report, the only data that should display is the data relating to the manufacturer with that ID.

The final step in implementing the parameter in this report is to add a filter to the table. This filter will make sure that we’re only displaying the data with matching manufacturer IDs:

Now, when we preview the report, we’ll only see the manufacturer with the ID that matches the default value that we set in the parameter:

And with that, we’ve created our first subreport! Suppose another report we create has access to manufacturer IDs. In that case, we can load this subreport into that report instead of recreating this report again, increasing the modularity of our reporting infrastructure.

In the next section, we will show how you can load this subreport into another report.

Implementing a Subreport in Another Report

Now that we’ve created a subreport, it’s time to create another report that can be loaded into. For this report, we will display some basic information relating to a vehicle from each of the manufacturers. Here is a snippet of what the data looks like:

{
  "bodyClass": "Wagon",
  "make": "TOYOTA",
  "model": "FJ Cruiser",
  "modelYear": "2008",
  "engineModel": "1GR-FE",
  "vin": "jtezu11f88k007763",
  "manufacturerId": "962"
},

As you can see, this data also has a manufacturerId property, which will be used to determine which data to display in the subreport.

The entirety of the data is available in the Vehicles.json file, which we’ll be embedding in the report as our data source:

Then, we’re going to use the data source we just created to add our data set:

Now that we’ve got some data to work with, it’s time to add a control to the report that we can use to display the data.

Drag a Table control onto the report area; we will make some modifications so that the table layout fits our needs. First, delete the header and footer rows and add five more detail rows. Then, merge the first two cells in the first row and cells two through six in the last column. When complete, your table should look something like this:

Now, we’re going to populate our table with data from the data set, as well as apply some styling to the table:

To complete the table, we will add our subreport to the large, empty cell. Drag and drop a Subreport control into the cell.

In the properties panel, we will set the Report Name and Report Parameters properties. For Report Name, we will use the report that we previously created: Manufacturers.rdlx-json. Then, for the Report Parameters, we will set the NAME to ManufacturerId and VALUE to {manufacturerId}.

Two things to note: the first is that, when binding a subreport, the subreport must be in the same location as the report it is being loaded into. If your report is not showing in the Report Name dropdown, try saving your report.

Second, we need to be sure, when adding a Report Parameter, that the NAME value that we give matches the name of the parameter that we created in the subreport; in this case, ManufacturerId.

Now, the table should look something like this:

And when we preview the report, we should see the following:

And with that, we’ve added a subreport to another report! We’re not done, though. With ActiveReportsJS, you can nest subreports in a master report, and that’s exactly what we will do.

Like with the first subreport, we will need to add a parameter to the report and a filter to the table to set this report up to be used as a subreport. First, we’re going to add a parameter named VIN:

Like before, we’re setting the Hidden property to True and providing a default value for the parameter.

The final step in implementing the parameter in this report is to add a filter to the table. This filter will make sure that we’re only displaying the data with matching VINs:

Now, when we preview the report, we’ll only see the vehicles with the VIN that matches the default value that we set in the parameter:

Now, not only have we implemented a subreport in this report, but we’ve made it capable of being used as a subreport itself! In the next section, we’ll add these nested subreports into a master report.

Loading Nested Subreports into a Master Report

With our nested subreports created, we can load them into a master report and set everything up to dynamically display all of our data. For this report, we will be displaying information on each of the car listings. Here is a snippet of what the data looks like:

{
  "price": 6300,
  "mileage": 274117,
  "color": "blue",
  "vin": "jtezu11f88k007763",
  "condition": "Grade 3"
},

As you can see, this data also has a VIN property, which will be used to determine which data to display in the nested subreport.

The entirety of the data is available in the CarListings.json file, which we’ll be embedding in the report as our data source:

Then, we’re going to use the data source we just created to add our data set:

Now, before we start loading data into components, since this is the master report, we will add a Page Header to it. For this report, we’re going to add a TextBox and Image control to the header:

Now the page header is set up, and we’ve got some data to work with, it’s time to add a control to the report that we can use to display the data.

Drag a Table control onto the report area; we will make some modifications so that the table layout fits our needs. First, delete the header and footer rows and add three more detail rows and one more column. Then, merge all of the cells in the second row. When complete, your table should look something like this:

Now, we’re going to populate our table with data from the data set, as well as apply some styling to the table:

To complete the table, we will add our subreport to the large, empty cell. Drag and drop a Subreport control into the cell.

In the properties panel, we will set the Report Name and Report Parameters properties. For Report Name, we will use the report we previously created: Vehicles.rdlx-json. Then, for the Report Parameters, we will set the NAME to VIN and VALUE to {vin}.

Now, the table should look something like this:

And if we preview the report, we’ll see the data from this report, as well as all of our data, correctly displayed with the associated content from the nested subreports:

Now that we have our master report, the next section will show how you can view it in a JavaScript application.

Viewing the Master Report in a JavaScript Application

Now that our reports have been set up, we must load them into a JavaScript application. ActiveReportsJS provides a JavaScript Report Viewer, which can be easily loaded into your application to display the master report.

First, we need to add the ActiveReportsJS library to our application. For this, I’ll be using the CDN. Simply add the following <script> tags to your <head> tag:

<link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" />
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

This will load ActiveReportsJS’s CSS files, as well as all of the required JavaScript files for the JavaScript Report Viewer and its export settings.

Next, beneath the <script> tags add the following:

<style>
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

And inside of the <body> tags, add the following markup:

<div id="viewer-host"></div>

This creates a div with a large area for the JavaScript Report Viewer to sit in.

Now, it's time to add the Report Viewer control to the application. Add the following beneath the <body> tags:

<script>
  var viewer = new ActiveReports.Viewer(#viewer-host);
  viewer.open(CarListings.rdlx-json);
</script>

This will load the control into the div we created and open the CarListings.rdlx-json report we created in the previous step. Be sure that the report files are in the same location as the HTML file loading them or that you are properly denoting the path to your report. You will need to ensure that your subreports are also there.

Now, we can run the application and see the master report in the browser. We’ll use the Live Server plugin for Visual Studio Code to run our application. When the application boots up, if everything has been set up correctly, you should see the following:

Conclusion

And with that, we’ve come to the end of the article. We’ve covered a lot of topics in this piece, from creating and binding subreports to nesting them in a master report and even loading that into a JavaScript Report Viewer.

Hopefully, this article has shown you the benefits of using subreports: by breaking apart your reports into subreports, you increase the modularity of your report infrastructure, allowing you to spend less time on report creation.

If you’d like to download the reports, data, and applications created in this article, you can find them here.

Ready to Start Adding JS Subreports to Your Applications? Download ActiveReportsJS Today!

Happy coding!