ReportDesigner

Namespace: ReportDesigner

Classes

Designer

Interfaces

Type aliases

Variables

ColorThemes

Type aliases

ColorTheme

Ƭ ColorTheme: Object

Represents a custom UI color theme.

example

const customTheme: ColorTheme = {
	name: 'BrandLight',
	type: 'light',
	backgroundMain: '#ffffff',
	backgroundPanels: '#f5f5f5',
	primary: '#2b579a',
	secondary: '#107c10',
	neutral: '#6b6b6b',
	error: '#d13438',
	warning: '#ffb900',
	fontFamily: 'Segoe UI',
};

Type declaration

Name	Type	Description
`backgroundMain`	`string`	Gets or sets the main background color.
`backgroundPanels`	`string`	Gets or sets the panel background color.
`error?`	`ColorThemeItem`	Gets or sets the error theme color.
`fontFamily?`	`string`	Gets or sets the font family for UI text.
`name`	`string`	Gets or sets the theme name.
`neutral?`	`ColorThemeItem`	Gets or sets the neutral theme color.
`primary?`	`ColorThemeItem`	Gets or sets the primary theme color.
`secondary?`	`ColorThemeItem`	Gets or sets the secondary theme color.
`type`	`ColorThemeType`	Gets or sets the theme type.
`warning?`	`ColorThemeItem`	Gets or sets the warning theme color.

ColorThemeItem

Ƭ ColorThemeItem: string | ColorThemeShades

Defines a theme color value as either a single color string or a set of shades.

example

const primary: ColorThemeItem = '#2b579a';

ColorThemeShades

Ƭ ColorThemeShades: Object

Defines the set of color shades used by a theme.

example

const shades: ColorThemeShades = {
	veryLight: '#ffffff',
	light: '#f2f2f2',
	lighter: '#e6e6e6',
	lightMedium: '#cccccc',
	medium: '#999999',
	base: '#666666',
	darkMedium: '#4d4d4d',
	darker: '#333333',
	dark: '#1a1a1a',
	veryDark: '#000000',
};

Type declaration

Name	Type	Description
`base`	`string`	Gets or sets the base shade.
`dark?`	`string`	Gets or sets the dark shade.
`darkMedium?`	`string`	Gets or sets the dark medium shade.
`darker?`	`string`	Gets or sets the darker shade.
`light?`	`string`	Gets or sets the light shade.
`lightMedium?`	`string`	Gets or sets the light medium shade.
`lighter?`	`string`	Gets or sets the lighter shade.
`medium?`	`string`	Gets or sets the medium shade.
`veryDark?`	`string`	Gets or sets the very dark shade.
`veryLight?`	`string`	Gets or sets the very light shade.

ColorThemeType

Ƭ ColorThemeType: "light" | "dark"

Defines the overall tone of a color theme.

remarks Accepted values:

'light': Light theme.
'dark': Dark theme.

example

const themeType: ColorThemeType = 'light';

CustomInitTemplates

Ƭ CustomInitTemplates: Object

Represents the custom templates used to initialize new reports.

example

const templates: CustomInitTemplates = {
	imperialTemplates: [{ id: 'report-1', displayName: 'Invoice' }],
	metricTemplates: [{ id: 'report-2', displayName: 'Invoice (Metric)' }],
};

Type declaration

Name	Type	Description
`imperialTemplates?`	`Report`[]	Gets or sets the templates for imperial units.
`metricTemplates?`	`Report`[]	Gets or sets the templates for metric units.

DataSetTemplate

Ƭ DataSetTemplate: Object

Represents a dataset template for the data panel.

example

const template: DataSetTemplate = {
	id: 'ds1',
	title: 'Orders',
	template: {} as Rdl.DataSet,
};

Type declaration

Name	Type	Description
`canEdit?`	`boolean`	Gets or sets a value indicating whether datasets created from this template can be edited.
`id`	`string`	Gets or sets the template identifier.
`nestedTemplates?`	`DataSet`[]	Gets or sets the RDLX definitions for nested datasets.
`shouldEdit?`	`boolean`	Gets or sets a value indicating whether the designer should show the edit dialog.
`template`	`DataSet`	Gets or sets the RDLX definition of the dataset.
`title`	`string`	Gets or sets the template title.

