# Working with report templates

Using ActiveReportsJS API to modify the report template

## Content

### 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table), [charts](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart), and [text boxes](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) that make up the report, and the [data bindings](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer) 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](https://developer.mescius.com/activereportsjs/api/modules/Core.Rdl#report). 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/Report-Layouts#continuous-page-layout) containing a [TextBox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox)

```ts
import {Rdl as ARJS} from '@mescius/activereportsjs/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:
![image](https://cdn.mescius.io/document-site-files/images/63fe0dd3-3685-4797-a0bd-27582eb114bd/image.778cfb.png)
You can find complete examples of create report templates from scratch via code in the [Table Builder](https://developer.mescius.com/activereportsjs/demos/features/table-builder/react) and [Chart Builder](https://developer.mescius.com/activereportsjs/demos/features/chart-builder/react) 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:

```ts
    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](https://developer.mescius.com/activereportsjs/api/modules/Core.Rdl). 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:

```ts
reportTemplate.PageFooter = undefined;
```

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

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