--- title: "au-widget-data-driven-editor/interfaces | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-data-driven-editor.interfaces/" --- # au-widget-data-driven-editor/interfaces > Describes the Data-Driven Editor element and its methods. ## Interfaces ### IDataDrivenEditor #### Extends - `HTMLElement` #### Properties ##### $isValid ```ts $isValid: Observable; ``` Observable for the validity state of the editor. #### Methods ##### getFormData() ```ts getFormData(config): Record; ``` Retrieves the filled-in form data. ###### Parameters | Parameter | Type | | ------ | ------ | | `config` | [`IFormDataConfig`](#iformdataconfig) | ###### Returns `Record`\<`string`, `string`\> ##### getIdString() ```ts getIdString(): Promise; ``` Gets the identification string. ###### Returns `Promise`\<`string`\> ##### getInvalidFieldsNames() ```ts getInvalidFieldsNames(): string[]; ``` Allows you to get the names of fields that have not been validated. ###### Returns `string`[] ##### getPdfPreview() ```ts getPdfPreview(config): Promise; ``` Gets a PDF preview. ###### Parameters | Parameter | Type | | ------ | ------ | | `config` | `Partial`\<[`IRendererConfig`](#irendererconfig)\> | ###### Returns `Promise`\<`string`\> ##### getPreview() ```ts getPreview( designId, width, height): Promise; ``` Gets preview images for the specified design. ###### Parameters | Parameter | Type | | ------ | ------ | | `designId` | `string` | | `width` | `number` | | `height` | `number` | ###### Returns `Promise`\<`string`[]\> ##### getPreviewLink() ```ts getPreviewLink( designId, width, height): Promise; ``` Gets a preview link for the specified design. ###### Parameters | Parameter | Type | | ------ | ------ | | `designId` | `string` | | `width` | `number` | | `height` | `number` | ###### Returns `Promise`\<`string`\> ##### save() ```ts save(asNew?): Promise; ``` Saves the design. If `asNew` is `true`, creates a new private design. ###### Parameters | Parameter | Type | | ------ | ------ | | `asNew?` | `boolean` | ###### Returns `Promise`\<`string`\> ##### setEditorConfig() ```ts setEditorConfig(config): Promise; ``` Sets the editor configuration. ###### Parameters | Parameter | Type | | ------ | ------ | | `config` | [`IEditorConfig`](#ieditorconfig) | ###### Returns `Promise`\<`void`\> ##### setLang() ```ts setLang(lang): void; ``` Sets the editor language. ###### Parameters | Parameter | Type | | ------ | ------ | | `lang` | `string` | ###### Returns `void` ##### setUserInfo() ```ts setUserInfo(userInfo): void; ``` Sets user information and updates the form and design. ###### Parameters | Parameter | Type | | ------ | ------ | | `userInfo` | `Record`\<`string`, `string`\> | ###### Returns `void` ##### updateToken() ```ts updateToken(token): void; ``` Updates the access token. ###### Parameters | Parameter | Type | | ------ | ------ | | `token` | `string` | ###### Returns `void` ##### validate() ```ts validate(): boolean; ``` Validates the form. ###### Returns `boolean` *** ### IDesignConfig Describes the design configuration for the editor. #### Properties ##### dataSetId? ```ts optional dataSetId?: string; ``` Dataset identifier in Asset Storage. ##### designId ```ts designId: string; ``` Design identifier in Asset Storage. ##### designPath ```ts designPath: string; ``` Path to the design file in Asset Storage. ##### isPrivateDesign ```ts isPrivateDesign: boolean; ``` Flag for private design. *** ### IEditorAccess Describes access credentials for the editor. #### Properties ##### tenantId ```ts tenantId: string; ``` Tenant identifier. ##### token ```ts token: string; ``` Access token. ##### userId ```ts userId: string; ``` User identifier. *** ### IEditorAPI Describes the API endpoints for the editor services. #### Properties ##### assetProcessor ```ts assetProcessor: string; ``` Asset Processor service URL. ##### assetStorage ```ts assetStorage: string; ``` Asset Storage service URL. ##### backOffice ```ts backOffice: string; ``` BackOffice URL. ##### designAtoms ```ts designAtoms: string; ``` Design Atoms service URL. *** ### IEditorConfig Provides the main configuration for the Data-Driven Editor. Example: ```json { "access": { "tenantId": "tenant1", "userId": "user1", "token": "token1" }, "design": { "designId": "design1", "dataSetId": "dataset1" }, "api": { "designAtoms": "https://api.example.com/design-atoms" }, "settings": { "lang": "en", "allowManipulations": false }, "renderer": { "width": 800, "height": 600, "format": "Pdf" } } ``` #### Properties ##### access ```ts access: Partial; ``` Access credentials for the editor. ##### api ```ts api: IEditorAPI; ``` API endpoints for the editor services. ##### design ```ts design: Partial; ``` Design configuration. ##### preview ```ts preview: object; ``` Preview image dimensions. ###### height ```ts height: number; ``` ###### width ```ts width: number; ``` ##### renderer ```ts renderer: IRendererConfig; ``` Rendering configuration. ##### settings? ```ts optional settings?: IEditorSettings; ``` Editor settings. ##### translation? ```ts optional translation?: Record; ``` Interface translation configuration. ##### userInfo? ```ts optional userInfo?: Record; ``` User information for automatic form filling. *** ### IEditorSettings Describes the settings for the Data-Driven Editor. #### Properties ##### allowManipulations? ```ts optional allowManipulations?: boolean; ``` Enables/disables manipulation of design elements. Default: `false`. ##### itemsSnapLines? ```ts optional itemsSnapLines?: boolean; ``` Enables/disables snapping of design elements to other elements. Default: `false`. ##### lang? ```ts optional lang?: string; ``` Language used in the editor. Default: `"en"`. ##### printAreaSnapLines? ```ts optional printAreaSnapLines?: boolean; ``` Enables/disables snapping to print areas. ##### regionSnapLines? ```ts optional regionSnapLines?: boolean; ``` Enables/disables snapping to regions. ##### safetyLinesSnapLines? ```ts optional safetyLinesSnapLines?: boolean; ``` Enables/disables snapping to safety lines. ##### symbols? ```ts optional symbols?: string[]; ``` List of symbols available for insertion. ##### violationWarningsSettings? ```ts optional violationWarningsSettings?: IViolationServiceConfiguration; ``` Configuration for violation warnings. *** ### IFormDataConfig Describes the configuration for retrieving form data. #### Properties ##### readImageAs? ```ts optional readImageAs?: "image-source-id"; ``` How to read images in the form data. ##### readInvalidValues? ```ts optional readInvalidValues?: boolean; ``` Whether to include invalid values in the result. *** ### IRendererConfig Describes the rendering configuration for the final files. #### Properties ##### format ```ts format: FormatTypes; ``` Format of the output file. ##### height ```ts height: number; ``` Height of the output file. ##### interpolationMode ```ts interpolationMode: InterpolationModes; ``` Interpolation mode for the output file. ##### safetyLinesEnabled ```ts safetyLinesEnabled: boolean; ``` Whether to render safety lines. ##### watermarkEnabled ```ts watermarkEnabled: boolean; ``` Whether to enable watermark. ##### watermarkOpacity ```ts watermarkOpacity: number; ``` Opacity of the watermark (0 to 1). ##### watermarkRepeat ```ts watermarkRepeat: boolean; ``` Whether to repeat the watermark. ##### width ```ts width: number; ``` Width of the output file. *** ### IWidgetDataDrivenEditor Describes the API and properties of the Data-Driven Editor widget. #### Properties ##### idStr ```ts idStr: string; ``` Identification string. ##### isValid ```ts isValid: boolean; ``` Whether the form is filled out correctly. ##### pdfUrl ```ts pdfUrl: string; ``` URL to download the rendered PDF. ##### previewUrlLink ```ts previewUrlLink: string; ``` URL of the first page preview image. ##### previewUrls ```ts previewUrls: string[]; ``` URLs of preview images. ##### stateId ```ts stateId: string; ``` The private design state ID. ##### userId ```ts userId: string; ``` The current user ID. #### Methods ##### createIdStr() ```ts createIdStr(): Promise; ``` Creates an identification string. ###### Returns `Promise`\<`string`\> ##### createPdfPreview() ```ts createPdfPreview(config): Promise; ``` Creates a PDF preview and returns a download URL. ###### Parameters | Parameter | Type | | ------ | ------ | | `config` | [`IRendererConfig`](#irendererconfig) | ###### Returns `Promise`\<`string`\> ##### createPreview() ```ts createPreview(config): Promise; ``` Creates preview images and returns their URLs. ###### Parameters | Parameter | Type | | ------ | ------ | | `config` | [`IRendererConfig`](#irendererconfig) | ###### Returns `Promise`\<`string`[]\> ##### getFormData() ```ts getFormData(config): Record; ``` Retrieves the filled-in form data. ###### Parameters | Parameter | Type | | ------ | ------ | | `config` | [`IFormDataConfig`](#iformdataconfig) | ###### Returns `Record`\<`string`, `string`\> ##### saveProduct() ```ts saveProduct(asNew?): Promise; ``` Saves the edited design. If `asNew` is `true`, creates a new private design. ###### Parameters | Parameter | Type | | ------ | ------ | | `asNew?` | `boolean` | ###### Returns `Promise`\<`void`\> ##### setEditorConfig() ```ts setEditorConfig(config): void; ``` Sets the editor configuration. ###### Parameters | Parameter | Type | | ------ | ------ | | `config` | [`IEditorConfig`](#ieditorconfig) | ###### Returns `void` ##### setUserInfo() ```ts setUserInfo(userInfo): void; ``` Sets user information and updates the form and design. ###### Parameters | Parameter | Type | | ------ | ------ | | `userInfo` | `Record`\<`string`, `string`\> | ###### Returns `void` ##### validate() ```ts validate(): boolean; ``` Validates the form. ###### Returns `boolean` *** ### IWidgetDataDrivenParams Provides configuration for the Data-Driven Editor widget. You can use this interface to define the **params** of the widget. ```json { "name": "dd-editor", "type": "data-driven-editor", "params": { "config": { "access": { "tenantId": "tenant1", "userId": "user1", "token": "token1" }, "design": { "designId": "design1", "dataSetId": "dataset1" }, "api": { "designAtoms": "https://api.example.com/design-atoms" }, "settings": { "lang": "en", "allowManipulations": false } }, "onReady": "{{#function \$['dd-editor'].setUserInfo({ 'Name': 'John' }) }}" } } ``` #### Properties ##### config ```ts config: IEditorConfig; ``` Configuration object for the Data-Driven Editor. ##### onReady ```ts onReady: Function | Function[]; ``` Function or array of functions to be called when the editor is ready. ## Type Aliases ### FormatTypes ```ts type FormatTypes = "Jpeg" | "Png" | "Tiff" | "Pdf"; ``` Supported output file formats. *** ### InterpolationModes ```ts type InterpolationModes = | "High" | "Medium" | "Low" | "NearestNeighbour" | "Linear" | "Cubic" | "Supersampling" | "Lanczos" | "Anisotropic4" | "Anisotropic9" | "Lanczos3"; ``` Supported interpolation modes for rendering.