--- title: "Customizing the User Interface" canonical: https://customerscanvas.com/docs/cc6/customizing-user-interface.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/). # Customizing the User Interface **Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation** 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](https://customerscanvas.com/docs/cc6/customizing-widgets.htm.md) topic. - Toolbox - Object Inspector - Top Toolbar - Bottom Toolbar - Canvas - Color Picker - Item Menu - Spell Checking - Image Editor - Warnings - Configuration Sample ## Customization Parameters As noted in the [Simple and Advanced Web-to-Print Editor Modes](https://customerscanvas.com/docs/cc6/simple-and-advanced-designer-modes.htm.md) 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`. ``` "initialMode": "Advanced"; ``` Also, you can change the mode via the **IConfiguration** interface. ``` 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 in the [Md](https://customerscanvas.com/docs/cc6/themes.htm.md) theme. ![The web-to-print editor in the advanced mode.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface01.png) 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](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface. You can refer to the [clientConfig](https://customerscanvas.com/docs/cc6/client-config.htm.md) topic describing these parameters, their possible values, and the structure of `clientConfig.json`. ### Toolbox To set up buttons in the **Toolbox**, you can use the [IButton](https://customerscanvas.com/docs/cc6/customerscanvas.baseeditor.configuration.ui.itoolboxconfigparsed.ibutton.htm.md) interface. You can enable predefined and custom buttons. There are the following predefined buttons: **Text**, **PointText**, **BoundedText**, **Image**, **Background**, **QrCode**, **LinearBarcode**, **DataMatrixBarcode**, **Line**, **Rectangle**, **Ellipse**, **Layout**, and **FillPlaceholders**. The configuration sample shows how you can create the **Toolbox** by using these buttons. For more details, refer to the [Customizing the Toolbox](https://customerscanvas.com/docs/cc6/customizing-toolbox.htm.md) topic. ### 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`. To keep the original order of in-string placeholders, set **inStringPlaceholderMode** to `"Multiple"`. ![Object Inspector properties.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface02b.png) To allow your users to toggle the **Object Inspector**, you can enable the **Layers** button by using the **toggleEnabled** property. ![The Layers button toggles the Object Inspector.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface02l.png) **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. If a design element has the `` marker, then other elements cannot be moved across this one, by neither changing the z-order nor using the handles. ### Top Toolbar The **Top Toolbar** contains buttons for manipulating the design elements. ![Top toolbar properties.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface03.png) 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.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface12.png) 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.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface13.png) You can find the full list of the buttons and a configuration example in the [ITopToolbarConfig](https://customerscanvas.com/docs/cc6/customerscanvas.baseeditor.configuration.ui.itoptoolbarconfigparsed.htm.md) 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. The **Rotate** button allows for rotating the canvas (workspace). ![Bottom toolbar properties.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface03b.png) 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. ### Canvas The canvas allows your users to manipulate the design elements and edit their content. You can configure the color, padding, and shadows of the canvas. The **suppressOutOfRegionManipulation** property disallows for dragging elements out of regions. **qualityMeterButtonsEnabled** allows for displaying the image quality warnings. You may want to enable the **Floating Item Toolbar** on the canvas by using **floatingItemToolbarEnabled**. Depending on the selected item type, this toolbar can contain the **Select Image**, **Edit**, and **Delete** buttons. ![Canvas properties.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface14.png) Also, you can set up the grid, rulers, and snap lines. For details, refer to the [Markings](https://customerscanvas.com/docs/cc6/configuring-rulers-and-grids.htm.md) topic. ### Color Picker The color picker contains predefined palettes and the color field. ![Select a background image or color.](https://customerscanvas.com/docs/cc6/images/ColorPicker.png) If your product requires a limited set of color swatches, you can define a palette and hide the color field, as it is done in the example. For more information about customizing palettes, refer to the [Color Picker](https://customerscanvas.com/docs/cc6/colors.htm.md) topic. ### Item Menu In the advanced editor mode, the **More** button becomes available for every layer in the **Object Inspector**. These buttons open the **Item Menu** that contains object-related actions. ![Item Menu properties.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface04.png) 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.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface04b.png) 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.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface09.png) - Spell checking in the **Object Inspector**. ![Spell checking in the Object inspector.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface09a.png) - Spell checking in pop-up boxes. ![Spell checking in text popups.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface09b.png) **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. ### 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.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface07.png) ### Warnings Customer's Canvas provides [preflight of print products](https://customerscanvas.com/docs/cc6/preflight-check.htm.md) while your users work on their designs. The editor validates that images have good resolution, the safety zone and regions are not violated, and bounded text is not cropped. If an issue occurs, a corresponding warning appears both on the canvas and in the **Object Inspector**. You can configure the preflight through [violationWarningsSettings](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iviolationwarningssettingsconfig.htm.md). To enable warnings in the **ObjectInspector**, set the **violationWarningsEnabled** property to `true`. The **violationWarningButtonsEnabled** property enables warnings on the **canvas**. When the user resizes images or adds a new image to the design, Customer's Canvas checks the image resolution and displays a notifying icon if the image has a resolution that is too low. You can define the **warning** and **bad** quality levels as a percentage of the hi-res output DPI through the [qualityMeter](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iqualitymeterconfig.htm.md) object. If the 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. If the user moves an object on the canvas out of a [region](https://customerscanvas.com/docs/cc6/region.htm.md), the region violation occurs and the corresponding message is shown. You can enable this check through **regionViolationWarningEnabled**. 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.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface08.png) ## 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, let us: - Disable changing the background layer. - Disable the color field for design elements. - Enable the text and shape buttons in the Toolbox. You can set up Customer's Canvas defining either common settings for all products or product-specific settings. To specify the common settings affecting all your products, edit the `clientConfig.json` file. ``` "ObjectInspector": { "bgItemEnabled": false, ... }, "Toolbox": { "buttons": [ "Text", { "translationKey": "Toolbox.SHAPE", "translationKeyTitle": "Toolbox.TITLE_ADD_SHAPE", "iconClass": "cc-icon-add-shape", "buttons": [ "Line", "Rectangle", "Ellipse" ] } ] } ``` To define the product-specific settings, you can use the **IConfiguration** interface and pass the configuration to [loadEditor](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.loadeditor.htm.md). ``` // Defining configuration. configuration = { initialMode: "Advanced", widgets: { ColorPicker: { showPaletteOnly: true, sections: [ { type: "PaletteSection", 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)"]] } ] } } }; // Loading the editor with the given configuration. CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration); ``` As a result, the interface of Customer's Canvas looks like this: ![The interface of the web-to-print editor.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface10.png) ## See Also ### Manual - [clientConfig.json](https://customerscanvas.com/docs/cc6/client-config.htm.md) - [UI Themes](https://customerscanvas.com/docs/cc6/themes.htm.md) - [Getting Started with IFrame API](https://customerscanvas.com/docs/cc6/IframeApi-introduction.htm.md) ### IFrame API Reference - [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md)