Using Templates and Master Reports in a JavaScript Report App

When building reporting solutions for web applications, maintaining consistency across reports while still allowing flexibility for customization can quickly become a challenge. In ActiveReportsJS, both Templates and Master Reports provide powerful ways to streamline report creation, standardize branding and layouts, and simplify the authoring experience for developers and end users alike. In this blog, we will explore the differences between these two approaches, review common use cases for each, and walk through how to implement them inside your applications.

Want to Test Out Master Reports and Templates? Download ActiveReportsJS Today!

What are Templates?

Templates are a useful tool for creating reports from a predetermined structure and data. They can be used for common items you include in all your reports, or you can have pre-built templates so you just need to add data to an already-designed report.

Report templates are blueprints for reports that contain the items and data bindings, similar to how the rdlx-json format works for a normal report. But with templates, you bring in all these and then edit from there rather than starting from scratch each time. These reports can be injected by adding the JSON definitions to the designer via the API. Learn more about report templates and how they display dynamic data.

Check out the example template in the editor.

What are Master Reports?

Master reports are a functionality in ARJS where there is a report that you build that will have several areas that are fully built out, and then a specific area, a content placeholder, which will be the only area that reports made with said master can customize by the report author without editing the master.

Master reports let you quickly set up several reports with the same structure, while allowing you to edit a single report to change them all at once. They also allow you to lock down users from changing major functionalities of your report. Learn more about Master Reports. 

Check out the demo with a master report inside the editor.

Use Cases for Templates and Master Reports

Now that we know what each of these methods is, let's review a few use cases and walk through implementing them.

As a general rule of thumb, there is an easy divide when deciding which is needed in a use case: editability. Master reports allow you to change multiple reports at once that use the master in their creation. Templates are just a head start on a design, and once the report is saved, it becomes its own report, so no changes to the template will affect reports that were already made with it.

We will be looking at a few different use cases:

• Branding Information

• Restricting Editable Areas in a Report

• Creating Reports with Preset Data

Branding Information 

This is likely one of the easiest methods to implement among these use cases. The idea of branding is that you have a shared set of elements that you want to appear in new reports. Take the example demo. This demo uses a template injection to have the designer ready for you to make the report. This is perfect for having the flexibility to change stuff in the document, as sometimes a strict report design does not fit the needs of a report, but you do not want to start from scratch.

A template lets you get a head start by injecting the designer on opening, and after that, the report looks as if the user had made it all on their own. Allowing them to change what needs to be changed and keeping what they want to keep.

Restricting Editable Areas in a Report

This is the perfect use case for master reports, as the idea is to create a report and allow only a section of it to be edited by the end user. This is useful if you want to have the report mostly built and only allow the end user to make finishing touches, but it is also useful because you can go in and change the master’s design and have that update all the reports built with that master.

Consider a company that offers its reporting services using ActiveReports. They can use master reports to hand over a report that can be used as a template, while limiting what their low-tech clients can do to ensure that the datasets are already set up and filtered, etc. As there are several complex areas in report generation, if you do not know how to handle them, the report will perform worse. Allowing generalized changes, even in the header and footer, is another factor that makes master reports popular.

Creating Reports with Preset Data

This is a case where you would let end users generate their own reports. With templating, you can preset the data in the designer so your users don't need to set up the data source or dataset. This frees up the report author to focus on the report rather than the data itself. This is an area that most report authors are not comfortable with unless they have knowledge of queries or API Endpoints.

Walk-through for Templates

ActiveReportsJS is built for the web, so all your code runs in the browser, unlike ActiveReports.NET. This means templates work slightly differently, but follow the same concept.

To start a template, you need to create a report and save it. In most cases, you will have the branding and report info in the headers and footers, and a data source in the template. You can use as many or as few controls/datasets in the template as you need.

Once saved, the report can be used as a template for report creation by loading it into the viewer. This is different from editing the template report, as saving it creates a new report, and any changes made to the template itself will only affect reports generated from it going forward.

You can load the report from a file like this:

    const reportContentResponse = await fetch(`./reports/Products.rdlx-json`)
    const reportTemplate: ARJS.Report = await reportContentResponse.json();

Or you can also inject the report JSON in like this:

const reportTemplate: ARJS.Report = {
  Name: "Report",
  Body: {
    ReportItems: [
      {
        Type: "textbox",
        Name: "txtHeader",
        Value: "Hello, ActiveReportsJS",
        Style: {
          FontSize: "18pt",
        },
        Width: "8.5in",
        Height: "0.5in",
      },
    ],
  },
};

Both methods require loading a valid JSON report; otherwise, they will fail or encounter issues.

Walk-through for Master Reports

ActiveReportsJS’s use of master reports is similar to how templates work, but the setup process is more involved.

First, you create a master report. Upon creation, go to the “Report” tab at the top of the designer, and there will be an option for “Convert to Master Report”. This step is needed so that the Content Placeholder option is available in the designer.

Continue designing the report, and when you reach a point where you want to define the area for the end user to use, look for “Content Placeholder” in the toolbox. This is a report control that looks like a Container and, in reality, is one; you cannot add anything to it on the master report itself, as that is a predefined area for end-user authors to add to. When they create a report using the master, everything other than the placeholders will be greyed out and uneditable. As a result, you should allow ample space based on the expected use cases of the report.

Once you finish designing the master, save the report. After it is saved, you will then be able to visit the report tab on a new designer page. On it, there is the option of “Set Master Report” if you are allowing users to access a blank designer, or you can set it via code.

designer.createReport({
          "reportType" : "CPL",
          "masterReportId": "reports/MasterReport.rdlx-json"
        })

Conclusion

Both Templates and Master Reports in ActiveReportsJS provide powerful ways to simplify report creation while maintaining consistency across your applications. Whether you need flexible starting points for end users, reusable branding and layouts, or stricter control over editable report regions, these features help developers build scalable and maintainable reporting workflows. By understanding the strengths of each approach and how to implement them, you can create reporting experiences that are easier to manage, faster to develop, and more user-friendly for both technical and non-technical report authors.

If you are interested in building more modular and reusable report designs, you can check out this related blog on implementing Subreports in ActiveReportsJS applications.

Want to Test Out Master Reports and Templates? Download ActiveReportsJS Today!