---
title: "IStateSurface Interface"
canonical: https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.istatesurface.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# IStateSurface Interface

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
A structure holding a state file name and a surface name or a surface index.
  
 - example
     - ```
editor.getProduct()
    // When we get the product.
    .then(function(product) {
        // Add the third page from the state file.
        product.addSurface(
            { 
                stateId: "3c040958-bfa8-4a3e-b3af-cff9257e7fa1",
                surface: "2"
            }
        )
        // If there was an error while adding the page to the product.
        .catch(function (error) {
            console.error("Adding surfaces failed with exception: ", error);
        });
    });
```
 
## Properties
 
### stateId
 
stateId: string

The name of a state file.
 
### Optional surface
 
surface: string

Either name or index of a surface to be added to your product. The surface indexes start from `0`. By default, the first page is added to a product.