@aurigma/ui-framework/docs/reference/classes/auwidgetdesigneditor.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Class: AuWidgetDesignEditor

A widget that is used to integrate Customer's Canvas 6 or Customer's Canvas 5 to the editor.

For details, you can refer to the [DesignEditor widget](https://customerscanvas.com/dev/editors/ui-framework/widgets/design-editor.html) topic.
```
{
  "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)}}"
    }
  ]
}
```

## Hierarchy

  ↳ [AuDesignEditor](audesigneditor.md)

  ↳ **AuWidgetDesignEditor**

## Implements

* [IWidget](../interfaces/iwidget.md)
* [IRestorableWidget](../interfaces/irestorablewidget.md)

## Index

### Properties

* [actionsFinished](auwidgetdesigneditor.md#actionsfinished)
* [actionsFinishedPromise](auwidgetdesigneditor.md#actionsfinishedpromise)
* [customButtonCb](auwidgetdesigneditor.md#custombuttoncb)
* [dpApi](auwidgetdesigneditor.md#dpapi)
* [isRestored](auwidgetdesigneditor.md#isrestored)
* [itemsData](auwidgetdesigneditor.md#itemsdata)
* [itemsOnSurfacesCount](auwidgetdesigneditor.md#itemsonsurfacescount)
* [modifiedItem](auwidgetdesigneditor.md#optional-modifieditem)
* [params](auwidgetdesigneditor.md#params)
* [selectedGroupBoundsData](auwidgetdesigneditor.md#optional-selectedgroupboundsdata)

### Accessors

* [allItems](auwidgetdesigneditor.md#allitems)
* [artLinkItems](auwidgetdesigneditor.md#artlinkitems)
* [boundsData](auwidgetdesigneditor.md#boundsdata)
* [currentSurfaceIndex](auwidgetdesigneditor.md#currentsurfaceindex)
* [currentSurfaceName](auwidgetdesigneditor.md#currentsurfacename)
* [depositPhotos](auwidgetdesigneditor.md#depositphotos)
* [finishProductDesignResult](auwidgetdesigneditor.md#finishproductdesignresult)
* [hiResUrls](auwidgetdesigneditor.md#hiresurls)
* [identifyingString](auwidgetdesigneditor.md#identifyingstring)
* [proofImageUrls](auwidgetdesigneditor.md#proofimageurls)
* [proofPdfUrls](auwidgetdesigneditor.md#proofpdfurls)
* [sourcedItems](auwidgetdesigneditor.md#sourceditems)
* [stateId](auwidgetdesigneditor.md#stateid)
* [surfaceCount](auwidgetdesigneditor.md#surfacecount)
* [tags](auwidgetdesigneditor.md#tags)
* [token](auwidgetdesigneditor.md#token)
* [userChanges](auwidgetdesigneditor.md#userchanges)
* [userId](auwidgetdesigneditor.md#userid)
* [variableData](auwidgetdesigneditor.md#variabledata)
* [violationData](auwidgetdesigneditor.md#violationdata)
* [violationWarningData](auwidgetdesigneditor.md#violationwarningdata)

### Methods

* [addSurface](auwidgetdesigneditor.md#addsurface)
* [addSurfaces](auwidgetdesigneditor.md#addsurfaces)
* [applyViewerSettings](auwidgetdesigneditor.md#applyviewersettings)
* [calculateIdentifyingString](auwidgetdesigneditor.md#calculateidentifyingstring)
* [checkInitDependenciesWidgets](auwidgetdesigneditor.md#checkinitdependencieswidgets)
* [colorToHex](auwidgetdesigneditor.md#colortohex)
* [countItemsOnSurfaces](auwidgetdesigneditor.md#countitemsonsurfaces)
* [createPrivateDesignFromPublicDesign](auwidgetdesigneditor.md#createprivatedesignfrompublicdesign)
* [createPrivateDesignFromResources](auwidgetdesigneditor.md#createprivatedesignfromresources)
* [exportWidgetData](auwidgetdesigneditor.md#exportwidgetdata)
* [finishProductDesign](auwidgetdesigneditor.md#finishproductdesign)
* [getAllItems](auwidgetdesigneditor.md#getallitems)
* [getArtLinkItems](auwidgetdesigneditor.md#getartlinkitems)
* [getDepositPhotos](auwidgetdesigneditor.md#getdepositphotos)
* [getDesignEditorItemModel](auwidgetdesigneditor.md#getdesigneditoritemmodel)
* [getEditor](auwidgetdesigneditor.md#geteditor)
* [getHiResImages](auwidgetdesigneditor.md#gethiresimages)
* [getItemText](auwidgetdesigneditor.md#getitemtext)
* [getItemsBySource](auwidgetdesigneditor.md#getitemsbysource)
* [getProduct](auwidgetdesigneditor.md#getproduct)
* [getProofImages](auwidgetdesigneditor.md#getproofimages)
* [getProofPdf](auwidgetdesigneditor.md#getproofpdf)
* [getSurfaceCount](auwidgetdesigneditor.md#getsurfacecount)
* [getTags](auwidgetdesigneditor.md#gettags)
* [getToken](auwidgetdesigneditor.md#gettoken)
* [getVariableData](auwidgetdesigneditor.md#getvariabledata)
* [getViolationData](auwidgetdesigneditor.md#getviolationdata)
* [initDpApi](auwidgetdesigneditor.md#initdpapi)
* [openAssetManagerFor](auwidgetdesigneditor.md#openassetmanagerfor)
* [openGalleryForBackground](auwidgetdesigneditor.md#opengalleryforbackground)
* [removeSurface](auwidgetdesigneditor.md#removesurface)
* [replaceInterpolationPlaceholder](auwidgetdesigneditor.md#replaceinterpolationplaceholder)
* [resetPreloaderState](auwidgetdesigneditor.md#resetpreloaderstate)
* [restoreWidgetFromData](auwidgetdesigneditor.md#restorewidgetfromdata)
* [saveProduct](auwidgetdesigneditor.md#saveproduct)
* [setTags](auwidgetdesigneditor.md#settags)
* [showPreloader](auwidgetdesigneditor.md#showpreloader)
* [showToast](auwidgetdesigneditor.md#showtoast)
* [swapSurfaces](auwidgetdesigneditor.md#swapsurfaces)
* [switchItemContent](auwidgetdesigneditor.md#switchitemcontent)
* [switchSurfaceTo](auwidgetdesigneditor.md#switchsurfaceto)
* [updateSurfaces](auwidgetdesigneditor.md#updatesurfaces)

## Properties

###  actionsFinished

• **actionsFinished**: *boolean* = false

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

___

###  actionsFinishedPromise

• **actionsFinishedPromise**: *Deferred‹string›* =  new Deferred<string>()

___

###  customButtonCb

• **customButtonCb**: *function*

#### Type declaration:

▸ (`sender`: string, `customData`: any): *void*

**Parameters:**

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

___

###  dpApi

• **dpApi**: *PrivateDesignProcessorApiClient*

___

###  isRestored

• **isRestored**: *boolean* = false

___

###  itemsData

• **itemsData**: *kvObject‹string, [CanvasItemData](canvasitemdata.md)›*

Personalization data for design elements.

___

###  itemsOnSurfacesCount

• **itemsOnSurfacesCount**: *Array‹number›* =  []

___

### `Optional` modifiedItem

• **modifiedItem**? : *[DesignEditorItemChanges](designeditoritemchanges.md)* =  null

Last modified item on the canvas.

___

###  params

• **params**: *[IDesignEditorDefinitionParams](../interfaces/idesigneditordefinitionparams.md)*

*Implementation of [IWidget](../interfaces/iwidget.md).[params](../interfaces/iwidget.md#optional-params)*

*Overrides [AuBaseWidget](aubasewidget.md).[params](aubasewidget.md#params)*

___

### `Optional` selectedGroupBoundsData

• **selectedGroupBoundsData**? : *[IBoundsData](../interfaces/iboundsdata.md)*

## Accessors

###  allItems

• **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 artLinkItems**(): *[IArtLinkItem](../interfaces/iartlinkitem.md)[]*

Gets all images added from ArtLink

**Returns:** *[IArtLinkItem](../interfaces/iartlinkitem.md)[]*

___

###  boundsData

• **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 currentSurfaceIndex**(): *number*

Gets the index of the current surface.

**Returns:** *number*

___

###  currentSurfaceName

• **get currentSurfaceName**(): *string*

Gets the name of the current surface.

**Returns:** *string*

___

###  depositPhotos

• **get depositPhotos**(): *IDepositPhotosItem[]*

Gets all images added from DepositPhotos.

**Returns:** *IDepositPhotosItem[]*

___

###  finishProductDesignResult

• **get finishProductDesignResult**(): *IFinishDesignResult*

Return last computed value by calculateIdentifyingString(string)

**Returns:** *IFinishDesignResult*

___

###  hiResUrls

• **get hiResUrls**(): *string[]*

Gets URLs that link to high-resolution print files.

**Returns:** *string[]*

___

###  identifyingString

• **get identifyingString**(): *string*

Return last computed value by calculateIdentifyingString(string)

**Returns:** *string*

___

###  proofImageUrls

• **get proofImageUrls**(): *string[][]*

Gets temporary URLs that link to proof images.

**Returns:** *string[][]*

___

###  proofPdfUrls

• **get proofPdfUrls**(): *string[]*

Gets temporary URLs that link to proof PDF images.

**Returns:** *string[]*

___

###  sourcedItems

• **get sourcedItems**(): *[ISourcedItemsInfo](../interfaces/isourceditemsinfo.md)*

Gets all items by source

**Returns:** *[ISourcedItemsInfo](../interfaces/isourceditemsinfo.md)*

___

###  stateId

• **get stateId**(): *string*

Gets the identifier of the last saved state file.

**Returns:** *string*

• **set stateId**(`value`: string): *void*

Sets the identifier of the last saved state file.

**Parameters:**

Name | Type |
------ | ------ |
`value` | string |

**Returns:** *void*

___

###  surfaceCount

• **get surfaceCount**(): *number*

Get the count of surfaces in product.

**Returns:** *number*

___

###  tags

• **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 token**(): *string*

Returns the current user token.

**Returns:** *string*

___

###  userChanges

• **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 userId**(): *string*

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

**Returns:** *string*

___

###  variableData

• **get variableData**(): *IVariable[]*

Gets all variable items in the product.

**Returns:** *IVariable[]*

An array of `ObjectModel.IVariable` elements.

___

###  violationData

• **get violationData**(): *IViolationWarningData[]*

**Returns:** *IViolationWarningData[]*

___

###  violationWarningData

• **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

▸ **addSurface**(`surface`: SurfaceTypes | IStateSurface, `position?`: number): *Promise‹Product›*

Adds a product surface.

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`surface` | SurfaceTypes &#124; IStateSurface | 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

▸ **addSurfaces**(`surfaces`: SurfaceTypes[] | IStateSurface, `position?`: number): *Promise‹Product›*

Adds product surfaces.

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`surfaces` | SurfaceTypes[] &#124; IStateSurface | Surfaces (pages) to add. |
`position?` | number | Surfaces position (zero-based, optional).  |

**Returns:** *Promise‹Product›*

___

###  applyViewerSettings

▸ **applyViewerSettings**(`params`: [IDesignEditorDefinitionSetViewerSettings](../interfaces/idesigneditordefinitionsetviewersettings.md)): *Promise‹any›*

Executes the `setViewerSettings` command.

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`params` | [IDesignEditorDefinitionSetViewerSettings](../interfaces/idesigneditordefinitionsetviewersettings.md) | The settings of the zoom level in the editor.  |

**Returns:** *Promise‹any›*

___

###  calculateIdentifyingString

▸ **calculateIdentifyingString**(`template`: string): *Promise‹string›*

Calculate identifyig string by template.

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`template` | string | template string  |

**Returns:** *Promise‹string›*

___

###  checkInitDependenciesWidgets

▸ **checkInitDependenciesWidgets**(): *string[]*

*Inherited from [AuBaseWidget](aubasewidget.md).[checkInitDependenciesWidgets](aubasewidget.md#checkinitdependencieswidgets)*

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

**Returns:** *string[]*

___

###  colorToHex

▸ **colorToHex**(`color`: Color): *Promise‹string›*

*Inherited from [AuDesignEditor](audesigneditor.md).[colorToHex](audesigneditor.md#colortohex)*

**Parameters:**

Name | Type |
------ | ------ |
`color` | Color |

**Returns:** *Promise‹string›*

___

###  countItemsOnSurfaces

▸ **countItemsOnSurfaces**(`onPrintArea`: boolean): *Promise‹void›*

Count items on surfaces and push counters to this.itemsOnSurfacesCount

**Parameters:**

Name | Type | Default | 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

▸ **createPrivateDesignFromPublicDesign**(`stateId`: string): *Promise‹string›*

**Parameters:**

Name | Type |
------ | ------ |
`stateId` | string |

**Returns:** *Promise‹string›*

___

###  createPrivateDesignFromResources

▸ **createPrivateDesignFromResources**(`resourceId`: string): *Promise‹string›*

**Parameters:**

Name | Type |
------ | ------ |
`resourceId` | string |

**Returns:** *Promise‹string›*

___

###  exportWidgetData

▸ **exportWidgetData**(`force`: boolean): *Promise‹CanvasData›*

*Implementation of [IRestorableWidget](../interfaces/irestorablewidget.md)*

Serializes the **DesignEditor** widget.

**Parameters:**

Name | 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.
```
{ stateId: string }
```

___

###  finishProductDesign

▸ **finishProductDesign**(`options?`: IFinishProductDesignOptions, `data?`: IVdpData): *Promise‹IFinishDesignResult›*

Call finishProductDesign from Editor.

**Parameters:**

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

**Returns:** *Promise‹IFinishDesignResult›*

___

###  getAllItems

▸ **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

▸ **getArtLinkItems**(): *Promise‹[IArtLinkItem](../interfaces/iartlinkitem.md)[]›*

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](../interfaces/iartlinkitem.md)[]›*

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

___

###  getDepositPhotos

▸ **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[]›*

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

___

###  getDesignEditorItemModel

▸ **getDesignEditorItemModel**(`item`: BaseTextItem | PlaceholderItem | ShapeItem): *Promise‹[DesignEditorItemChanges](designeditoritemchanges.md)›*

*Inherited from [AuDesignEditor](audesigneditor.md).[getDesignEditorItemModel](audesigneditor.md#getdesigneditoritemmodel)*

**Parameters:**

Name | Type |
------ | ------ |
`item` | BaseTextItem &#124; PlaceholderItem &#124; ShapeItem |

**Returns:** *Promise‹[DesignEditorItemChanges](designeditoritemchanges.md)›*

___

###  getEditor

▸ **getEditor**(): *Promise‹Editor›*

*Inherited from [AuDesignEditor](audesigneditor.md).[getEditor](audesigneditor.md#geteditor)*

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

**Returns:** *Promise‹Editor›*

___

###  getHiResImages

▸ **getHiResImages**(`width`: number, `height`: number, `stateId?`: string | object, `pregeneratePreviewImages`: boolean, `filename?`: string, `data?`: IVdpData, `options?`: [THiResImagesOptions](../README.md#thiresimagesoptions)): *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:**

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`width` | number | 800 | The maximum width of proof images. |
`height` | number | 800 | The maximum height of proof images. |
`stateId?` | string &#124; object | - | 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 | - | The name of the downloaded file |
`data?` | IVdpData | - | The VDP data. |
`options?` | [THiResImagesOptions](../README.md#thiresimagesoptions) | - | - |

**Returns:** *Promise‹string[]›*

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

___

###  getItemText

▸ **getItemText**(`itemName`: string): *Promise‹string›*

Returns the content of a text item.

**Parameters:**

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

**Returns:** *Promise‹string›*

___

###  getItemsBySource

▸ **getItemsBySource**(`sourceType`: string): *Promise‹[ISourcedItemsInfo](../interfaces/isourceditemsinfo.md)›*

**Parameters:**

Name | Type |
------ | ------ |
`sourceType` | string |

**Returns:** *Promise‹[ISourcedItemsInfo](../interfaces/isourceditemsinfo.md)›*

___

###  getProduct

▸ **getProduct**(): *Promise‹Product›*

*Inherited from [AuDesignEditor](audesigneditor.md).[getProduct](audesigneditor.md#getproduct)*

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

**Returns:** *Promise‹Product›*

___

###  getProofImages

▸ **getProofImages**(`width`: number | Object, `height`: number, `pregeneratePreviewImages`: boolean | object, `generateProductProof`: boolean, `generateLargePreviews`: boolean, `largePreviewMaxWidth`: number, `largePreviewMaxHeight`: number, `data?`: IVdpData, `options?`: [TProofImagesOptions](../README.md#tproofimagesoptions)): *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:**

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`width` | number &#124; 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 &#124; 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 | - | The VDP data. |
`options?` | [TProofImagesOptions](../README.md#tproofimagesoptions) | - | - |

**Returns:** *Promise‹string[]›*

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

___

###  getProofPdf

▸ **getProofPdf**(`data?`: IVdpData, `paramsObj`: IGetProofImagesOptions, `isForce`: boolean): *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:**

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

**Returns:** *Promise‹string[]›*

___

###  getSurfaceCount

▸ **getSurfaceCount**(): *Promise‹number›*

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

**Returns:** *Promise‹number›*

___

###  getTags

▸ **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

▸ **getToken**(): *Promise‹string›*

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

**Returns:** *Promise‹string›*

___

###  getVariableData

▸ **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

▸ **getViolationData**(): *Promise‹IViolationWarningData[]›*

Get violation data from DesignEditor.

**Returns:** *Promise‹IViolationWarningData[]›*

___

###  initDpApi

▸ **initDpApi**(): *void*

**Returns:** *void*

___

###  openAssetManagerFor

▸ **openAssetManagerFor**(`itemName`: string): *Promise‹void›*

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

**Parameters:**

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

**Returns:** *Promise‹void›*

___

###  openGalleryForBackground

▸ **openGalleryForBackground**(): *Promise‹void›*

Opens the Asset manager to select the background.

**Returns:** *Promise‹void›*

___

###  removeSurface

▸ **removeSurface**(`surfaceIndex`: number): *Promise‹Product›*

Removes a product surface.

**Parameters:**

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

**Returns:** *Promise‹Product›*

___

###  replaceInterpolationPlaceholder

▸ **replaceInterpolationPlaceholder**(): *Promise‹void›*

Replace interpolation to in-string placeholders (#3529 workaround)
 @ignore

**Returns:** *Promise‹void›*

___

###  resetPreloaderState

▸ **resetPreloaderState**(): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[resetPreloaderState](aubasewidget.md#resetpreloaderstate)*

**Returns:** *void*

___

###  restoreWidgetFromData

▸ **restoreWidgetFromData**(`widgetData`: CanvasData, `force`: boolean): *Promise‹void›*

Deserializes the **DesignEditor** widget.

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

**Parameters:**

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`widgetData` | CanvasData | - | 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›*

___

###  saveProduct

▸ **saveProduct**(`stateId?`: string, `data?`: IVdpData): *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:**

Name | 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

▸ **setTags**(`newTags`: any): *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:**

Name | 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

▸ **showPreloader**(`isPreload`: boolean, `message`: string | string[], `timeout`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showPreloader](aubasewidget.md#showpreloader)*

Shows a preloader.

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

**Parameters:**

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`isPreload` | boolean | - | If `true`, enables the preloader. |
`message` | string &#124; string[] |  [""] | A text message that appears next to the preloader.  |
`timeout` | number | 5 | - |

**Returns:** *void*

___

###  showToast

▸ **showToast**(`data?`: string, `duration?`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showToast](aubasewidget.md#showtoast)*

Shows a toast.

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

**Parameters:**

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

**Returns:** *void*

___

###  swapSurfaces

▸ **swapSurfaces**(`lhsSurfaceIndex`: number, `rhsSurfaceIndex`: number): *Promise‹Product›*

Swaps two surfaces (pages) in the product.

**Parameters:**

Name | 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

▸ **switchItemContent**(`model`: [SwitchItemContentModel](switchitemcontentmodel.md)): *Promise‹void›*

**Parameters:**

Name | Type |
------ | ------ |
`model` | [SwitchItemContentModel](switchitemcontentmodel.md) |

**Returns:** *Promise‹void›*

___

###  switchSurfaceTo

▸ **switchSurfaceTo**(`surfaceIndex`: number): *Promise‹Product›*

Changes product pages in Customer's Canvas.

**Parameters:**

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

**Returns:** *Promise‹Product›*

___

###  updateSurfaces

▸ **updateSurfaces**(`mode`: string, `update`: SurfaceTypes | IStateSurface | number): *Promise‹Product›*

Adds or removes a surface.

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`mode` | string | Update mode - 'add' or 'remove'. |
`update` | SurfaceTypes &#124; IStateSurface &#124; number | The index of a surface to be removed or a surface to be added (depends on the mode).  |

**Returns:** *Promise‹Product›*