Customizing Widgets on a Per-page Basis

Customer's Canvas allows for customizing the designer's look and feel in several ways. You can set up:

All the listed parameters are defined either for an entire web-to-print designer or for a single print product, but there is another way to set up the user interface. You can customize widgets in a different way for different pages.

The standard user interface of Customer's Canvas is shown in the following screenshot.

The interface of Customer's Canvas.

If you open the Text menu, you will notice that it contains the Add text and Rich text commands.

The Text menu.

Also, there is the Background element in the Object Inspector. The following image shows the Color Picker with the default palette.

The default color picker.

To find out how to set up these widgets for all your products and pages at once, refer to the Customizing User Interface example. Furthermore, what if you want your users to add texts and images to some pages, but not to other pages?

When you have a number of pages in a product, you can configure the Color Picker, the Object Inspector, and the Left Toolbar for those pages, using their names. For example, let us configure these widgets for the back side of the business card shown in the previous screenshot:

  • Enable the Add text and Image commands in the Left Toolbar.
  • Remove the Background element from the Object Inspector.
  • Disable the default palette in the Color Picker.
JavaScript
product: {
    // Define a product which contains two pages. Their names are "FRONT" and "BACK".
    surfaces: [
        {
            name: "FRONT",
            printAreas: [ 
                { designFile: "Card_FrontSide" }
            ]
        },
        {
            name: "BACK",
            printAreas: [
                { designFile: "Card_BackSide" }
            ]
        }
    ]
};

config: {
    // Set the configuration for the "BACK" page. The "FRONT" page keeps default settings.
    perSurfaceConfiguration: {
        "BACK": {
            widgets: {
                LeftToolbar: {
                    buttons: ["Text", "Image"]
                },
                ObjectInspector: {
                    bgItemEnabled: false
                },
                ColorPicker: {
                    showPaletteOnly: false,
                    // Define a one-row palette with two spot colors.
                    palette: [
                        [ "rgb(0, 0, 0)", "rgb(255, 255, 255)" ]
                    ]
                }
            }
        }
    }
};

// Load the editor.
CustomersCanvas.IframeApi.loadEditor(iframe, product, config);

As a result, for the BACK page, the editor appears as follows:

The interface of the web-to-print editor.

If the widgets are configured both for the editor and for a page, then the page settings override general settings.

See Also

Manual

IFrame API Reference