# Default Report Item Properties

Learn how to configure default report item properties for the ActiveReportsJS Report Designer component

## Content

When a user designs a report and adds a new report item, such as a [TextBox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox), the report designer automatically sets the properties of the new report item to the default values. For example, a newly added TextBox has the `Arial` font name, `10pt` font size, and `Normal` font style. However, it is possible to override these default values by following the procedure described below.

### Report Item Templates

`Report Item Templates` are regular reports containing report items with properties set to the desired values. You can create a `Report Item Template` in the [Standalone Report Designer App](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App). For example, if you would like the default font name for a TextBox to be `Times New Roman`, you can add a TextBox to the template report and set its font name accordingly.

In addition to various style properties, such as the `Font Name`, a newly added report item receives the default position and dimensions that can use either `imperial` or `metric` units depending on the Report Designer's current unit system that can be selected in the right-bottom corner of the UI:

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/developer-guide/designer-component/UnitSystemSwitch.png)

Consequently, you might want to create Report Items Templates for both `imperial` and `metric` units. If users of your application use the single unit system only, it is OK to create a corresponding single Report Item Template.

Finally, ActiveReportsJS supports two types of report layout: [Continious Page Layout](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/Report-Layouts#continuous-page-layout) and [Fixed Page Layout](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/Report-Layouts#fixed-page-layout). If you want to define the default report item properties that are supported for the latter, such as [Fixed Size](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/Report-Layouts#fixed-size) then you can create a fixed layout report item template for that.

To summarize, there are four report item templates that you might want to create:

* Continuous Page Layout, imperial units
* Fixed Page Layout, imperial units
* Continuous Page Layout, metric units
* Fixed Page Layout, metric units

Once report templates are created, you can initialize an object of the following shape in the code of your application. Check the [documentation](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#report-info-object) for the explanation of the `ReportInfo` object.

```js
const reportItemTemplates = {
  imperialTemplates: [
    cplImperialReportTemplateInfo, // Report Info for the Continuous Page Layout Report Items Template with imperial units
    fplImperialReportTemplateInfo // Report Info for the Fixed Page Layout Report Items Template with imperial units
  ],
  metricTemplates: [
    cplMetricReportTemplateInfo, //  Report Info for the Continuous Page Layout Report Items Template with metric units
    fplMetricReportTemplateInfo // Report Info for the Fixed Page Layout Report Items Template with metric units
  ]
}
```

For instance, you can save report templates within your application's static assets folder, such as the [React app's public folder](https://create-react-app.dev/docs/using-the-public-folder/), then initialize the following object in the code:

```js
const reportItemTemplates = {
  imperialTemplates: [
    {id: "cpl-template-imperial.rdlx-json"}, // URL of the Continuous Page Layout Report Item Template with imperial units
    {id: "fpl-template-imperial.rdlx-json"} // URL of the Fixed Page Layout Report Item Template with imperial units
  ],
  metricTemplates: [
    {id: "cpl-template-metric.rdlx-json"}, //  URL of the Continuous Page Layout Report Item Template with metric units
    {id: "fpl-template-metric.rdlx-json"} // // URL of the Fixed Page Layout Report Item Template with metric units
  ]
}
```

Note that you might want to use a single Report Item template. For example, suppose users of your application only use `imperial` units, and you want to set the default Font Name for the textbox report item. In that case, the reportItemTemplates object can contain only one report item template reference:

```js
const reportItemTemplates = {
  imperialTemplates: [
    {id: "default-template.rdlx-json"}, // URL of the Continuous Page Layout Report Item Template with imperial units
  ]
}
```

### Report Designer Component Configuration

If you use [React Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/React-Component), [Angular Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Angular-Component), [Vue Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Vue-Component), or [Svelte Report Designer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/svelte) components, then you can utilize the `onInit` property that resolves to a function that returns the [DesignerConfig object](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) containing the `customInitTemplates` object.

```js
import { Designer } from "@mescius/activereportsjs-react";

const reportItemTemplates = {
  imperialTemplates: [
    {id: "cpl-template.rdlx-json"}
  ]
}

function onInit(){
  return { customInitTemplates: reportItemTemplates }
}

function App() { 
  return (
    <div id="designer-host">
      <Designer onInit={onInit}  />
    </div>
  );
}
```

In a pure JS application, the constructor of `GC.ActiveReports.ReportDesigner.Designer` accepts the [DesignerConfig Object](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) as the second optional argument that includes, among others, the `customInitTemplates` property.

```js
var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
    "#designer-host",
    { customInitTemplates: reportItemTemplates }
);
```

Visit the [Live Demo](/activereportsjs/demos/features/designer-custom-defaults/purejs) for the full examples for pure JS, React, Angular, and Vue applications.