Simple and Advanced Web-to-print Editor Modes

By default, the editor opens a product template in simple mode. This mode has limited functionality - the user can only modify predefined text and image fields. It is very user-friendly as the user does not have to learn a lot of commands to use it and in most cases it is more than enough.

The web-to-print editor in simple mode:

Simple mode of the editor.

However sometimes the user needs more features. In this case, the user can switch to the advanced mode using the appropriate button on the user interface. If you prefer the user always switch to the advanced mode by default, you can set it as a default behavior by modifying a ~\Configuration\clientConfig.json file - just change the initialMode param to Advanced. Alternatively, you can use IFrame Api to perform this:

JavaScript
<script>
    ...
    //Defining the editor configuration.
    configuration = {initialMode: "Advanced"};
    //Loading the editor with the given configuration.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration).then(function(e) {editor = e});
    ...
</script>

What is the difference between simple and advanced modes? Advanced mode enables the following features:

  • Move, scale, rotate template elements
  • Change z-index (i.e. send objects back or forward)
  • Delete and clone elements
  • Change text formatting (such as font name, size, bold/italic/underline styles, color, alignment)
  • Change the background image or solid color
  • Add new elements, such as:
    • Text (simple or formatted)
    • Image
    • QR code and Bar code
    • Ellipses and rectangles

The web-to-print editor in advanced mode:

Advanced mode of the editor.

No matter which mode is used, you can enable and configure rulers and grids for the user's convenience. See the Markings topic for details.

See Also

Manual

IFrame API Reference