Working with report templates

Report template

Report template is a blueprint of the report and contains the definitions of report items and data bindings that define the layout and structure of the report. The report items include the elements such as tables, charts, and text boxes that make up the report, and the data bindings link the report to a data source, allowing the report to display dynamic data.

In a code, a report template is represented by an object literal that has two important properties:

• It can be serialized and deserialized from JSON format without losing information. This is how saving and opening reports from *.rdlx-json files work.

• The structure of a report template object is described by the Report type. You can use it to annotate variables, function parameters, and return types to provide type information and enable type checking in your TypeScript code that works with report templates. It is important to note that TypeScript types, such as Report are used for type checking and type hinting only, and are not enforced at runtime.

Creating a report template

Below is the TypeScript code that initializes a report template with Continuous Layout containing a TextBox

import {Rdl as ARJS} from '@grapecity/activereports/core';

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

Note that if an IDE supports TypeScript, it provides intelligence when you write a code as in the image below:

You can find complete examples of create report templates from scratch via code in the Table Builder and Chart Builder demos. Both of them include the report-service.tsx code that is responsible to constructing a report template based on selected structure of a table and a chart.

Initializing a report template from an external source

As we mentioned earlier, report templates can be serialized into JSON format. The resulting JSON content can be preserved in a file or other type of storage, such as a database. You can use the same Report type to annotate the result of loading a report template from an external source, for example:

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

Note, though, that there is no runtime type check, so it's a developer's responsibility to ensure that retrieved JSON content is a valid report template.

Modifying a report template

Once the report template is initialized, you could modify it by removing or adding page header or footer, report items, and data connections. All properties of the Report type are also annotated with types and supplied with the documentation. You can find the full list of these types at the API section. Modifying a report template boils down to re-assigning properties. For example, if you want to remove a page header, then the code be like:

reportTemplate.PageFooter = undefined;

If you wish to add a new report item to a page header, then the code might be like:

reportTemplate.PageHeader?.ReportItems?.push({
  Type: "textbox",
  Name: "txtHeader",
  Value: "Invoice",
  Style: {
    FontSize: "18pt",
  },
  Width: "8.5in",
  Height: "0.5in",
});