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

# Class: PrintArea

> A print area.

## Example

``` js
  // Initialize a product with the "card.psd" template and a channel container.
  const productDefinition = {
      surfaces: `[{
          printAreas: [{
              name: "postcard",
              designFile: "card",
              containers: [{
                  name: "foil",
                  type: "texture",
                  texture: "texture.jpg"
              }]`
          }]
      }]
  };

  // Load the editor.
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
  // Get the product.
  let product = await editor.getProduct();
  // Get the fourth container in a print area.
  product.currentSurface.printAreas[0].getContainers()[3]
      // Update this container with new parameters.
      .update({
          name: "SilverTexture",
          texture: "silver-texture.jpg"
      });
```

## Extends

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

## Constructors

### Constructor

> **new PrintArea**(`rawPrintArea`, `surface`): `PrintArea`

#### Parameters

##### rawPrintArea

##### surface

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

#### Returns

`PrintArea`

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

***

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

#### Example

``` js
// Initialize a product with the "card.psd" template and two channel containers.
  const productDefinition = {
      surfaces: [{
          printAreas: [{
              name: "postcard",
              designFile: "card",
              containers: [
                  {
                      name: "foil",
                      type: "texture",
                      texture: "texture.jpg"
                  },
                  {
                      name: "spot",
                      type: "spotColor",
                      previewColor: "rgba(255,255,0,1)"
                  }
              ]
          }]
      }]
  };
```

## Methods

### getContainer()

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

Gets a container by its name.

#### Parameters

##### name

`string`

A name of the container.

#### Returns

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

#### Example

``` js
 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
 // Get the product.
 let product = await editor.getProduct();
 // Display a container with the "foil" name.
 console.log(product.currentSurface.printAreas[0].getContainer("foil"));
```

***

### getContainers()

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

Gets an array of all containers in the print area.

#### Returns

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

An array of all containers in the print area. By default, each print area has three basic containers in the editor: Background, Main, and Foreground.

#### Example

``` js
 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
 // Get the product.
 let product = await editor.getProduct();
 // Display obtained containers.
 console.log(product.currentSurface.printAreas[0].getContainers());
```

***

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

Adds a channel container to the print area.

#### Parameters

##### containerDefiniton

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

A container to add.

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

An instance of the added container.

#### Example

``` js
 // Initialize a product with the "card.psd" template.
 const productDefinition = {
     surfaces: ["card"]
 };

 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
 // Get the product.
 let product = await editor.getProduct();
 // Add a container to the print area.
 product.currentSurface.printAreas[0].addContainer({
     name: "foil",
     type: "texture",
     texture: "texture.jpg",
     // Expects a translated string for the FOIL key in translations.json.
     translationKey: "ObjectInspector.FOIL"
 });
```

***

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

Inserts a channel container into the print area.

#### Parameters

##### containerDefiniton

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

A container to add.

##### index

`string` \| `number`

A position of this container in the array of containers, either numeric or string value (a value greater than two). For example, `"3"`.

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

An instance of the inserted container.

#### Example

``` js 
  // Specify a container definition of a spot color.
  const containerDefinition = {
      name: "spot",
      type: "spotColor",
      previewColor: "rgba(0,255,0,1)"
  };
  const containerIndex = 4;

  // Load the editor.
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
  // Get the product.
  let product = await editor.getProduct();
  // Insert a container.
  product.currentSurface.printAreas[0].insertContainer(containerDefinition, containerIndex);
```

***

### removeContainer()

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

Removes a channel container from the print area.

#### Parameters

##### index

`number`

An index of the container to be removed (a value greater than two). Note that you cannot remove basic containers: Background, Main, or Foreground.

#### Returns

`void`

#### Example

``` js 
 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
 // Get the product.
 let product = await editor.getProduct();
 // Remove the fourth container.
 product.currentSurface.printAreas[0].removeContainer(3);
 // Display the remaining containers.
 console.log(product.currentSurface.printAreas[0].getContainers());
```

***

### moveContainer()

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

Moves a channel container to a new position in the array of containers.

#### Parameters

##### initialIndex

`number`

An index of the channel container to be moved (a value greater than two).

##### destinationIndex

`number`

A new index of the container to be moved (a value greater than two).

#### Returns

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

An instance of the moved container.

#### Example

``` js
  const containerIndex = 4;
  const destinationIndex = 3;

  // Load the editor.
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
  // Get the product.
  let product = await editor.getProduct();
  // Move a container.
  product.currentSurface.printAreas[0].moveContainer(containerIndex, destinationIndex);
```