Customizing User Interface

In this topic, we will discuss how to customize the Customer's Canvas user interface. The Customization Parameters section of this article describes parameters that change the appearance of the user interface, and the Customization Sample section shows how to use some of these parameters.

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:

JavaScript
"initialMode": "Advanced";

or 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 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:

Web-to-print editor in advanced mode.

Now, when you get the idea of widgets, let us start with customizable parameters. On the screenshots below, each interface element is tagged with the related parameter, one per a widget. Most parameters reviewed in the 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.

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 design. The buttons are grouped into the following menus:

  • The Text menu

    Left toolbar properties. The Text menu.

  • The Shape menu

    Left toolbar properties. The Shape menu.

  • The Barcode menu

    Left toolbar properties. The Barcode menu.

To disable the Image button, set the imageButtonEnabled property to false.

Object Inspector

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

Object Inspector properties.

Note

When you set dndEnabled to false, only the handlers 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 ~\Configuration\clientConfig.json for that.

Top Toolbar

The Top Toolbar contains buttons for manipulating user actions:

Top toolbar properties.

The Undo and Redo buttons allow to undo and repeat the last user action correspondingly. The Revert button cancels all changes in a template, which the user made. To prevent reverting 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.

Bottom Toolbar

The Bottom Toolbar contains the Marking menu, page navigation buttons, and zoom buttons. On the Marking menu, you can toggle safety lines, a grid, and snap lines. To zoom the canvas, click 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 the spectrum:

Select 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 snippet below. For more information about customizing the palette see the Colors topic.

Item Menu

In the advanced editor mode, split buttons get 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 manipulating the object, delete or clone 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:

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

Gallery

The Gallery provides access to all images available to a user; see the Using Image Gallery topic for more details.

The Gallery can contain up to four tabs:

Social Network properties.

The social network tabs provide access to images from the user's social profiles. These tabs are displayed when the facebook and instagram properties are set with the user's identifiers in the social applications. See the Integration with Facebook and Instagram topic for details.

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

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

Gallery Edit button.

Image Editor

After a user clicks Edit, the Image Editor opens. The Image Editor allows users to crop images and adjust image colors. You can hide the Adjust and Crop buttons with corresponding properties:

Image Editor buttons.

Warnings

After a user has inserted an image into the design, Customer's Canvas checks image resolution and displays a message if the inserted image has a resolution that is too low. This feature can be enabled through the qualityMeterEnabled property of the ObjectInspector.

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

Image Editor warning.

You can find more information on configuring Customer's Canvas in the Configuration Parameters topic. It contains a detailed description of all parameters, their possible values, and a structure of the ~\Configuration\clientConfig.json file.

Customer's Canvas allows you to configure the user interface in a different way for different pages.

Configuring Sample

This sample shows how to use both ~\Configuration\clientConfig.json and the IConfiguration interface to customize the web-to-print editor. For demonstration purposes, we disable 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 ~\Configuration\clientConfig.json file:

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

and the product-specific ones 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, interface of Customer's Canvas looks like this:

Interface of the web-to-print editor.

See Also

Manual

IFrame API Reference