@aurigma/ui-framework/docs/reference/interfaces/idesigneditordefinitionchangelayout.md

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

# Interface: IDesignEditorDefinitionChangeLayout

Provides properties to replace design elements in the editor.

```
{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "changeLayout": [{
      "discardChanges": false,
      "data": {
        "printAreas": [{
          "designFile": "{{'flyer/'+$['layout']._.props.design}}"
        }]
      }
    }]
  }
}
```

## Hierarchy

* [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md)

  ↳ **IDesignEditorDefinitionChangeLayout**

## Index

### Properties

* [after](idesigneditordefinitionchangelayout.md#optional-after)
* [autoCompile](idesigneditordefinitionchangelayout.md#optional-autocompile)
* [data](idesigneditordefinitionchangelayout.md#data)
* [dimesions](idesigneditordefinitionchangelayout.md#optional-dimesions)
* [discardChanges](idesigneditordefinitionchangelayout.md#optional-discardchanges)
* [executeOnce](idesigneditordefinitionchangelayout.md#optional-executeonce)
* [executeOnlyAfter](idesigneditordefinitionchangelayout.md#optional-executeonlyafter)
* [lock](idesigneditordefinitionchangelayout.md#optional-lock)
* [message](idesigneditordefinitionchangelayout.md#optional-message)
* [onExecuted](idesigneditordefinitionchangelayout.md#optional-onexecuted)
* [removeBackground](idesigneditordefinitionchangelayout.md#removebackground)
* [showPreloader](idesigneditordefinitionchangelayout.md#optional-showpreloader)
* [sourceSurfaceIndex](idesigneditordefinitionchangelayout.md#optional-sourcesurfaceindex)
* [surfaceIndex](idesigneditordefinitionchangelayout.md#optional-surfaceindex)
* [timeout](idesigneditordefinitionchangelayout.md#optional-timeout)
* [viewerSettings](idesigneditordefinitionchangelayout.md#optional-viewersettings)

## Properties

### `Optional` after

• **after**? : *string | string[]*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[after](idesigneditorcommanddefinition.md#optional-after)*

The next commands to be executed after this command completes.

___

### `Optional` autoCompile

• **autoCompile**? : *boolean*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[autoCompile](idesigneditorcommanddefinition.md#optional-autocompile)*

If `false`, action will never execute automatically.

___

###  data

• **data**: *any*

A product definition.

___

### `Optional` dimesions

• **dimesions**? : *SurfaceDimensionsValue*

If the layout and the currently loaded product have different dimensions, you can enable the size of either `config` or `canvas`, correspondingly.

___

### `Optional` discardChanges

• **discardChanges**? : *boolean*

If `true`, a design always loaded from scratch. if `false` or omitted, merges placeholders and text elements.

___

### `Optional` executeOnce

• **executeOnce**? : *boolean*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[executeOnce](idesigneditorcommanddefinition.md#optional-executeonce)*

If `true`, this command will be executed only once.
You can use it for `initial` command.
For example, we need to change surface depending on the option value.
We write for `initial` and for `updateSurfaces` the same productDefinition with $['option]._
And set `executeOnce = true` for `initial`. And initial will be executed only once.

___

### `Optional` executeOnlyAfter

• **executeOnlyAfter**? : *string[]*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[executeOnlyAfter](idesigneditorcommanddefinition.md#optional-executeonlyafter)*

Current command will be executed in a next update only after all commands executed in this param.
The same example from `executeOnce` param.
We need to execute `updateSurface` on all next updates, exclude the first one.
And we set `executeOnlyAfter = ['initial']` for `updateSurface` command.

___

### `Optional` lock

• **lock**? : *string[]*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[lock](idesigneditorcommanddefinition.md#optional-lock)*

Name of widgets that show preloader when command executed.

___

### `Optional` message

• **message**? : *string | string[]*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[message](idesigneditorcommanddefinition.md#optional-message)*

The message for preloader.

___

### `Optional` onExecuted

• **onExecuted**? : *Function | Function[]*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[onExecuted](idesigneditorcommanddefinition.md#optional-onexecuted)*

Functions that executed after command

___

###  removeBackground

• **removeBackground**: *boolean*

If `true`, removes the background image.

___

### `Optional` showPreloader

• **showPreloader**? : *boolean*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[showPreloader](idesigneditorcommanddefinition.md#optional-showpreloader)*

If `true`, displays the preloader while executing this command.

___

### `Optional` sourceSurfaceIndex

• **sourceSurfaceIndex**? : *number*

Specifies what page to be used as a layout if `data` refers to a multipage template.

___

### `Optional` surfaceIndex

• **surfaceIndex**? : *number*

The index of a surface that should be modified (the current surface if omitted).

___

### `Optional` timeout

• **timeout**? : *number*

*Inherited from [IDesignEditorCommandDefinition](idesigneditorcommanddefinition.md).[timeout](idesigneditorcommanddefinition.md#optional-timeout)*

The timeout for switching preloader messages.

___

### `Optional` viewerSettings

• **viewerSettings**? : *[IDesignEditorDefinitionSetViewerSettings](idesigneditordefinitionsetviewersettings.md)*

Zoom properties.