DataSourceTemplate

Ƭ DataSourceTemplate: Object

Represents a data source template for the data panel.

example

const template: DataSourceTemplate = {
	id: 'src1',
	title: 'Main Database',
	template: {} as Rdl.DataSource,
	datasets: [],
};

Type declaration

Name	Type	Description
`canEdit?`	`boolean`	Gets or sets a value indicating whether datasets created from this template can be edited.
`datasets?`	`DataSetTemplate`[]	Gets or sets the dataset templates for the data source.
`id`	`string`	Gets or sets the template identifier.
`shouldEdit?`	`boolean`	Gets or sets a value indicating whether the designer should show the edit dialog.
`template`	`DataSource`	Gets or sets the RDLX definition of the data source.
`title`	`string`	Gets or sets the template title.

DesignerAppBarControlItem

Ƭ DesignerAppBarControlItem: Object

Represents an App Bar control item.

remarks This is a simplified AppBarButton type to avoid core-ui imports leaking into the public declarations.

example

const item: DesignerAppBarControlItem = {
	type: 'button',
	id: 'custom-save',
	title: 'Save',
	disabled: false,
};

Type declaration

Name	Type	Description
`badge?`	{ `content?`: `string` ; `customCSS?`: `string` ; `level?`: `"warning"` \| `"error"` ; `position?`: `string` ; `rounded?`: `boolean` }	Gets or sets the badge settings.
`badge.content?`	`string`	Gets or sets the badge content.
`badge.customCSS?`	`string`	Gets or sets a custom CSS class or styles string for the badge.
`badge.level?`	`"warning"` \| `"error"`	Gets or sets the badge level.
`badge.position?`	`string`	Gets or sets the badge position.
`badge.rounded?`	`boolean`	Gets or sets a value indicating whether the badge is rounded.
`customCSS?`	`string`	Gets or sets a custom CSS class or styles string.
`disabled?`	`boolean`	Gets or sets a value indicating whether the control item is disabled.
`icon?`	{ `content`: `unknown` ; `type`: `"svg"` }	Gets or sets the SVG icon descriptor.
`icon.content`	`unknown`	Gets or sets the SVG content.
`icon.type`	`"svg"`	Gets or sets the icon type.
`id?`	`string`	Gets or sets the control item identifier.
`title?`	`string`	Gets or sets the control item title.
`type`	`"about"` \| `"button"`	Gets or sets the control item type.
`onClick?`	(`e`: `MouseEvent`) => `void`	Gets or sets the click handler for the control item.

DesignerCommand

Ƭ DesignerCommand: "save" | "saveAs" | "create" | "open" | "render"

Defines the names of commands that the designer can process.

remarks Accepted values:

'save': Save the current report.
'saveAs': Save the current report as a new report.
'create': Create a new report.
'open': Open an existing report.
'render': Render the current report.

example

const command: DesignerCommand = 'save';

DesignerConfig

Ƭ DesignerConfig: Object

Represents the configuration options for the report designer.

example

const config: DesignerConfig = {
	language: 'en',
	fontSet: 'default',
	propertyGrid: { mode: 'Advanced' },
	themeConfig: { initialTheme: 'Default' },
	editor: { showGrid: true },
	menu: { visible: true },
	customInitTemplates: { imperialTemplates: [{ id: 'report-1' }] },
};

Type declaration

