Settings

Last updated on March 3, 2025
•
6 minutes to read

Settings consist of feature flags and configurations that alter the behavior of the Template Editor.

The settings are structured into sections, where each section controls a specific group of related properties, such as the toolbar, pages, or the editor's workspace.

Supported sections are listed below.

{
    "settings": {
        "itemBuilder": { },
        "designViewer": { },
        "colorPicker": { },
        "pages": {
            "list": { },
            "properties": { }
        },
        "itemProperties": { },
        "toolbar": { },
        "editorSettings": { },
        "itemValidation": { },
        "listSettings": { },
        "snapLines": {}
    }
}

Let's take a closer look at these settings.

itemBuilder

The itemBuilder object allows you to define the initial properties of objects to be created in the editor. This object is defined by using the IItemData interfaces. You can set initial properties for the following design element types:

text
rectangle
ellipse
image
barcode
qrCode

For example, this is how you can change default settings for text, ellipses, and images.

{
    "itemBuilder": {
        "text": { "isVertical": true },
        "ellipse": { "fillColor": "rgb(255, 100, 13)" },
        "image": { "borderWidth": 10, "borderColor": "rgb(255, 0, 13)" }
    }
}

designViewer

The designViewer object manages the user's interaction with the work area, where they manipulate design elements.

The following example changes the units to inches, turns on the 0.5 grid, and hides the rulers.

{
    "designViewer": {
      "unit": "in",
      "grid": { "step": 0.5, "enabled": true },
      "rulers": false
    }
}

In the grid object, the step is measured in points (1/72 inch).

pages

This object allows for changing the settings of the Page panel and the Pages list:

pages.properties
pages.list

pages.properties

The pages.properties object defines which page settings can be edited:

pageProperties allows/disallows editing the page size.
areas allows/disallows editing page areas.
background allows/disallows editing the background of the page.

To disable editing and only display the settings, set their readonly property to true. For example, to disable changing all these page properties, use:

{
    "pages": {
        "properties": {
            "pageProperties": { "readonly": true },
            "areas": { "readonly": true },
            "background": { "readonly": true }
        }
    } 
}

pages.list

The pages.list object allows you to customize the behavior of the Pages list.

There are two objects to configure:

createOrRemove allows you to disable creating and deleting the pages. If its property enabled set to false, it hides the Create button and disables the context menu for the Pages list.
changeOrder allows you to disable changing the order of pages using D&D. To do so, set its enabled property to false.

To disable adding, removing, and changing the page order, use:

{
    "pages": {
        "list": {
            "createOrRemove": { "enabled": false },
            "changeOrder": { "enabled": false }
        }
    }
}

itemProperties

The itemProperties object allows you to change the appearance of object property groups in the editor.

The following property groups can be disabled:

general contains the permission properties for the target editors
toggleSet contains properties used by toggle set's functionality
data contains properties used by the VDP functionality

To hide these property groups, use:

{
    "itemProperties": {
        "data": false,
        "toggleSet": false,
        "general": false
    }
}

The toolbar object allows you to configure buttons for creating design elements.

You can add buttons so that the user can create:

text
image
rectangle
ellipse
barcode
qrCode

To hide the buttons, use

{
    "toolbar": {
        "barcode": { "enabled": false },
        "qrCode": { "enabled": false },
        "rectangle": { "enabled": false },
        "ellipse": { "enabled": false },
        "text": { "enabled": false },
        "image": { "enabled": false }
    }
}

editorSettings

This object enables the Editor settings button. To disable this button, set enabled to false.

To hide the button, use:

{
    "editorSettings": { "enabled": false }
}

itemValidation

The itemValidation object configures the validation rules for items in the design. For the description of the preflight check and monitored violations in Customer's Canvas, refer to the Validation Warnings topic.

Validation rules can be divided into three groups:

Design areas and text
Safety lines
Image resolution

Design areas and text

The itemValidation object configures the design validation in the Template Editor:

region enables the region validation.
bleed enables the bleed zone validation.
textCrop enables checking that all text fits.
inPlaceNotSupported enables checking text elements for WYSIWYG mode support.

To disable checking unsupported text properties, use:

{
  "settings": {
        "itemValidation": {
            "inPlaceNotSupported": false
        }
    }
}

Safety lines

Safety line validation is controlled by the group of the following properties:

safetyLine enables the safety line validation.
safetyLines is one of "InsideAll" | "PartiallyInsideAny" | "InsideAny" | "Disabled". For more details, refer to the Validation Warnings topic.
tolerance is the distance the allows you to disable warnings about violations of safety lines or the bleed zone when an object is close enough to them.

To check if the elements are inside all the safety lines with acceptable tolerance, use:

{
    "settings": {
        "itemValidation": {
            "tolerance": 0.1,
            "safetyLines": {
                "enabled": true,
                "mode": "InsideAll"
            }
        }
    }
}

Image resolution

Image resolution is controlled by the group of the following properties:

targetResolution – the DPI of the print files.
enabled – if true, displays the quality meter.
warning – the percentage of the acceptable quality level.
bad – the percentage of unacceptable quality level.
qualityChangeContainersEnabled – if true, displays the DPI bar.

For example, to check the image resolution with a target value of 200 DPI and display warnings at 160 DPI and errors at 100 DPI, use:

{
    "itemValidation": {
        "qualityMeter": {
            "enabled": true,
            "targetResolution": 200,
            "warning": 80,
            "error": 50
        }
    }
}

Here, the targetResolution specifies a DPI of the print files, and the bad and warning properties specify two image quality levels as a percentage of DPI. In this example, a DPI lower than 150 will be considered bad, a DPI in the range from 150 to 240 will display a warning, and a DPI higher than 240 will be considered acceptable.

listSettings

For the description of the list settings in Customer’s Canvas, refer to the Configuring lists topic.

bulletChar – the symbol
firstLineIndent – the first line indent
levelIndent – a new level indent
listIndent – the entire list indent
maxLevel – the number of nested levels
numberingFormat – the format, one of "number", "lowerLetter", "upperLetter", "lowerRoman", "upperRoman", "none".
tabOffset – the distance between the bullet and the first letter.

For example, this is how you can limit the list to a single level and customize the bullet points.

{
    "settings": {
    "listSettings": {
        "maxLevel": 1,
        "bulletChar": "*"
    }
}

snapLines

The snapLines object allows you to define which elements the snap line should cling to.

snapToItems enables snapping to design elements.
snapToLocked enables snapping to locked design elements.
snapToPage enables snapping to page bounds.
snapToGrid enables snapping to grid cells.
snapToRegion enables snapping to regions.
snapToSafetyLines enables snapping to safety lines.

For example, this is how you can disable snapping to locked design elements.

{
    "settings": {
        "snapLines": {
            "snapToLocked": { "enabled": false }
        }
    }
}