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

# au-widget-design-editor/Commands/change-design-variant-command

> A command that changes product design variants.

## Classes

### ChangeDesignVariantCommand

Here, we open the selected design variant.
```json
{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "changeDesignVariant": [{
        "designVariant": "{{ $['pim-design-selector']._ }}"
    }]
  }
}
```

#### Extends

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

#### Methods

##### execute()

```ts
execute(params): Promise<void>;
```

Executes this command.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `params` | [`IChangeDesignVariantCommandDefinition`](#ichangedesignvariantcommanddefinition) | Parameters for the command. |

###### Returns

`Promise`\<`void`\>

###### Overrides

[`DesignEditorWidgetCommand`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.command.md#abstract-designeditorwidgetcommand).[`execute`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.command.md#execute)

## Interfaces

### IChangeDesignVariantCommandDefinition

Provides the `after` property to support a queue of commands.

The following example illustrates how you can run the `setViewerSettings` command after `setPrintArea` completes.
```json
{
  "widgets": [{
    "type": "design-editor",
    "name": "editor",
    "params": {
      "inital": { ... },
      "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
      "setPrintArea": {
        "data": {
          "designFile": "{{$['flyer-gallery']._.name}}"
        },
        "after": [
          "setViewerSettings"
        ]
      }
    }
  }]
}
```

#### Extends

- `Omit`\<`IUpdateSurfaceOptionsByDefinition`, `"definition"`\>.[`IDesignEditorCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditorcommanddefinition)

#### Indexable

```ts
[key: string]: IUpdateSurfaceOptionsByDefinition
```

```ts
[key: number]: IUpdateSurfaceOptionsByDefinition
```

```ts
[key: symbol]: IUpdateSurfaceOptionsByDefinition
```

#### Properties

##### after?

```ts
optional after?: string | string[];
```

The next commands to be executed after this command completes.

###### Inherited from

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

##### autoCompile?

```ts
optional autoCompile?: boolean;
```

If `false`, action will never execute automatically.

###### Inherited from

[`IDesignEditorCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditorcommanddefinition).[`autoCompile`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#autocompile-1)

##### definition

```ts
definition: IChangeDesignVariantProductDefinition;
```

##### designVariant

```ts
designVariant: ProductInformationDesign;
```

##### executeOnce?

```ts
optional executeOnce?: boolean;
```

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.

###### Inherited from

[`IDesignEditorCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditorcommanddefinition).[`executeOnce`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#executeonce-1)

##### executeOnlyAfter?

```ts
optional executeOnlyAfter?: string[];
```

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.

###### Inherited from

[`IDesignEditorCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditorcommanddefinition).[`executeOnlyAfter`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#executeonlyafter-1)

##### lock?

```ts
optional lock?: string[];
```

Name of widgets that show preloader when command executed.

###### Inherited from

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

##### message?

```ts
optional message?: string | string[];
```

The message for preloader.

###### Inherited from

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

##### onExecuted?

```ts
optional onExecuted?: Function | Function[];
```

Functions that executed after command

###### Inherited from

[`IDesignEditorCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditorcommanddefinition).[`onExecuted`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#onexecuted-1)

##### showPreloader?

```ts
optional showPreloader?: boolean;
```

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

###### Inherited from

[`IDesignEditorCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditorcommanddefinition).[`showPreloader`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#showpreloader-1)

##### timeout?

```ts
optional timeout?: number;
```

The timeout for switching preloader messages.

###### Inherited from

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

***

### IChangeDesignVariantProductDefinition

#### Extends

- `Omit`\<`IProductDefinition`, `"surfaces"`\>

#### Indexable

```ts
[key: string]: IProductDefinition
```

```ts
[key: number]: IProductDefinition
```

```ts
[key: symbol]: IProductDefinition
```

#### Properties

##### surfaces

```ts
surfaces: IChangeDesignVariantSurfaceFromState[];
```

***

### IChangeDesignVariantSurfaceFromState

#### Extends

- `Omit`\<`ISurfaceFromState`, `"stateId"`\>

#### Indexable

```ts
[key: string]: ISurfaceFromState
```

```ts
[key: number]: ISurfaceFromState
```

```ts
[key: symbol]: ISurfaceFromState
```

#### Properties

##### designVariant

```ts
designVariant: ProductInformationDesign;
```