---
title: "IItemsData Interface"
canonical: https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.iitemsdata.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/).

# IItemsData Interface

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
A structure defining the personalization data. For details about customizable properties and design items to which they can be applied, you can refer to the [Personalized Rendering](https://customerscanvas.com/docs/cc6/web-api-for-rendering.htm.md) topic.
  
This interface allows you to apply a single set of variable data to the product. As an alternative, you can apply multiple instances of this interface when using [dataSet](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.idataset.htm.md).
 
 - example
     - ```
const productDefinition = { surfaces: ["badge"] };
// Define new properties of the Name item.
const data = {
    itemsData: {
        "Name": {
            text: "Cristopher Bennett",
            color: "rgb(48, 194, 255)"
        },
        placeholders: {
            "Phone": "1-555-123-4567"
        }
    }
};
// Load the editor.
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
    .then(editor => {
        // Personalize the loaded product.
        editor.finishProductDesign(null, data)
        // Output links to the resulting print files.
        .then(result => console.log(result.hiResOutputUrls));
    });
```
 
### Indexable
 
[itemName: string ]:  [IItemData](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iitemdata.htm.md)
   
Defines new properties for design elements on all product surfaces.
  
This interface allows you to apply a single set of variable data to the product. As an alternative, you can apply multiple instances of this interface when using [dataSet](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.idataset.htm.md).
 
 - example
     - ```
const data = {
    itemsData: {
        // In the loaded product change the "Name" and "Position".
        "Name": {
            text: "Cristopher Bennett",
            color: "rgb(48, 194, 255)"
        },
        "Position": {
            text: "designer"
        }
    }
};
```
 
## Properties
 
### Optional placeholders
 
placeholders: object

Defines the new content for in-string and interpolation placeholders on all product surfaces.
  
 - example
     - ```
const data = {
    itemsData: {
        // In the loaded product change the "Phone" and "Order" placeholders.
        placeholders: {
            "Phone": "1-555-123-4567",
            "Order": "1234"
        }
    }
};
```

#### placeholders declaration
 
- #####  [placeholderName: string ]:  string 
   
    Names of in-string and interpolation placeholders and new content that will be applied to them.
 
### Optional surfaces
 
surfaces: object

Defines new properties for design elements on certain surfaces.
  
 - example
     - ```
const data = {
    itemsData: {
        surfaces: {
            "surface_0": { // On the surface with name "surface_0"
                "Name": {  // Change the "Name".
                    text: "Cristopher Bennett",
                    color: "rgb(48, 194, 255)"
                }
            }
        }
    }
};
```

#### surfaces declaration
 
- #####  [surfaceName: string ]:  object 
   
    The name of the surface whose elements will be personalized.

    - #####  [itemName: string ]:  [IItemData](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iitemdata.htm.md) 
   
        Names of design items and new properties that will be applied to them.