Name	Type	Description
`allowInlineEditing?`	`"True"` \| `"False"` \| `"Auto"`	Gets or sets whether inline editing is allowed. `remarks` Accepted values: - `'True'`: Always allow inline editing. - `'False'`: Disable inline editing. - `'Auto'`: Use the default behavior. Default is `'Auto'`.
`appBar?`	`AppBarSettings`	Gets or sets the App Bar settings.
`customInitTemplates?`	`CustomInitTemplates`	Gets or sets the custom initialization templates for new reports.
`data?`	`DataSettings`	Gets or sets the data-related settings.
`dateFormats?`	`string`[]	Gets or sets the list of supported date formats.
`disableFocusTimer?`	`boolean`	Gets or sets a value indicating whether focus highlights are permanent. `remarks` Default is `false`.
`disableHistoryHotkeys?`	`boolean`	Gets or sets a value indicating whether the default undo and redo hotkeys are disabled.
`disableOpenSaveHotkeys?`	`boolean`	Gets or sets a value indicating whether the default open and save hotkeys are disabled.
`disableSystemClipboard?`	`boolean`	Gets or sets a value indicating whether system clipboard usage is disabled. `remarks` Default is `false`.
`editor?`	`EditorSettings`	Gets or sets the editor settings.
`fontSet?`	`FontSet`	Gets or sets the available font set.
`language?`	`string`	Gets or sets the application language, for example `'en'`, `'ja'`, or `'zh'`. `remarks` Default is `'en'`.
`lockLayout?`	`boolean`	Gets or sets a value indicating whether layout modifications are locked. `remarks` Default is `false`.
`menu?`	`MenuSettings`	Gets or sets the menu settings.
`propertyGrid?`	`PropertyGridSettings`	Gets or sets the Property Grid settings.
`reportPartsLibraries?`	`ReportPartsLibrary`[]	Gets or sets the Report Parts libraries available to the designer.
`statusBar?`	`StatusBarSettings`	Gets or sets the status bar settings.
`storeUserPreferences?`	`boolean`	Gets or sets a value indicating whether user preferences are stored in browser storage. `remarks` Default is `true`.
`themeConfig?`	`ThemeConfig`	Gets or sets the theme configuration.
`toolBar?`	`ToolBarSettings`	Gets or sets the Tool Bar settings.
`units?`	`"in"` \| `"cm"`	Gets or sets the default measurement units. `remarks` Default is `'in'`.
`filterProperties?`	(`descriptors`: `PropertyDescriptor`[], `item`: `Record`<`string`, `any`>) => `PropertyDescriptor`[]	Gets or sets a filter that can reorder or filter property descriptors.

DocumentChangedEventArgs

Ƭ DocumentChangedEventArgs: Object

Represents the event arguments for a document change.

example

const args: DocumentChangedEventArgs = {
	definition: {} as Rdl.Report,
	isDirty: true,
};

Type declaration

Name	Type	Description
`definition`	`Report`	Gets or sets the RDLX report definition.
`isDirty`	`boolean`	Gets or sets a value indicating whether the report has unsaved changes.

EditorAPI

Ƭ EditorAPI: Object

Represents the editor command API for report editing actions.

example

if (editorApi.canUndo()) {
	editorApi.undo();
}

Type declaration

Name	Type
`canCopy`	() => `boolean`
`canCut`	() => `boolean`
`canDelete`	() => `boolean`
`canPaste`	() => `boolean`
`canRedo`	() => `boolean`
`canUndo`	() => `boolean`
`copy`	() => `void`
`cut`	() => `void`
`delete`	() => `void`
`paste`	() => `void`
`redo`	() => `void`
`undo`	() => `void`

FontSet

Ƭ FontSet: "default" | "registered" | "all"

Represents the available font set options.

remarks Accepted values:

'default': Predefined fonts.
'registered': Fonts registered in FontStore.
'all': Both predefined and registered fonts.

example

const fontSet: FontSet = 'default';

ImageResourceInfo

Ƭ ImageResourceInfo: Object

Represents image resource information.

example

const imageResource: ImageResourceInfo = {
	id: 'image://Logo',
	displayName: 'Logo',
	mimeType: 'image/png',
	thumbnail: '',
};

Type declaration

Name	Type	Description
`displayName?`	`string`	Gets or sets the resource display name.
`id`	`string`	Gets or sets the resource identifier.
`mimeType`	`string`	Gets or sets the MIME type.
`thumbnail?`	`string`	Gets or sets the thumbnail data.

MenuCssIcon

Ƭ MenuCssIcon: Object

Represents a CSS-based menu icon descriptor.

example

const icon: MenuCssIcon = { type: 'css', class: 'my-icon' };

Type declaration

