---
title: "au-widget-design-editor/au-widget-design-editor | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.au-widget-design-editor/"
---

# au-widget-design-editor/au-widget-design-editor

> A widget that is used to integrate Design Editor 5+.

## Classes

### AuWidgetDesignEditor

For details, you can refer to the [DesignEditor widget](https://customerscanvas.com/dev/ui-framework/widgets/design-editor.html) topic.
```json
{
  "widgets": [
    {
      "name": "editor",
      "type": "design-editor",
      "title": "Personalize your flyer",
      "params": {
        "initial": {
          "productDefinition": {
            "surfaces": `[{
              "width": 436.6,
              "height": 612.2
            }]`
          },
          "editorConfig": { "initialMode": "Advanced" }
        }
      }
    },
    {
      "name": "preview",
      "type": "image-carousel",
      "params": {
        "containerColor": "#ccc",
        "images": [{ "url": "{{$['editor'].proofImageUrls[0][0]}}" }]
      }
    }
  ],
  "steps": [
    {
      "name": "design",
      "title": "1. Design",
      "mainPanel": { "name":"editor" }
    },
    {
      "name": "approve",
      "title": "2. Preview",
      "mainPanel": {"name":"preview"},
      "onActivate": "{{#function $['editor'].getHiResImages(800,800)}}"
    }
  ]
}
```

#### Extends

- [`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor)

#### Implements

- [`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget)

#### Constructors

##### Constructor

```ts
new AuWidgetDesignEditor(): AuWidgetDesignEditor;
```

###### Returns

[`AuWidgetDesignEditor`](#auwidgetdesigneditor)

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`constructor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#constructor)

#### Properties

##### actionsFinished

```ts
actionsFinished: boolean = false;
```

This property is set to `true` when the editor enters the idle state.

##### actionsFinishedPromise

```ts
actionsFinishedPromise: Deferred<string>;
```

##### customButtonCb

```ts
customButtonCb: (sender, customData) => void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `sender` | `string` |
| `customData` | `any` |

###### Returns

`void`

##### dpApi

```ts
dpApi: PrivateDesignProcessorApiClient;
```

##### isRestored

```ts
isRestored: boolean = false;
```

##### itemsData

```ts
itemsData: kvObject<string, CanvasItemData> = {};
```

Personalization data for design elements.

##### itemsOnSurfacesCount

```ts
itemsOnSurfacesCount: number[] = [];
```

##### modifiedItem?

```ts
optional modifiedItem?: DesignEditorItemChanges = null;
```

Last modified item on the canvas.

##### params

```ts
params: IDesignEditorDefinitionParams;
```

Compiled widget configuration.

###### Overrides

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`params`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#params)

##### selectedGroupBoundsData?

```ts
optional selectedGroupBoundsData?: IBoundsData;
```

#### Accessors

##### allItems

###### Get Signature

```ts
get allItems(): Item[];
```

Gets all design elements in the product.

###### Returns

`Item`[]

An array of [`ObjectModel.Item`](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/item.html) elements.

##### artLinkItems

###### Get Signature

```ts
get artLinkItems(): IArtLinkItem[];
```

Gets all images added from ArtLink

###### Returns

[`IArtLinkItem`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#iartlinkitem)[]

##### boundsData

###### Get Signature

```ts
get boundsData(): Object;
```

Width, height, and upper-left corner coordinates of the bounding rectangle of all items in a group, in points.
For details, see the [`Calculating Area of Design Layers `](https://customerscanvas.com/dev/editors/iframe-api/howto/calculating-design-area.html) topic.

###### Returns

`Object`

##### currentSurfaceIndex

###### Get Signature

```ts
get currentSurfaceIndex(): number;
```

Gets the index of the current surface.

###### Returns

`number`

##### currentSurfaceName

###### Get Signature

```ts
get currentSurfaceName(): string;
```

Gets the name of the current surface.

###### Returns

`string`

##### depositPhotos

###### Get Signature

```ts
get depositPhotos(): IDepositPhotosItem[];
```

Gets all images added from DepositPhotos.

###### Returns

[`IDepositPhotosItem`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idepositphotositem)[]

##### finishProductDesignResult

###### Get Signature

```ts
get finishProductDesignResult(): IFinishDesignResult;
```

Return last computed value by calculateIdentifyingString(string)

###### Returns

`IFinishDesignResult`

##### hiResUrls

###### Get Signature

```ts
get hiResUrls(): string[];
```

Gets URLs that link to high-resolution print files.

###### Returns

`string`[]

##### identifyingString

###### Get Signature

```ts
get identifyingString(): string;
```

Return last computed value by calculateIdentifyingString(string)

###### Returns

`string`

##### proofImageUrls

###### Get Signature

```ts
get proofImageUrls(): string[][];
```

Gets temporary URLs that link to proof images.

###### Returns

`string`[][]

##### proofPdfUrls

###### Get Signature

```ts
get proofPdfUrls(): string[];
```

Gets temporary URLs that link to proof PDF images.

###### Returns

`string`[]

##### sourcedItems

###### Get Signature

```ts
get sourcedItems(): ISourcedItemsInfo;
```

Gets all items by source

###### Returns

[`ISourcedItemsInfo`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#isourceditemsinfo)

##### stateId

###### Get Signature

```ts
get stateId(): string;
```

Gets the identifier of the last saved state file.

###### Returns

`string`

###### Set Signature

```ts
set stateId(value): void;
```

Sets the identifier of the last saved state file.

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

##### surfaceCount

###### Get Signature

```ts
get surfaceCount(): number;
```

Get the count of surfaces in product.

###### Returns

`number`

##### tags

###### Get Signature

```ts
get tags(): ITagsDictionary;
```

Gets product tags.

###### Returns

`ITagsDictionary`

An [`ObjectModel.ITagsDictionary`](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/itagsdictionary.html).

##### token

###### Get Signature

```ts
get token(): string;
```

Returns the current user token.

###### Returns

`string`

##### userChanges

###### Get Signature

```ts
get userChanges(): IUserChanges;
```

Gets an object containing all changes made by the user when personalizing the product.

###### Returns

`IUserChanges`

An object representing [`IUserChanges`](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/editor.iuserchanges.html).

##### userId

###### Get Signature

```ts
get userId(): string;
```

Gets the identifier of the user who currently works with the editor.

###### Returns

`string`

##### variableData

###### Get Signature

```ts
get variableData(): IVariable[];
```

Gets all variable items in the product.

###### Returns

`IVariable`[]

An array of `ObjectModel.IVariable` elements.

##### violationData

###### Get Signature

```ts
get violationData(): IViolationWarningData[];
```

###### Returns

`IViolationWarningData`[]

##### violationWarningData

###### Get Signature

```ts
get violationWarningData(): IViolationWarningData[];
```

For items having preflight problems, it provides the item name, item type, corresponding surface name and index,
and states of violation warnings. This array allows for detecting products that have violations of the image resolution,
safety lines, regions, and text clipping.

###### Returns

`IViolationWarningData`[]

#### Methods

##### addSurface()

```ts
addSurface(surface, position?): Promise<Product>;
```

Adds a product surface.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `surface` | `any` | A surface (page) to add. |
| `position?` | `number` | Surface position (zero-based, optional). By default, this method adds pages to the end of the surface array. |

###### Returns

`Promise`\<`Product`\>

##### addSurfaces()

```ts
addSurfaces(surfaces, position?): Promise<Product>;
```

Adds product surfaces.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `surfaces` | `any` | Surfaces (pages) to add. |
| `position?` | `number` | Surfaces position (zero-based, optional). |

###### Returns

`Promise`\<`Product`\>

##### applyViewerSettings()

```ts
applyViewerSettings(params): Promise<any>;
```

Executes the `setViewerSettings` command.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `params` | [`IDesignEditorDefinitionSetViewerSettings`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditordefinitionsetviewersettings) | The settings of the zoom level in the editor. |

###### Returns

`Promise`\<`any`\>

##### calculateIdentifyingString()

```ts
calculateIdentifyingString(template): Promise<string>;
```

Calculate identifyig string by template.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `template` | `string` | template string |

###### Returns

`Promise`\<`string`\>

##### checkInitDependenciesWidgets()

```ts
checkInitDependenciesWidgets(): string[];
```

Returns an array of widget names, due to which the current widget cannot receive parameters.

###### Returns

`string`[]

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`checkInitDependenciesWidgets`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#checkinitdependencieswidgets)

##### colorToHex()

```ts
colorToHex(color): Promise<string>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `color` | `Color` |

###### Returns

`Promise`\<`string`\>

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`colorToHex`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#colortohex)

##### countItemsOnSurfaces()

```ts
countItemsOnSurfaces(onPrintArea?): Promise<void>;
```

Count items on surfaces and push counters to this.itemsOnSurfacesCount

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `onPrintArea` | `boolean` | `false` | boolean flag showing if we should count only items laying inside print areas; working only with DE 6.3.0+ |

###### Returns

`Promise`\<`void`\>

##### createPrivateDesignFromPublicDesign()

```ts
createPrivateDesignFromPublicDesign(stateId): Promise<string>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `stateId` | `string` |

###### Returns

`Promise`\<`string`\>

##### createPrivateDesignFromResources()

```ts
createPrivateDesignFromResources(resourceId): Promise<string>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `resourceId` | `string` |

###### Returns

`Promise`\<`string`\>

##### exportWidgetData()

```ts
exportWidgetData(force): Promise<CanvasData>;
```

Serializes the **DesignEditor** widget.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `force` | `boolean` | If `true`, saves the product to a state file and returns its ID. If `false`, only returns the identifier of a previously saved state. |

###### Returns

`Promise`\<`CanvasData`\>

A promise with the `stateId` property.
```json
{ stateId: string }
```

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`exportWidgetData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#exportwidgetdata)

##### finishProductDesign()

```ts
finishProductDesign(options?, data?): Promise<any>;
```

Call finishProductDesign from Editor.

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `options?` | `IFinishProductDesignOptions` |
| `data?` | `IVdpData` |

###### Returns

`Promise`\<`any`\>

##### getAllItems()

```ts
getAllItems(): Promise<Item[]>;
```

Gets all design elements in the product.

###### Returns

`Promise`\<`Item`[]\>

A promise with an array of [`ObjectModel.Item`](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/item.html) elements.

##### getArtLinkItems()

```ts
getArtLinkItems(): Promise<IArtLinkItem[]>;
```

Gets info about images added from ArtLink.

For more details, you can refer to the topic describing how Customers's Canvas works with [Depositphotos Assets](https://customerscanvas.com/dev/editors/iframe-api/howto/asset-sources/depositphotos.html).

###### Returns

`Promise`\<[`IArtLinkItem`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#iartlinkitem)[]\>

A promise with an array of names and values of the variable fields.

##### getDepositPhotos()

```ts
getDepositPhotos(): Promise<IDepositPhotosItem[]>;
```

Gets info about images added from DepositPhotos.

For more details, you can refer to the topic describing how Customers's Canvas works with [Depositphotos Assets](https://customerscanvas.com/dev/editors/iframe-api/howto/asset-sources/depositphotos.html).

###### Returns

`Promise`\<[`IDepositPhotosItem`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idepositphotositem)[]\>

A promise with an array of names and values of the variable fields.

##### getDesignEditorItemModel()

```ts
getDesignEditorItemModel(item): Promise<DesignEditorItemChanges>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `any` |

###### Returns

`Promise`\<`DesignEditorItemChanges`\>

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`getDesignEditorItemModel`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#getdesigneditoritemmodel)

##### getEditor()

```ts
getEditor(): Promise<Editor>;
```

Returns a promise with an instance of the `DesignEditor`.

###### Returns

`Promise`\<`Editor`\>

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`getEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#geteditor)

##### getHiResImages()

```ts
getHiResImages(
   width?, 
   height?, 
   stateId?, 
   pregeneratePreviewImages?, 
   filename?, 
   data?, 
options?): Promise<string[]>;
```

Saves a state, renders print files and proof images, and returns links to the print files.

This method is equivalent to [editor.finishProductDesign](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/editor.ifinishdesignresult.html) from the IFrame API.

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `width` | `number` | `800` | The maximum width of proof images. |
| `height` | `number` | `800` | The maximum height of proof images. |
| `stateId?` | `string` \| `object` | `undefined` | A custom state file name without an extension, up to 36 symbols length. |
| `pregeneratePreviewImages?` | `boolean` | `false` | If `true`, this method starts generating preview images in the background when called. In this case, the resulting links to these images will be obtained before the image generation is complete. If `false`, this method only updates links to these images and starts generating the preview images when a request to download them is received. |
| `filename?` | `string` | `undefined` | The name of the downloaded file |
| `data?` | `IVdpData` | `undefined` | The VDP data. |
| `options?` | [`THiResImagesOptions`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.interfaces.rendering-options.md#thiresimagesoptions) | `undefined` | - |

###### Returns

`Promise`\<`string`[]\>

A promise with an array of URLs that link to the rendered print files.

##### getItemsBySource()

```ts
getItemsBySource(sourceType): Promise<ISourcedItemsInfo>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `sourceType` | `string` |

###### Returns

`Promise`\<[`ISourcedItemsInfo`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#isourceditemsinfo)\>

##### getItemText()

```ts
getItemText(itemName): Promise<string>;
```

Returns the content of a text item.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `itemName` | `string` | The name of the text item. |

###### Returns

`Promise`\<`string`\>

##### getProduct()

```ts
getProduct(): Promise<Product>;
```

Returns a promise with the product opened in the `DesignEditor`.

###### Returns

`Promise`\<`Product`\>

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`getProduct`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#getproduct)

##### getProofImages()

```ts
getProofImages(
   width?, 
   height?, 
   pregeneratePreviewImages?, 
   generateProductProof?, 
   generateLargePreviews?, 
   largePreviewMaxWidth?, 
   largePreviewMaxHeight?, 
   data?, 
options?): Promise<string[]>;
```

Renders proof images and returns URLs that link to these images.

This method is equivalent to [editor.getProofImages](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/editor.iproofresult.html) in the IFrame API.

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `width` | `number` \| `Object` | `800` | If number, defines the maximum width of proof images. If object, contains parameters for the `editor.getProofImages()` method; in this case, other parameters will be ignored. |
| `height` | `number` | `800` | The maximum height of proof images. |
| `pregeneratePreviewImages` | `boolean` \| `object` | `true` | If `true`, this method starts generating preview images in the background when called. In this case, the resulting links to these images will be returned before the image generation is complete. If `false`, this method only returns links to these images and starts generating the preview images when a request to download them is received. |
| `generateProductProof` | `boolean` | `false` | If `true`, this method renders previews of all product pages to a multi-page PDF file. |
| `generateLargePreviews` | `boolean` | `false` | If `true`, this method renders real-size preview images. |
| `largePreviewMaxWidth` | `number` | `1000` | The maximum width of large preview images. |
| `largePreviewMaxHeight` | `number` | `1000` | The maximum height of large preview images. |
| `data?` | `IVdpData` | `undefined` | The VDP data. |
| `options?` | [`TProofImagesOptions`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.interfaces.rendering-options.md#tproofimagesoptions) | `undefined` | - |

###### Returns

`Promise`\<`string`[]\>

A promise with an array of temporary links to proof images.

##### getProofPdf()

```ts
getProofPdf(
   data?, 
   paramsObj?, 
isForce?): Promise<string[]>;
```

Renders proof PDF images and returns URLs that link to these images.

This method is equivalent to [editor.getProofImages](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/editor.igetproofimagesoptions.html) in the IFrame API when the param `generateProductProof` is `true`.

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `data?` | `IVdpData` | `undefined` | The VDP data. |
| `paramsObj?` | `IGetProofImagesOptions` | `{}` | - |
| `isForce?` | `boolean` | `false` | - |

###### Returns

`Promise`\<`string`[]\>

##### getSurfaceCount()

```ts
getSurfaceCount(): Promise<number>;
```

Get the surface count from product and set `surfaceCount` prop value

###### Returns

`Promise`\<`number`\>

##### getTags()

```ts
getTags(): Promise<ITagsDictionary>;
```

Gets product tags.

###### Returns

`Promise`\<`ITagsDictionary`\>

A promise with an [`ObjectModel.ITagsDictionary`](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/itagsdictionary.html).

##### getToken()

```ts
getToken(): Promise<string>;
```

Generates the current user token based on the `token` property.

###### Returns

`Promise`\<`string`\>

##### getVariableData()

```ts
getVariableData(): Promise<IVariable[]>;
```

Detects what particular variable fields are used in the design and returns an array of such fields.

This method is equivalent to [product.getVariableItems](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/product.html#methods) from the IFrame API.

###### Returns

`Promise`\<`IVariable`[]\>

A promise with an array of names and values of the variable fields.

##### getViolationData()

```ts
getViolationData(): Promise<IViolationWarningData[]>;
```

Get violation data from DesignEditor.

###### Returns

`Promise`\<`IViolationWarningData`[]\>

##### initDpApi()

```ts
initDpApi(): void;
```

###### Returns

`void`

##### openAssetManagerFor()

```ts
openAssetManagerFor(itemName): Promise<void>;
```

Opens the Asset manager to select the content of an image placeholder.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `itemName` | `string` | The name of the placeholder item. |

###### Returns

`Promise`\<`void`\>

##### openGalleryForBackground()

```ts
openGalleryForBackground(): Promise<void>;
```

Opens the Asset manager to select the background.

###### Returns

`Promise`\<`void`\>

##### removeSurface()

```ts
removeSurface(surfaceIndex): Promise<Product>;
```

Removes a product surface.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `surfaceIndex` | `number` | A zero-based index of the surface which you want to remove. |

###### Returns

`Promise`\<`Product`\>

##### resetPreloaderState()

```ts
resetPreloaderState(): void;
```

###### Returns

`void`

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`resetPreloaderState`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#resetpreloaderstate)

##### restoreWidgetFromData()

```ts
restoreWidgetFromData(widgetData, force?): Promise<void>;
```

Deserializes the **DesignEditor** widget.

In a common scenario, the multistep editor restores a canvas when it is initialized.

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `widgetData` | `CanvasData` | `undefined` | An object containing the `stateId` property. |
| `force` | `boolean` | `false` | If `true`, gets a product definition from the state file and then executes the `initial` command. If `false`, it does nothing. |

###### Returns

`Promise`\<`void`\>

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`restoreWidgetFromData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#restorewidgetfromdata)

##### saveProduct()

```ts
saveProduct(stateId?, data?): Promise<ISaveProductResult>;
```

Saves a product.

This method is equivalent to [editor.saveProduct](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/editor.isaveproductresult.html) from the IFrame API.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `stateId?` | `string` | A custom state file name without an extension, up to 36 symbols length. |
| `data?` | `IVdpData` | The VDP data. |

###### Returns

`Promise`\<`ISaveProductResult`\>

A promise with [identifiers](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/editor.isaveproductresult.html) of the user and the saved state file.

##### setTags()

```ts
setTags(newTags): Promise<void>;
```

Sets product tags.

This method is equivalent to [product.setTags](https://customerscanvas.com/dev/editors/iframe-api/howto/tags.html) from the IFrame API.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `newTags` | `any` | The tags that you want to specify for the product. These tags will reset existing product tags. |

###### Returns

`Promise`\<`void`\>

##### showPreloader()

```ts
showPreloader(
   isPreload, 
   message?, 
   timeout?): void;
```

Shows a preloader.

```
"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]
```

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `isPreload` | `boolean` | `undefined` | If `true`, enables the preloader. |
| `message` | `string` \| `string`[] | `...` | A text message that appears next to the preloader. |
| `timeout` | `number` | `5` | - |

###### Returns

`void`

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`showPreloader`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#showpreloader)

##### showToast()

```ts
showToast(data?, duration?): void;
```

Shows a toast.

```
return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data?` | `string` | A string message to display in the toast. |
| `duration?` | `number` | Defines how long to show the toast for. |

###### Returns

`void`

###### Inherited from

[`AuDesignEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#abstract-audesigneditor).[`showToast`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.AuDesignEditor.md#showtoast)

##### swapSurfaces()

```ts
swapSurfaces(lhsSurfaceIndex, rhsSurfaceIndex): Promise<Product>;
```

Swaps two surfaces (pages) in the product.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `lhsSurfaceIndex` | `number` | Index of the first surface (page) to swap. |
| `rhsSurfaceIndex` | `number` | Index of the second surface (page) to swap. |

###### Returns

`Promise`\<`Product`\>

##### switchItemContent()

```ts
switchItemContent(model): Promise<void>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `model` | `SwitchItemContentModel` |

###### Returns

`Promise`\<`void`\>

##### switchSurfaceTo()

```ts
switchSurfaceTo(surfaceIndex): Promise<Product>;
```

Changes product pages in Customer's Canvas.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `surfaceIndex` | `number` | A zero-based index of the surface on which you want to switch. |

###### Returns

`Promise`\<`Product`\>

##### updateSurfaces()

```ts
updateSurfaces(mode, update): Promise<Product>;
```

Adds or removes a surface.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `mode` | `string` | Update mode - 'add' or 'remove'. |
| `update` | `any` | The index of a surface to be removed or a surface to be added (depends on the mode). |

###### Returns

`Promise`\<`Product`\>

## References

### widget

Renames and re-exports [AuWidgetDesignEditor](#auwidgetdesigneditor)