# DesignerSettings

## Content

# Type Alias: DesignerSettings

```ts
type DesignerSettings = object;
```

## Properties

### allowInlineEditing?

```ts
optional allowInlineEditing: "True" | "False" | "Auto";
```

When **allowInlineEditing** is 'False', the in-line editor (when you can click a textbox and enter a value manually) and DataFieldPicker are disabled

**Example:**
```javascript
designerOptions.allowInlineEditing = 'False';
```

#### Default

```ts
'Auto'
```

***

### appBar

```ts
appBar: AppBarSettings;
```

**App Bar** settings

***

### data

```ts
data: DataSettings;
```

**Data**-related settings

***

### dateFormats?

```ts
optional dateFormats: string[];
```

Specifies the list of supported date formats
https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		dateFormats = ['yyyy/MM/dd HH:mm:ss', 'yyyy/MM/dd', 'HH:mm:ss', 'tt hh:mm:ss']
});
```

```javascript
// UMD usage
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		dateFormats = ['yyyy/MM/dd HH:mm:ss', 'yyyy/MM/dd', 'HH:mm:ss', 'tt hh:mm:ss']
});
```

```typescript
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		dateFormats = ['yyyy/MM/dd HH:mm:ss', 'yyyy/MM/dd', 'HH:mm:ss', 'tt hh:mm:ss']
});
```

***

### disableFocusTimer?

```ts
optional disableFocusTimer: boolean;
```

By default, focused elements (like buttons) are highlighted only for a small period of time after **Tab** key was pressed.\
This settings makes focused elements permanently highlighted.

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		disableFocusTimer: true
});
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		disableFocusTimer: true
});
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		disableFocusTimer: true
});
```

#### Default

```ts
false
```

***

### disableSystemClipboard?

```ts
optional disableSystemClipboard: boolean;
```

Disable usage of system clipboard. Copy-paste between designer instances will work only in the same browser in the same domain

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		disableSystemClipboard: true
});
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		disableSystemClipboard: true
});
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		disableSystemClipboard: true
});
```

#### Default

```ts
false
```

***

### document?

```ts
optional document: Document;
```

Document to open on app startup, if not set new empty document will be created

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		document: { id: 'reportId', type: { type: 'report', platform: 'rdlx' }}
});
```

```javascript
// UMD usage
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		document: { id: 'reportId', type: { type: 'report', platform: 'rdlx' }}
});
```

```typescript
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		document: { id: 'reportId', type: { type: 'report', platform: 'rdlx' }}
});
```

***

### documents?

```ts
optional documents: DocumentsAPISettings;
```

Documents API settings

***

### editor?

```ts
optional editor: ReportEditorSettings;
```

Editor settings

***

### filterProperties()?

```ts
optional filterProperties: (descriptors, item, platform) => PropertyDescriptor[];
```

Return filtered array of descriptors  in the order in which descriptors should be rearranged

#### Parameters

##### descriptors

`PropertyDescriptor`[]

##### item

`Record`<`string`, `any`>

##### platform

`"rdlx"` | `"rpx"`

#### Returns

`PropertyDescriptor`[]

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		filterProperties: (descriptors, item, platform) => {
			return descriptors.filter(d =>
			{
				return d.valuePath !== 'Value'
				&& d.valuePath !== 'Name'
				&& d.valuePath !== 'Style.Format'
				&& d.category !== 'propertyDescriptors:categories.layout'
			});
		}
});
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		filterProperties: (descriptors, item, platform) => {
			return descriptors.filter(d =>
			{
				return d.valuePath !== 'Value'
				&& d.valuePath !== 'Name'
				&& d.valuePath !== 'Style.Format'
				&& d.category !== 'propertyDescriptors:categories.layout'
			});
		}
});
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		filterProperties: (descriptors: PropertyDescriptor[], item: Record<string, any>, platform: 'rdlx' | 'rpx') => {
			return descriptors.filter(d =>
			{
				return d.valuePath !== 'Value'
				&& d.valuePath !== 'Name'
				&& d.valuePath !== 'Style.Format'
				&& d.category !== 'propertyDescriptors:categories.layout'
			});
		}
});
```

***

### fonts?

```ts
optional fonts: (string | Font | FontHeader)[];
```

Specifies the list of fonts displayed in **Font** property editors all over Designer.\
Supports plain strings, label-value pairs, headers and splitters

If not specified, the default list of fonts is used:
	'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Geneva', 'Georgia', 'Helvetica',
	'Impact', 'Lucida Console', 'Meiryo', 'Meiryo UI', 'MingLiU', 'MingLiU-ExtB', 'MS Gothic', 'MS Mincho',
	'MS PGothic', 'MS PMincho', 'MS Song', 'MS UI Gothic', 'NSimSun', 'Osaka', 'PMingLiU', 'PMingLiU-ExtB',
	'SimSun', 'SimSun-ExtB', 'Song', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Yu Gothic'.

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		fonts: [{ header: 'Questionable Choice' }, { label: 'Pretty Font', value: 'Comic Sans MS' }, { header: '' }, 'Arial', 'Courier New', 'Times New Roman']
});
```