Name	Type	Description
`class`	`string`	Gets or sets the CSS class name.
`type`	`"css"`	Gets or sets the icon type.

MenuIcon

Ƭ MenuIcon: MenuCssIcon

Represents a menu icon descriptor.

example

const icon: MenuIcon = { type: 'css', class: 'my-icon' };

NewReport

Ƭ NewReport: Object

Represents a new report to be created.

example

const report: NewReport = {
	displayName: 'New Report',
	reportType: 'Pageless',
};

Type declaration

Name	Type	Description
`displayName?`	`string`	Gets or sets the report display name.
`id?`	`string`	Gets or sets the report identifier.
`masterReportId?`	`string`	Gets or sets the master report identifier.
`reportType`	`ReportType`	Gets or sets the report layout type.

NewReportInfo

Ƭ NewReportInfo: Object

Represents the information required to create a new report.

example

const newReportInfo: NewReportInfo = {
	reportType: 'FPL',
	masterReportId: 'master-1',
};

Type declaration

Name	Type	Description
`masterReportId?`	`string`	Gets or sets the master report identifier.
`reportType`	`ReportType`	Gets or sets the report layout type.

NotificationLevel

Ƭ NotificationLevel: "info" | "warning" | "error"

Defines the supported notification severity levels.

remarks Accepted values:

'info': Informational notification.
'warning': Warning notification.
'error': Error notification.

example

const level: NotificationLevel = 'info';

NotificationsAPI

Ƭ NotificationsAPI: Object

Represents the notifications API.

example

const notifications = {} as NotificationsAPI;
notifications.info('Report saved');

Type declaration

Name	Type
`dismissAll`	() => `void`
`error`	(`caption`: `string`, `errorText?`: `string`) => `void`
`info`	(`caption`: `string`, `text?`: `string`) => `void`
`send`	(`level`: `NotificationLevel`, `caption`: `string`, `content?`: `string`) => `void`
`warning`	(`caption`: `string`, `warningText?`: `string`) => `void`

PanelsAPI

Ƭ PanelsAPI: Object

Represents the API for controlling the menu and sidebar panels.

example

const panels = {} as PanelsAPI;
panels.menu.open('file');
panels.sidebar.open('properties');

Type declaration

Name	Type	Description
`menu`	`PanelsMenuAPI`	Gets or sets the menu panel API.
`sidebar`	`PanelsSidebarAPI`	Gets or sets the sidebar panel API.

PanelsMenuAPI

Ƭ PanelsMenuAPI: Object

Represents the API for controlling the main menu panel.

example

const panels = {} as PanelsAPI;
panels.menu.open('file');
panels.menu.pin();

Type declaration

Name	Type
`close`	() => `void`
`open`	(`id`: `string`) => `void`
`pin`	() => `void`

PanelsSidebarAPI

Ƭ PanelsSidebarAPI: Object

Represents the API for controlling the sidebar panel.

example

const panels = {} as PanelsAPI;
panels.sidebar.open('properties');
panels.sidebar.close();

Type declaration

Name	Type
`close`	() => `void`
`open`	(`id`: `string`) => `void`

PropertyDescriptor

Ƭ PropertyDescriptor: Object

Represents a descriptor for a property grid item.

example

const descriptor: PropertyDescriptor = {
	category: 'Layout',
	label: 'Width',
	type: 'number',
	valuePath: 'Width',
	mode: 'simple',
};

Type declaration

Name	Type	Description
`category`	`string`	Gets or sets the property category.
`label`	`string`	Gets or sets the property label.
`mode`	`PropertyDisplayMode`	Gets or sets the display mode in which the editor is visible.
`type`	`string`	Gets or sets the editor type that will be rendered.
`valuePath`	`string`	Gets or sets the path to the property value within the bound object.

PropertyDisplayMode

Ƭ PropertyDisplayMode: "simple" | "advanced" | "both"

Represents the property display modes supported by the designer.

remarks Accepted values:

'simple': Show simple properties only.
'advanced': Show advanced properties only.
'both': Show both simple and advanced properties.

example

const mode: PropertyDisplayMode = 'simple';

Report

