---
title: "Class: Surface | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Surface/"
---

# Class: Surface

> A surface representing a product page.

## Example

``` js
const surface = {
  width: 200, height: 150,
  printAreas: [{
      bounds: { x:0, y:0, width: 200, height: 150}
  }],
  mockup: {
      down: "envelope"
  },
  previewMockups: `[{ down: "previewEnvelope" }]` 
}
```

## Extends

- [`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.ModelComponent.md)

## Constructors

### Constructor

> **new Surface**(`rawSurface`, `parentProduct`, `context`): `Surface`

#### Parameters

##### rawSurface

##### parentProduct

[`Product`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md)

##### context

[`IContext`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IContext.md)

#### Returns

`Surface`

#### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.ModelComponent.md).[`constructor`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.ModelComponent.md#constructor)

## Properties

### id

> **id**: `string`

A unique identifier.

#### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.ModelComponent.md).[`id`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.ModelComponent.md#id)

***

### name

> **name**: `string`

The item name.

#### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.ModelComponent.md).[`name`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.ModelComponent.md#name)

***

### width

> **width**: `number`

A surface width.

***

### height

> **height**: `number`

A surface height.

***

### mockup

> **mockup**: [`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.SurfaceMockup.md)

A surface mockup.

***

### previewMockups

> **previewMockups**: [`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.SurfaceMockup.md)[]

An array of preview mockups.

***

### printAreas

> **printAreas**: [`PrintArea`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md)[]

An array of print areas.

***

### containers

> **containers**: [`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)[] = `[]`

An array of channel containers for print embellishments.

## Methods

### setMockup()

> **setMockup**(`mockup`, `previewMockups?`, `options?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Product`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md)\>

Sets a new surface mockup and returns a new product instance containing the changed surface.

#### Parameters

##### mockup

[`IMockupTemplate`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IMockupTemplate.md)

A mockup to set.

##### previewMockups?

[`IMockupTemplate`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IMockupTemplate.md)[]

A collection of preview mockups for proof images.

##### options?

Additional configuration of mockups. In the current implementation, you can only pass `options.updateRevertData`. This option defines whether this mockup should be reverted or not when the user reverts product changes. If `true`, the new mockup is stored as one to restore when the product is reverted. Otherwise, the previously stored mockup is restored on a product revert. The default value is `true`.

###### updateRevertData?

`boolean`

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Product`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md)\>

A new product instance containing the changed surface.

#### Example

``` js
const mockup = { 
  up: "envelopeMockup"
}

let product = await editor.getProduct();
product = await product.surfaces[0].setMockup(mockup)
         .catch(error => console.error("Failed to set up the mockup: ", error));
```

***

### changeBackground()

> **changeBackground**(`data`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`ShapeItem`\>

#### Parameters

##### data

`any`

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`ShapeItem`\>

***

### setPrintAreas()

> **setPrintAreas**(`printAreas`, `options?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Product`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md)\>

Sets a new print area for the surface and returns a new product instance containing the changed surface.

#### Parameters

##### printAreas

([`IPrintAreaTemplate`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IPrintAreaTemplate.md) \| [`IPrintAreaDefinition`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IPrintAreaDefinition.md))[]

New print areas.

##### options?

[`ISetPrintAreasOptions`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.ISetPrintAreasOptions.md)

Additional configuration settings for the print areas.

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Product`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md)\>

A new product instance containing the changed surface.

#### Remarks

By default, `setPrintAreas` moves only texts and image placeholders to new positions and drops other design elements. Note that this method changes the content of placeholders having the same layer names on the current Surface and in the new layout. To maintain the rest elements, set the `replaceAll` option to `true`. In this case, the rest of placeholders take content in a random order according to their type. If the old layout had more placeholders than the new layout, then extra placeholders are removed.

If the current print area and the new print area have different sizes, you can specify whether to update the surface size to match the new print area by using the `updateSurfaceSize` option.

#### Example

``` js
  const newPrintAreas = `[{ designFile: "stamp" }]`;
  const options = { 
      replaceAll: true,
      preserveSafetyLines: false,
      updateSurfaceSize: true
  };
  let produt = await editor.getProduct();
  product = product.surfaces[0].setPrintAreas(newPrintAreas, options);
      .catch(error => console.error("Failed to set up the print area: ", error));
```

***

### getContainer()

> **getContainer**(`name`): [`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)

#### Parameters

##### name

`string`

#### Returns

[`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)

***

### getContainers()

> **getContainers**(): [`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)[]

#### Returns

[`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)[]

***

### addContainer()

> **addContainer**(`containerDefiniton`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)\>

#### Parameters

##### containerDefiniton

[`IChannelContainerDefinition`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IChannelContainerDefinition.md)

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)\>

***

### insertContainer()

> **insertContainer**(`containerDefiniton`, `index`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)\>

#### Parameters

##### containerDefiniton

[`IChannelContainerDefinition`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IChannelContainerDefinition.md)

##### index

`string` \| `number`

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)\>

***

### removeContainer()

> **removeContainer**(`index`): `void`

#### Parameters

##### index

`number`

#### Returns

`void`

***

### moveContainer()

> **moveContainer**(`initialIndex`, `destinationIndex`): [`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)

#### Parameters

##### initialIndex

`number`

##### destinationIndex

`number`

#### Returns

[`Container`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md)

***

### insertItem()

> **insertItem**(`item`, `index?`, `containerIndex?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`CCBaseItem`\>

#### Parameters

##### item

`CCBaseItem`

##### index?

`number`

##### containerIndex?

`number`

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`CCBaseItem`\>