Type Alias: DesignerSettings

type DesignerSettings = object;

Properties

allowInlineEditing?

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:

designerOptions.allowInlineEditing = 'False';

Default

'Auto'

---

appBar

appBar: AppBarSettings;

App Bar settings

---

data

data: DataSettings;

Data-related settings

---

dateFormats?

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

// 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']
});

// 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']
});

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?

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

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

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

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

Default

false

---

disableSystemClipboard?

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

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

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

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

Default

false

---

document?

optional document: Document;

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

Examples

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

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

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

---

documents?

optional documents: DocumentsAPISettings;

Documents API settings

---

editor?

optional editor: ReportEditorSettings;

Editor settings

---

filterProperties()?

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

// 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'
			});
		}
});

// 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'
			});
		}
});

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?

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

// 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']
});

// 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']
});

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?

optional imageMimeTypes: string[];

Specifies the list of supported image mime-types

---

instanceId?

optional instanceId: string;

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

Examples

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

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

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

Default

'ar-web-designer'

---

language?

optional language: string;

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

Examples

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

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

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

Default

'en'

---

lockLayout?

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

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

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

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

Default

false

---

menu?

optional menu: MenuSettings;

Menu settings

---

preview

preview: PreviewSettings;

Document Preview settings

---

propertyGrid?

optional propertyGrid: PropertyGridSettings;

Property Grid settings

---

rdlx?

optional rdlx: RdlxSettings;

RDLX platform-specific settings

---

rpx

rpx: RpxSettings;

RPX platform-specific settings

Examples

// 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',
		}
	})

// 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',
		}
	})

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

server: ServerSettings;

Backend-related settings

---

statusBar?

optional statusBar: StatusBarSettings;

Status Bar settings

---

storeUnsavedReport?

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

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

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

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

Default

true

---

storeUserPreferences?

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

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

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

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

Default

true

---

styles?

optional styles: RpxStyles;

RPX Styles-related settings

Deprecated

Use RPX stylesheet settings instead

Example

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

---

themes?

optional themes: DesignerThemesSettings;

Configures various theme-related settings.

---

title?

optional title: TitleSettings;

Document Title settings

---

toolBar?

optional toolBar: object;

Tool Bar settings

Specifies whether Tool Bar needs to be shown

visible

visible: boolean;

Examples

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

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

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

Default

{ visible: true }

---

units?

optional units: "in" | "cm";

Specifies the default measurement units

Examples

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

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

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

Default

'in'