View as Markdown
You’re viewing outdated documentation. View the latest Customer’s Canvas On-Premises documentation.

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

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

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.

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

      Names of design items and new properties that will be applied to them.