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

# Interface: ISurfacesFromFolder

> A structure holding settings to create a set of template-based surfaces.

## Remarks

This interface uses PSD templates that are grouped by folders. For details, see the [Loading Pages from a Folder](https://customerscanvas.com/dev/editors/iframe-api/product-definition/multiple-pages.html) topic.

## Example

``` js
const productDefinition = {
   surfaces: {
       // Get surfaces from the folder.
       designFolder: "myphotoBook",
       // Name surfaces as "Page 1", "Page 2", and so on.
       name: "Page {0}",
       // Get mockups from the folder.
       mockupFolder: { up: "photoBookMockups" }
   }
};
```

## Extends

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

## Properties

### name?

> `optional` **name?**: `string`

A name of a surface (a page) in the product.

#### Remarks

In multipage products, it allows you to use a name mask for product surfaces. If this string contains the `{0}` placeholder, it will be replaced with a page number, starting from `1`. For example, `name: "Page {0}"` specifies the following page captions in the Bottom toolbar: `Page 1`, `Page 2`, and so on.

#### Inherited from

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

***

### foldingLines?

> `optional` **foldingLines?**: [`IFoldingLine`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IFoldingLine.md)[]

A collection of folding lines defined in the surface (page).

#### Inherited from

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

***

### spines?

> `optional` **spines?**: [`ISpine`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.ISpine.md)[]

A collection of spines defined in the surface (page).

#### Inherited from

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

***

### bgFoldingMode?

> `optional` **bgFoldingMode?**: [`IBgFoldingModeParams`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IBgFoldingModeParams.md)

Parameters of the background folding mode.

#### Inherited from

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

***

### proofImage?

> `optional` **proofImage?**: [`IProofImage`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IProofImage.md)

Settings of proof images.

#### Inherited from

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

***

### names?

> `optional` **names?**: `string`[]

An array of surface names. The number of array elements must match the number of surfaces. Otherwise, the default page captions appear in the Bottom toolbar.

#### Inherited from

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

***

### designFolder?

> `optional` **designFolder?**: `string`

A name of the folder containing PSD page templates of the multipage product.

***

### mockupFolder?

> `optional` **mockupFolder?**: [`IMockupFolders`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IMockupFolders.md)

A name of the folder containing mockup files.

***

### previewMockupFolder?

> `optional` **previewMockupFolder?**: `string` \| [`IMockupFolders`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IMockupFolders.md)

A name of the folder containing preview mockup files.