# ReportDesigner.Designer

## Content

# Class: Designer

[ReportDesigner](../modules/ReportDesigner).Designer

Represents the report designer component.

**`remarks`**
Use this class to initialize the designer and interact with reports and UI APIs.

**`example`**
```ts
const designer = new Designer('#designer-host');
```

## Table of contents

### Constructors

- [constructor](ReportDesigner.Designer#constructor)

### Accessors

- [documentChanged](ReportDesigner.Designer#documentchanged)

### Methods

- [createReport](ReportDesigner.Designer#createreport)
- [destroy](ReportDesigner.Designer#destroy)
- [focus](ReportDesigner.Designer#focus)
- [getEditorAPI](ReportDesigner.Designer#geteditorapi)
- [getNotificationsAPI](ReportDesigner.Designer#getnotificationsapi)
- [getPanelsAPI](ReportDesigner.Designer#getpanelsapi)
- [getReport](ReportDesigner.Designer#getreport)
- [getReportPartsLibraries](ReportDesigner.Designer#getreportpartslibraries)
- [processCommand](ReportDesigner.Designer#processcommand)
- [resetUserPreferences](ReportDesigner.Designer#resetuserpreferences)
- [setActionHandlers](ReportDesigner.Designer#setactionhandlers)
- [setDataSourceTemplates](ReportDesigner.Designer#setdatasourcetemplates)
- [setMasterReport](ReportDesigner.Designer#setmasterreport)
- [setReport](ReportDesigner.Designer#setreport)
- [setReportPartsLibraries](ReportDesigner.Designer#setreportpartslibraries)
- [setResourceProvider](ReportDesigner.Designer#setresourceprovider)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new Designer**(`element`, `config?`)

Initializes a new instance of the [Designer](ReportDesigner.Designer) class within the specified container.

**`example`**
```ts
const designer = new Designer('#designer-host', { language: 'en' });
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `element` | `string` \| `object` \| `Element` | The host element for the designer. This can be a CSS selector string, a DOM element, or a jQuery object. |
| `config?` | [`DesignerConfig`](../modules/ReportDesigner#designerconfig) | The designer configuration settings. |

## Accessors

### <a id="documentchanged" name="documentchanged"></a> documentChanged

• `get` **documentChanged**(): [`Event`](../interfaces/Core.Event)<[`DocumentChangedEventArgs`](../modules/ReportDesigner#documentchangedeventargs)\>

Gets the event raised when the document changes.

#### Returns

[`Event`](../interfaces/Core.Event)<[`DocumentChangedEventArgs`](../modules/ReportDesigner#documentchangedeventargs)\>

## Methods

### <a id="createreport" name="createreport"></a> createReport

▸ **createReport**(`reportInfo`, `whenDirty?`): `Promise`<`void`\>

Creates a new report in the designer.

**`example`**
```ts
await designer.createReport({ reportType: 'CPL' });
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `reportInfo` | [`NewReportInfo`](../modules/ReportDesigner#newreportinfo) | The report information used to create the report. |
| `whenDirty?` | [`WhenDirty`](../modules/ReportDesigner#whendirty) | The behavior when there are unsaved changes. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the report is created.

___

### <a id="destroy" name="destroy"></a> destroy

▸ **destroy**(): `Promise`<`void`\>

Destroys the designer instance and releases resources.

**`example`**
```ts
await designer.destroy();
```

#### Returns

`Promise`<`void`\>

___

### <a id="focus" name="focus"></a> focus

▸ **focus**(): `void`

Moves focus to the designer.

**`example`**
```ts
designer.focus();
```

#### Returns

`void`

___

### <a id="geteditorapi" name="geteditorapi"></a> getEditorAPI

▸ **getEditorAPI**(): `Promise`<[`EditorAPI`](../modules/ReportDesigner#editorapi)\>

Gets the editor API for manipulating the report.

**`example`**
```ts
const editorApi = await designer.getEditorAPI();
editorApi.copy();
```

#### Returns

`Promise`<[`EditorAPI`](../modules/ReportDesigner#editorapi)\>

A promise that resolves to the editor API.

___

### <a id="getnotificationsapi" name="getnotificationsapi"></a> getNotificationsAPI

▸ **getNotificationsAPI**(): `Promise`<[`NotificationsAPI`](../modules/ReportDesigner#notificationsapi)\>

Gets the notifications API.

**`example`**
```ts
const notifications = await designer.getNotificationsAPI();
notifications.info('Report saved');
```

#### Returns

`Promise`<[`NotificationsAPI`](../modules/ReportDesigner#notificationsapi)\>

A promise that resolves to the notifications API.

___

### <a id="getpanelsapi" name="getpanelsapi"></a> getPanelsAPI

▸ **getPanelsAPI**(): `Promise`<[`PanelsAPI`](../modules/ReportDesigner#panelsapi)\>

Gets the panels API for the menu and sidebar.

**`example`**
```ts
const panels = await designer.getPanelsAPI();
panels.menu.open('file');
```

#### Returns

`Promise`<[`PanelsAPI`](../modules/ReportDesigner#panelsapi)\>

A promise that resolves to the panels API.

___

### <a id="getreport" name="getreport"></a> getReport

▸ **getReport**(): `Promise`<[`ReportInfo`](../modules/ReportDesigner#reportinfo)\>

Gets the current report information.

**`example`**
```ts
const info = await designer.getReport();
```

#### Returns

`Promise`<[`ReportInfo`](../modules/ReportDesigner#reportinfo)\>

A promise that resolves to the report information.

___

### <a id="getreportpartslibraries" name="getreportpartslibraries"></a> getReportPartsLibraries

▸ **getReportPartsLibraries**(): `Promise`<`ReportPartsLibrary`[]\>

Gets the list of available Report Parts libraries.

**`example`**
```ts
const libraries = await designer.getReportPartsLibraries();
```

#### Returns

`Promise`<`ReportPartsLibrary`[]\>

A promise that resolves to the list of libraries.

___

### <a id="processcommand" name="processcommand"></a> processCommand

▸ **processCommand**(`cmd`): `Promise`<`void`\>

Processes a designer command.

**`example`**
```ts
await designer.processCommand('save');
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `cmd` | [`DesignerCommand`](../modules/ReportDesigner#designercommand) | The command to process. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the command is processed.

___

### <a id="resetuserpreferences" name="resetuserpreferences"></a> resetUserPreferences

▸ **resetUserPreferences**(`config?`): `Promise`<`void`\>

Resets stored user preferences to designer defaults.

**`example`**
```ts
await designer.resetUserPreferences({ units: 'cm' });
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `config?` | `Partial`<[`DesignerConfig`](../modules/ReportDesigner#designerconfig)\> | Optional configuration values to apply while resetting preferences. |

#### Returns

`Promise`<`void`\>

___

### <a id="setactionhandlers" name="setactionhandlers"></a> setActionHandlers

▸ **setActionHandlers**(`actionHandlers`): `Promise`<`void`\>

Sets the action handlers for designer commands.

**`example`**
```ts
await designer.setActionHandlers({
	onSave: async (info) => ({ displayName: info.displayName }),
});
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `actionHandlers` | [`ActionHandlers`](../interfaces/ReportDesigner.ActionHandlers) | The action handlers to apply. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the handlers are set.

___

### <a id="setdatasourcetemplates" name="setdatasourcetemplates"></a> setDataSourceTemplates

▸ **setDataSourceTemplates**(`templates`): `Promise`<`void`\>

Sets the data source templates used by the data panel.

**`example`**
```ts
await designer.setDataSourceTemplates([]);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `templates` | [`DataSourceTemplate`](../modules/ReportDesigner#datasourcetemplate)[] | The data source templates. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the templates are set.

___

### <a id="setmasterreport" name="setmasterreport"></a> setMasterReport

▸ **setMasterReport**(`masterReportId`): `Promise`<`void`\>

Sets the master report by identifier.

**`example`**
```ts
await designer.setMasterReport('master-1');
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `masterReportId` | `string` | The master report identifier. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the master report is set.

___

### <a id="setreport" name="setreport"></a> setReport

▸ **setReport**(`report`, `whenDirty?`, `isDirtyInitial?`): `Promise`<`void`\>

Sets the current report in the designer.

**`example`**
```ts
await designer.setReport({ id: 'report-1', displayName: 'Sales Report' });
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `report` | [`Report`](../modules/ReportDesigner#report) | The report to load. |
| `whenDirty?` | [`WhenDirty`](../modules/ReportDesigner#whendirty) | The behavior when there are unsaved changes. |
| `isDirtyInitial?` | `boolean` | The initial value for the dirty state after load. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the report is loaded.

___

### <a id="setreportpartslibraries" name="setreportpartslibraries"></a> setReportPartsLibraries

▸ **setReportPartsLibraries**(`libraries`): `Promise`<`void`\>

Sets the list of available Report Parts libraries.

**`example`**
```ts
await designer.setReportPartsLibraries([]);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `libraries` | `ReportPartsLibrary`[] | The libraries to set. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the libraries are set.

___

### <a id="setresourceprovider" name="setresourceprovider"></a> setResourceProvider

▸ **setResourceProvider**(`resourceProvider`): `Promise`<`void`\>

Sets the resource provider used to resolve external resources.

**`example`**
```ts
await designer.setResourceProvider({
	getReportsList: async () => [],
});
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `resourceProvider` | `Partial`<[`ResourceProvider`](../interfaces/ReportDesigner.ResourceProvider)\> | The resource provider implementation. |

#### Returns

`Promise`<`void`\>

A promise that resolves when the provider is set.