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

# au-widget-data-driven-editor/au-widget-data-driven-editor

> Represents a Data-Driven Editor widget,
> enabling users to fill out pre-configured forms and modify designs accordingly.

## Classes

### AuWidgetDataDrivenEditor

For details, you can refer to the [Data-Driven Editor widget](https://customerscanvas.com/dev/ui-framework/widgets/data-driven-editor.html) topic.
```json
{
  "widgets": [
    {
      "name": "dde",
      "type": "data-driven-editor",
      "params": {
        "config": {
          "design": {
            "designId": "68e74591f70c72b7ce14f889",
            "dataSetId": "68a24768aa00e6f0203564dc"
          },
          "settings": {
            "lang": "en",
            "allowManipulations": false,
            "itemsSnapLines": true
          },
          "renderer": {
            "watermarkEnabled": true,
            "watermarkOpacity": 0.5,
            "format": "jpeg"
          }
        }
      }
    }
  ]
}
```

#### Extends

- [`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget)

#### Implements

- [`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor)
- [`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget)

#### Properties

##### idStr

```ts
idStr: string;
```

Product ID string

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`idStr`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#idstr)

##### isValid

```ts
isValid: boolean;
```

`true` if form of data driven editor is valid

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`isValid`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#isvalid-1)

##### pdfUrl

```ts
pdfUrl: string;
```

URL for download PDF file

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`pdfUrl`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#pdfurl)

##### previewUrlLink

```ts
previewUrlLink: string;
```

URL preview image (First page)

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`previewUrlLink`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#previewurllink)

##### previewUrls

```ts
previewUrls: string[] = [];
```

URL's preview images

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`previewUrls`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#previewurls)

##### stateId

```ts
stateId: string;
```

Saved  product ID

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`stateId`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#stateid)

##### userId

```ts
userId: string;
```

Current user ID

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`userId`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#userid-1)

#### Methods

##### checkInitDependenciesWidgets()

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

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

###### Returns

`string`[]

###### Inherited from

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`checkInitDependenciesWidgets`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#checkinitdependencieswidgets-1)

##### createIdStr()

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

Create id string from values from data driven form

###### Returns

`Promise`\<`string`\>

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`createIdStr`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#createidstr)

##### createPdfPreview()

```ts
createPdfPreview(config?): Promise<string>;
```

Create link for download preview PDF file

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `config?` | [`IRendererConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#irendererconfig) | Render configuration |

###### Returns

`Promise`\<`string`\>

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`createPdfPreview`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#createpdfpreview)

##### createPreview()

```ts
createPreview(config?): Promise<string[]>;
```

Create preview images

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `config?` | [`IRendererConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#irendererconfig) | Render configuration |

###### Returns

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

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`createPreview`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#createpreview)

##### exportWidgetData()

```ts
exportWidgetData(force): Promise<Partial<IEditorConfig>>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `force` | `boolean` |

###### Returns

`Promise`\<`Partial`\<[`IEditorConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#ieditorconfig)\>\>

###### 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)

##### getFormData()

```ts
getFormData(config): Record<string, string>;
```

Allow to get current data of form

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `config` | [`IFormDataConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iformdataconfig) |

###### Returns

`Record`\<`string`, `string`\>

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`getFormData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#getformdata-1)

##### getInvalidFieldsNames()

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

Allows you to get the names of fields that have not been validated.

###### Returns

`string`[]

##### resetPreloaderState()

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

###### Returns

`void`

###### Inherited from

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`resetPreloaderState`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#resetpreloaderstate-1)

##### restoreWidgetFromData()

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | [`IEditorConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#ieditorconfig) |
| `force` | `boolean` |

###### 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(asNew): Promise<void>;
```

Saved or updated current product to private storage

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `asNew` | `boolean` |

###### Returns

`Promise`\<`void`\>

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`saveProduct`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#saveproduct)

##### setEditorConfig()

```ts
setEditorConfig(config): Promise<void>;
```

Sets the configuration of data driven editor

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `config` | [`IEditorConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#ieditorconfig) |

###### Returns

`Promise`\<`void`\>

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`setEditorConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#seteditorconfig-1)

##### setLang()

```ts
setLang(lang): void;
```

Sets the language of data driven editor

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `lang` | `string` |

###### Returns

`void`

##### setUserInfo()

```ts
setUserInfo(userInfo): void;
```

Allow to set user info

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `userInfo` | `Record`\<`string`, `string`\> |

###### Returns

`void`

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`setUserInfo`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#setuserinfo-1)

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

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`showPreloader`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#showpreloader-1)

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

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`showToast`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#showtoast-1)

##### ~~updateToken()~~

```ts
updateToken(token): void;
```

Update the token for data driven editor.

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `token` | `string` |

###### Returns

`void`

###### Deprecated

##### validate()

```ts
validate(): boolean;
```

Validate form in editor

###### Returns

`boolean`

###### Implementation of

[`IWidgetDataDrivenEditor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#iwidgetdatadriveneditor).[`validate`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces.md#validate-1)

## References

### widget

Renames and re-exports [AuWidgetDataDrivenEditor](#auwidgetdatadriveneditor)