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

# Class: Container

> A container for design elements.

## Remarks

Print areas have three basic containers in the editor: Background, Main, and Foreground. You can also add channel containers implementing spot colors and textures in Design Editor.

## Example

``` js
const productDefinition = {
  surfaces: [{
      printAreas: [{
          designFile: "texture",
          containers: [
              {
                  name: "foil",
                  type: "texture",
                  texture: "texture.jpg"
              },
              {
                  name: "spot",
                  type: "spotColor",
                  previewColor: "rgba(255,255,0,1)"
              }]
      }]
  }]
};
```

## Extends

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

## Implements

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

## Constructors

### Constructor

> **new Container**(`rawContainer`, `context`): `Container`

#### Parameters

##### rawContainer

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

##### context

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

#### Returns

`Container`

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

#### Implementation of

[`IChannelContainerDefinition`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IChannelContainerDefinition.md).[`name`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IChannelContainerDefinition.md#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)

***

### NAME

> `readonly` `static` **NAME**: `"Background"` = `"Background"`

The name of the background container.

***

### NAME

> `readonly` `static` **NAME**: `"Main"` = `"Main"`

The name of the main container.

***

### NAME

> `readonly` `static` **NAME**: `"Foreground"` = `"Foreground"`

The name of the foreground container.

***

### type

> **type**: [`ChannelContainerType`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/enums/Enums.ChannelContainerType.md)

A type of the channel container, either texture or spot color.

#### Implementation of

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

***

### translationKey?

> `optional` **translationKey?**: `string`

The translation key of the channel tab caption in the Object Inspector. The corresponding string should be defined in the `~/Configuration/translations.json` file.

#### Implementation of

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

***

### previewColor?

> `optional` **previewColor?**: `string`

An RGB color representing a spot color on the canvas and proof images.

#### Implementation of

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

***

### texture?

> `optional` **texture?**: `string`

A texture image used for rendering elements of the container on the canvas and proof images. This value is relative to the `~/assets/helpers/` folder.

#### Implementation of

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

***

### outputColor?

> `optional` **outputColor?**: `string`

The color that is used in hires. This could be, for example, black rgb or cmyk color, or some specific Spot color.

#### Implementation of

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

## Methods

### update()

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

Updates a channel container with new parameters.

#### Parameters

##### params

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

A new container definition. Note, you cannot change the container type.

#### Returns

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

An instance of the updated container.

#### Example

``` js
  // Initialize a product with the "card.psd" template and a channel container.
  const productDefinition = {
      surfaces: `[{
          printAreas: [{
              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.
  product.currentSurface.printAreas[0].getContainers()[3]
      // Update this container with new parameters.
      .update({
          name: "SilverTexture",
          texture: "silver-texture.jpg",
          // Expects a translated string for the SILVER key in translations.json.
          translationKey: "ObjectInspector.SILVER"
      });
```