Ƭ Report: ReportLink | ReportDefinition

Represents a report reference by identifier or by definition.

remarks Provide either a ReportLink or a ReportDefinition.

example

const report: Report = { id: 'report-1', displayName: 'Sales Report' };

ReportDefinition

Ƭ ReportDefinition: Object

Represents a report definition payload.

example

const definition: ReportDefinition = {
	id: 'report-1',
	displayName: 'Sales Report',
	definition: {} as Rdl.Report,
};

Type declaration

Name	Type	Description
`definition`	`Report`	Gets or sets the RDLX report definition.
`displayName?`	`string`	Gets or sets the report display name.
`id?`	`string`	Gets or sets the report identifier.

ReportInfo

Ƭ ReportInfo: Object

Represents the current report information.

example

const info: ReportInfo = {
	id: 'report-1',
	displayName: 'Sales Report',
	definition: {} as Rdl.Report,
	isDirty: false,
};

Type declaration

Name	Type	Description
`definition`	`Report`	Gets or sets the RDLX report definition.
`displayName`	`string`	Gets or sets the report display name.
`id`	`string` \| `null`	Gets or sets the report identifier. `remarks` This value is `null` when the report has not been saved yet.
`isDirty`	`boolean`	Gets or sets a value indicating whether the report has unsaved changes.

ReportLink

Ƭ ReportLink: Object

Represents a reference to a report by identifier.

example

const link: ReportLink = {
	id: 'report-1',
	displayName: 'Sales Report',
};

Type declaration

Name	Type	Description
`displayName?`	`string`	Gets or sets the report display name.
`id`	`string`	Gets or sets the report identifier.

ReportResourceInfo

Ƭ ReportResourceInfo: Object

Represents report resource information.

example

const reportResource: ReportResourceInfo = {
	id: 'report://SalesReport',
	displayName: 'Sales Report',
};

Type declaration

Name	Type	Description
`displayName?`	`string`	Gets or sets the resource display name.
`id`	`string`	Gets or sets the resource identifier.

ReportType

Ƭ ReportType: "CPL" | "FPL" | "Pageless"

Represents the layout type of a report.

remarks Accepted values:

'CPL': Continuous Page Layout.
'FPL': Fixed Page Layout.
'Pageless': Pageless Report Layout.

example

const type: ReportType = 'CPL';

SaveAsResult

Ƭ SaveAsResult: Object

Represents the result of a save-as operation.

example

const result: SaveAsResult = {
	id: 'report-2',
	displayName: 'Sales Report Copy',
};

Type declaration

Name	Type	Description
`displayName?`	`string`	Gets or sets the report display name.
`id`	`string`	Gets or sets the new report identifier.

SaveNewReportInfo

Ƭ SaveNewReportInfo: Object

Represents the data required to save the current report as new.

example

const saveNewInfo: SaveNewReportInfo = {
	displayName: 'Sales Report Copy',
	definition: {} as Rdl.Report,
};

Type declaration

Name	Type	Description
`definition`	`Report`	Gets or sets the current RDLX report definition.
`displayName?`	`string`	Gets or sets the current report display name.
`id?`	`string`	Gets or sets the current report identifier.

SaveReportInfo

Ƭ SaveReportInfo: Object

Represents the data required to save the current report.

example

const saveInfo: SaveReportInfo = {
	id: 'report-1',
	displayName: 'Sales Report',
	definition: {} as Rdl.Report,
};

Type declaration

Name	Type	Description
`definition`	`Report`	Gets or sets the current RDLX report definition.
`displayName?`	`string`	Gets or sets the current report display name.
`id`	`string`	Gets or sets the current report identifier.

SaveResult

Ƭ SaveResult: Object

Represents the result of a save operation.

example

const result: SaveResult = { displayName: 'Sales Report' };

Type declaration

Name	Type	Description
`displayName?`	`string`	Gets or sets the report display name after saving.

StylesheetResourceInfo

Ƭ StylesheetResourceInfo: Object

Represents stylesheet resource information.

example

const stylesheetResource: StylesheetResourceInfo = {
	id: 'stylesheet://Light',
	content: {} as Rdl.Stylesheet,
};

