# ActiveReports Web Designer Reference
This document provides information on how to set up AR Web Designer.
- [ActiveReports Web Designer Reference](#activereports-web-designer-reference)
- [Code Snippets](#code-snippets)
- [General](#general)
- [Custom Localization](#custom-localization)
- [Basic Sample Custom Localization JSON](#basic-sample-custom-localization-json)
- [Common](#common)
- [Name Templates](#name-templates)
- [Parameters](#parameters)
## Code Snippets
### General
```html
ActiveReports Web Designer
```
## Custom Localization
### Basic Sample Custom Localization JSON
Here a **common** namespace is used as an example for the **Custom Localization** feature.
- **"ns"** property is a **namespace**. It shouldn't be translated and is required for proper work of the **Custom Localization** feature. Required.
- **"lng"** property is a **language**. For example, "es" for Spanish. Required
- **"resources"** A map of localization resources used in the corresponding namespace. Contents of this property require translation. Required.
```json
[
{
"ns": "common",
"lng": "ja",
"resources": {
"units": {
"cm": {
"textShortName": "cm",
"textFullName": "センチメートル"
},
"in": {
"textShortName": "in",
"textFullName": "インチ"
}
},
"btnAdd": "追加",
"btnOk": "OK",
"btnCancel": "キャンセル",
"btnSave": "保存",
"textOpen": "開く..."
}
}
]
```
### Common
If you would like to utilize the **Custom Localization** feature:
1. You need to translate the **resources** from the **custom-resources.json** file.
2. Add translated resources fo the AR Web Designer **before** the instance is created.
**Example:**
```javascript
GrapeCity.ActiveReports.Designer.addLanguage('fr', [
{
ns: 'common',
lng: 'ja',
resources: {
btnAdd: '追加',
btnCancel: 'キャンセル',
btnSave: '保存',
textOpen: '開く...',
/* ... */
},
},
/* ... Other Namespaces ... */
]);
GrapeCity.ActiveReports.Designer.create('#ar-web-designer');
```
### Name Templates
In _custom-resources.json_ there is a **"nameTemplates"** namespace. Values in these sections are expected to be **alphanumeric identifiers**. I.e., they can contain only **letters** and **digits** but cannot start with a digit. The same is applicable to **"textDataSourceNameTemplate"** property from the _dataSourceEditor_ namespace.
### Parameters
Please note that some resource strings have parameters. They are enclosed in double curly braces:
```javascript
"textFieldsCount": "{{count}} fields",
"textFieldsCount_plural": "{{count}} fields",
```
**DO NOT** translate them. Translate only surrounding text:
```javascript
"textFieldsCount_0": "{{count}} pól",
"textFieldsCount_1": "{{count}} pole",
"textFieldsCount_2": "{{count}} pola",
```
You can move them to a different part of the sentence according to the language you're translating to