Customizing User Interface

In this topic, we will discuss how to customize the Customer's Canvas user interface. The Customization Parameters paragraph describes parameters that change the appearance of the user interface, and the Customization Sample paragraph shows how you can use some of these parameters. To find out how you can configure the user interface in a different way for different pages, refer to the Customizing Widgets on a Per-page Basis topic.

Customization Parameters

As noted in the Simple and Advanced Web-to-Print Editor Modes topic, the web-to-print editor has two modes: simple and advanced. In this topic, we presume that the editor is in the advanced mode. You can switch to this mode by clicking the Switch to advanced editing button or set this mode as default via the initialMode parameter in clientConfig.json.

JavaScript
"initialMode": "Advanced";

Also, you can change the mode via the IConfiguration interface.

JavaScript
configuration = {
    initialMode: "Advanced"
};

The web-to-print editor can be customized mainly by hiding and displaying various interface elements. Let us review interface elements and the corresponding configuration parameters. User interface elements are visually grouped into widgets. Later in the topic, we will introduce and illustrate each widget with all its elements. The following screenshot shows where each widget is located in the interface.

The web-to-print editor in the advanced mode.

Now that you have an idea of how widgets work, let us start with customizable parameters. In the following screenshots, each interface element is tagged with the related parameter, one per widget. Most parameters reviewed in this topic are boolean: true means that the corresponding user interface element is displayed; false hides the element. All parameters can be set in the ~\Configuration\clientConfig.json file and through the IConfiguration interface. You can refer to the clientConfig topic describing these parameters, their possible values, and the structure of clientConfig.json.

Left Toolbar

The Left Toolbar contains the Add text, Rich text, Image, Line, Rectangle, Ellipse, QR code, and Barcode buttons, which allow you to add new elements to the design. The buttons are grouped into the following menus:

  • The Text menu

    Left toolbar properties of the Text menu.

  • The Shape menu

    Left toolbar properties of the Shape menu.

  • The Barcode menu

    Left toolbar properties of the Barcode menu.

For example, to disable the Image button, set the imageButtonEnabled property to false.

Also, you can use the IButton interface to create the Left Toolbar from buttons. You can add predefined and custom buttons to the toolbar. These are the following predefined buttons: Text, RichText, Image, Background, QrCode, LinearBarcode, Line, Rectangle, Ellipse, Layout, and ToggleObjectInspector. The configuration sample shows how you can create the toolbar using these buttons. The gallery example shows how you can define custom gallery buttons.

If you add ToggleObjectInspector to your Left Toolbar, it enables the Layers button to hide the Object Inspector.

The Layers button hides the Object Inspector.

Note

If you define the buttons array in the LeftToolbar object, then all properties, which enable and disable buttons, are ignored.

Object Inspector

Every design element is located on a separate layer in Customer's Canvas. The Object Inspector contains the list of all the layers. To change the z-order of layers, drag their handles. You can change the z-order for all the layers, except for the background and foreground layers. To disable the handles, set the dndEnabled property of ObjectInspector to false. To hide the ObjectInspector, set the isHidden property to true.

Object Inspector properties.

Note

When you set dndEnabled to false, only the handles do not show. However, you can still change the z-order through corresponding Item Menu commands. To prohibit changing the z-order completely, you should disable these commands in the Item Menu too. Use the changeZOrderEnabled property in clientConfig.json for that.

Top Toolbar

The Top Toolbar contains buttons for manipulating the design elements.

Top toolbar properties.

The Undo and Redo buttons allow you to undo and repeat the last user action, correspondingly. The Revert button cancels all changes made by the user in a template. To prevent reverting a product inadvertently, you can enable a revert confirmation dialog with the revertProductConfirmationEnabled property.

You can enable a two-level mode for the Top Toolbar. If it contains more buttons than a row can fit, then an additional row shows instead of the More button.

Top toolbar in a two-level mode.

Set the multiRowModeEnabled property to true to enable the two-level mode; false enables the one-level mode.

The previous Top Toolbar corresponds to text elements. The following image illustrates the available buttons for image placeholders.

Top toolbar for image placeholders.

You can find the full list of the buttons and a configuration example in the ITopToolbarConfig topic.

Bottom Toolbar

The Bottom Toolbar contains the Marking menu, page navigation buttons, and zoom buttons. On the Marking menu, you can toggle safety lines, the grid, and snap lines. To zoom in or out of the canvas, click the Full window, Full screen, Zoom in, or Zoom out buttons.

Bottom toolbar properties.

The full-screen mode is not supported in Internet Explorer and Safari, so the corresponding button is not displayed in these browsers even if it is enabled.

Color Picker

The color picker contains the palette and spectrum.

Select a background image or color.

If a design requires limiting the color set, you can define the palette and hide the spectrum, as it is done in the example. For more information about customizing the palette, see the Colors topic.

Item Menu

In the advanced editor mode, split buttons become available for every layer in the Object Inspector. These buttons open the Item Menu that contains object-related actions.