Type declaration

Name	Type	Description
`content`	`Stylesheet`	Gets or sets the stylesheet content.
`id`	`string`	Gets or sets the resource identifier.

ThemeInfo

Ƭ ThemeInfo: Object

Represents a short theme descriptor for a report.

example

const theme: ThemeInfo = {
	Dark1: '#1b1b1b',
	Dark2: '#333333',
	Light1: '#ffffff',
	Light2: '#f3f3f3',
	Accent1: '#2b579a',
	Accent2: '#107c10',
	Accent3: '#5c2d91',
	Accent4: '#d13438',
	Accent5: '#ffb900',
	Accent6: '#0099bc',
	MajorFontFamily: 'Segoe UI',
	MinorFontFamily: 'Segoe UI',
};

Type declaration

Name	Type	Description
`Accent1`	`string`	Gets or sets the Accent1 theme color.
`Accent2`	`string`	Gets or sets the Accent2 theme color.
`Accent3`	`string`	Gets or sets the Accent3 theme color.
`Accent4`	`string`	Gets or sets the Accent4 theme color.
`Accent5`	`string`	Gets or sets the Accent5 theme color.
`Accent6`	`string`	Gets or sets the Accent6 theme color.
`Dark1`	`string`	Gets or sets the Dark1 theme color.
`Dark2`	`string`	Gets or sets the Dark2 theme color.
`Light1`	`string`	Gets or sets the Light1 theme color.
`Light2`	`string`	Gets or sets the Light2 theme color.
`MajorFontFamily`	`string`	Gets or sets the major text theme font family.
`MinorFontFamily`	`string`	Gets or sets the minor text theme font family.

ThemeResourceInfo

Ƭ ThemeResourceInfo: Object

Represents theme information.

example

const themeResource: ThemeResourceInfo = {
	id: 'theme://Default',
	displayName: 'Default',
	info: {} as ThemeInfo,
};

Type declaration

Name	Type	Description
`displayName?`	`string`	Gets or sets the resource display name.
`id`	`string`	Gets or sets the resource identifier.
`info`	`ThemeInfo`	Gets or sets the theme descriptor.

WhenDirty

Ƭ WhenDirty: "ask" | "override" | "throw"

Represents the behavior when the current report has unsaved changes.

remarks Accepted values:

'ask': Prompt for confirmation.
'override': Override the unsaved report.
'throw': Throw an error.

example

const behavior: WhenDirty = 'ask';

Variables

ColorThemes

• ColorThemes: Record<BuiltInColorTheme, ColorTheme>

Represents the built-in UI color themes.

example

const theme = ColorThemes.Default;

ReportDesigner

Namespace: ReportDesigner

Table of contents

Classes

Interfaces

Type aliases

Variables

Type aliases

ColorTheme

Type declaration

ColorThemeItem

ColorThemeShades

Type declaration

ColorThemeType

CustomInitTemplates

Type declaration

DataSetTemplate

Type declaration

DataSourceTemplate

Type declaration

DesignerAppBarControlItem

Type declaration

DesignerCommand

DesignerConfig

Type declaration

DocumentChangedEventArgs

Type declaration

EditorAPI

Type declaration

FontSet

ImageResourceInfo

Type declaration

MenuCssIcon

Type declaration

MenuIcon

NewReport

Type declaration

NewReportInfo

Type declaration

NotificationLevel

NotificationsAPI

Type declaration

PanelsAPI

Type declaration

PanelsMenuAPI

Type declaration

PanelsSidebarAPI

Type declaration

PropertyDescriptor

Type declaration

PropertyDisplayMode

Report

ReportDefinition

Type declaration

ReportInfo

Type declaration

ReportLink

Type declaration

ReportResourceInfo

Type declaration

ReportType

SaveAsResult

Type declaration

SaveNewReportInfo

Type declaration

SaveReportInfo

Type declaration

SaveResult

Type declaration

StylesheetResourceInfo

Type declaration

ThemeInfo

Type declaration

ThemeResourceInfo

Type declaration

WhenDirty

Variables

ColorThemes