```javascript
// UMD usage
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		fonts: [{ header: 'Questionable Choice' }, { label: 'Pretty Font', value: 'Comic Sans MS' }, { header: '' }, 'Arial', 'Courier New', 'Times New Roman']
});
```

```typescript
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		fonts: [{ header: 'Questionable Choice' }, { label: 'Pretty Font', value: 'Comic Sans MS' }, { header: '' }, 'Arial', 'Courier New', 'Times New Roman']
});
```

***

### imageMimeTypes?

```ts
optional imageMimeTypes: string[];
```

Specifies the list of supported image mime-types

***

### instanceId?

```ts
optional instanceId: string;
```

Unique identifier for the Designer instance. Required if there are multiple instances on the same page

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('ar-web-designer');
```

```javascript
// UMD usage
var api = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
```

```typescript
const api = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
```

#### Default

```ts
'ar-web-designer'
```

***

### language?

```ts
optional language: string;
```

Specifies language to use for the Designer.\
If **language** is not specified, browser preferences are used

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		language: 'ja'
});
```

```javascript
// UMD usage
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		language: 'ja'
});
```

```typescript
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		language: 'ja'
});
```

#### Default

```ts
'en'
```

***

### lockLayout?

```ts
optional lockLayout: boolean;
```

When **lockLayout** is enabled, it is only possible to modify properties of existing report items.\
I.e., adding a new report item or deleting of an existing one is not possible as well as other operations that modify report layout structure.\

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('ar-web-designer');
designer.lockLayout = 'true';
```

```javascript
// UMD usage
var api = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.lockLayout = 'true';
```

```typescript
const api = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.lockLayout = 'true';
```

#### Default

```ts
false
```

***

### menu?

```ts
optional menu: MenuSettings;
```

**Menu** settings

***

### preview

```ts
preview: PreviewSettings;
```

Document **Preview** settings

***

### propertyGrid?

```ts
optional propertyGrid: PropertyGridSettings;
```

Property Grid settings

***

### rdlx?

```ts
optional rdlx: RdlxSettings;
```

RDLX platform-specific settings

***

### rpx

```ts
rpx: RpxSettings;
```

RPX platform-specific settings

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
	rpx: {
			enabled: true,
			metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
		}
	);

	var designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
	designer.documents.create({
	name: 'MyReport.rpx',
	type:
		{
			platform: 'rpx',
			type: 'report',
		}
	})
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
	rpx: {
			enabled: true,
			metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
		}
	);

	var designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
	designer.documents.create({
	name: 'MyReport.rpx',
	type:
		{
			platform: 'rpx',
			type: 'report',
		}
	})
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
	rpx: {
			enabled: true,
			metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
		}
	);

	const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
	designer.documents.create({
	name: 'MyReport.rpx',
	type:
		{
			platform: 'rpx',
			type: 'report',
		}
	})
```

***

### server

```ts
server: ServerSettings;
```

Backend-related settings

***

### statusBar?

```ts
optional statusBar: StatusBarSettings;
```

Status Bar settings

***

### storeUnsavedReport?

```ts
optional storeUnsavedReport: boolean;
```

When **storeUnsavedReport** is **enabled**, the last unsaved report can be restored if browser tab or browser itself gets accidentally closed.\
In case **storeUnsavedReport** is **disabled**, the aforementioned functionality is not available

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		storeUnsavedReport: false
});
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		storeUnsavedReport: false
});
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		storeUnsavedReport: false
});
```

#### Default

```ts
true
```

***

### storeUserPreferences?

```ts
optional storeUserPreferences: boolean;
```

When **storeUserPreferences** is **enabled**, user preferences will be saved to a browser storage.\
In case **storeUnsavedReport** is **disabled**, the aforementioned functionality is not available

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		storeUnsavedReport: false
});
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		storeUnsavedReport: false
});
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		storeUnsavedReport: false
});
```

#### Default

```ts
true
```

***

### ~~styles?~~

```ts
optional styles: RpxStyles;
```

RPX **Styles**-related settings

#### Deprecated

Use RPX stylesheet settings instead

#### Example

```ts
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
rpx: {
	 styles: {
		 stylesTab: {
			 enabled: false
		 }
	 }
}
});
```

***

### themes?

```ts
optional themes: DesignerThemesSettings;
```

Configures various theme-related settings.

***

### title?

```ts
optional title: TitleSettings;
```

Document **Title** settings

***

### toolBar?

```ts
optional toolBar: object;
```

Tool Bar settings

Specifies whether **Tool Bar** needs to be shown

#### visible

```ts
visible: boolean;
```

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
	 toolBar: { visible: false }
});
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
	 toolBar: { visible: false }
});
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
	 toolBar: { visible: false }
});
```

#### Default

```ts
{ visible: true }
```

***

### units?

```ts
optional units: "in" | "cm";
```

Specifies the default measurement units

#### Examples

```javascript
// ESM usage
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
		storeUserPreferences: false,
     units: 'cm'
});
```

```javascript
// UMD usage
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		storeUserPreferences: false,
     units: 'cm'
});
```

```typescript
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
		storeUserPreferences: false,
      units: 'cm'
});
```

#### Default

```ts
'in'
```