Item Menu properties.

The screenshot above shows that the Item Menu has three groups of commands:

  • The first group allows for manipulating the object by deleting or cloning it.
  • The second group provides alignment options.
  • The last one changes the z-order of object layers.

You can select multiple objects on the canvas using the mouse. When several objects are selected, the Item Menu also contains the Group Alignment command.

The Item menu for selected objects.

The alignment properties of the ItemMenu object, horizontalAlignmentEnabled and verticalAlignmentEnabled, are applied to both Group Alignment and Alignment to safe area.

Spell Checking Feature

Customer's Canvas implements spell checking for text fields and the Rich Text editor. This feature can be enabled through the spellCheckEnabled property. If spell checking is enabled, then misspelled words are shown as underlined:

  • Spell checking in the Rich Text editor.

    Spell checking in the Rich text editor.

  • Spell checking in the Object Inspector.

    Spell checking in the Object inspector.

  • Spell checking in text popups.

    Spell checking in text popups.

Note

The spell checking feature utilizes the user's browser's spell checking. So, if the browser is set to check spelling in one language, and the user customizes a product in another language, then the spell checking in Customer's Canvas fails because of incorrect browser settings.

The Gallery provides access to all images available to a user. The Using the Image Gallery topic describes the gallery in detail and demonstrates how you can set up the gallery tabs, for example, in the following way.

Social Network properties.

The Gallery contains user and public tabs. The social network tabs provide access to images from the user's social profiles. These tabs are displayed when you define tabs of the facebook and instagram types with the user's identifiers in the social applications. For details about the social applications, refer to the Integration with Facebook and Instagram topic.

To specify a default tab, which displays when the Gallery opens, use the defaultTabName property.

Here, you can enable or disable image editing by displaying or hiding the Edit button.

The Edit button in the Gallery.

Image Editor

After a user clicks Edit, the Image Editor opens. The Image Editor allows for cropping images, adjusting image colors, and erasing the background. You can hide the Background, Adjust, and Crop buttons with the corresponding properties.

Image editor buttons.

Warnings

After a user has inserted an image into the design, Customer's Canvas checks the image resolution and displays a notifying icon if the inserted image has a resolution that is too low. You can define the warning and bad levels in percent of the hi-res output DPI through the qualityMeter object. To enable this feature, set the qualityMeterEnabled property of the ObjectInspector to true. Also, you can display warnings on the canvas as well as in the ObjectInspector through the qualityMeterButtonsEnabled property.

If a user places an object on the canvas too close to safety lines, the safety line violation occurs and the corresponding message is shown. You can enable this check through the safetyLineViolationWarningEnabled property of the ObjectInspector.

If a user moves an object on the canvas out of a region, the region violation occurs and the corresponding message is shown. You can enable this check through the regionViolationWarningEnabled property of the ObjectInspector. If you set the suppressOutOfRegionManipulation property to true, then it prevents the warning message from being displayed.

These warnings appear on the right side of the Object Inspector as red and yellow icons.

Warnings in the Object Inspector.

When you tap or click the notifying icons, Customer's Canvas displays corresponding messages and the actual DPI of the image for quality warnings.

Warnings in the Object Inspector.

Configuration Sample

This sample shows how to use both clientConfig.json and the IConfiguration interface to customize the web-to-print editor. For demonstration purposes, we disabled the following features in this sample:

  • Changing the background layer
  • Adding images and rich text
  • Adding QR and bar codes
  • Using the color spectrum

The settings are separated into two groups: common for all products and product-specific ones. The settings for all products are specified in the clientConfig.json file.

JavaScript
"LeftToolbar": {
    "imageButtonEnabled": false,
    "linearBarcodeButtonEnabled": false,
    "qrCodeButtonEnabled": false,
    "richTextButtonEnabled": false
    ...
},
"ObjectInspector": {
    ...
    "bgItemEnabled": false,
    ...
}

As a more flexible alternative to disabling the buttons, you can create the Left Toolbar through the IButton interface.

JavaScript
"LeftToolbar": {
    "buttons": [
        "Text",
        {
            "translationKey": "LeftToolbar.SHAPE",
            "translationKeyTitle": "LeftToolbar.TITLE_ADD_SHAPE",
            "iconClass": "cc-icon-add-shape",
            "buttons": [
                "Line",
                "Rectangle",
                "Ellipse"
            ]
        }
    ]
}

The product-specific settings are configured through the IConfiguration interface.

JavaScript
configuration = {
    initialMode: "Advanced", 
    widgets: {
        ColorPicker: { 
            palette: [ ["rgb(0,0,0)","rgb(255,255,255)"],
                      ["rgb(255,0,0)","rgb(255,255,0)","rgb(0,255,0)","rgb(0,255,255)","rgb(0,0,255)", "rgb(255,0,255)"]], 
            showPaletteOnly: true
    }}
};

As a result, the interface of Customer's Canvas looks like this:

The interface of the web-to-print editor.

See Also

Manual

IFrame API Reference