Settings

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

These 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": { }
        },
        "printAreas": { },
        "layers": { },
        "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, enables the grid with a step of 0.5 points, and hides the rulers.

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

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

colorPicker

The colorPicker object configures the color picker and the color palette.

In the picker object, you can configure the color picker behavior:

• defaultColorSpace – the color space selected by default, either "rgb" or "cmyk". Default: "cmyk".
• eyeDropperEnabled – if true, enables the eyedropper tool.
• decimalCmykEnabled – if true, allows fractional CMYK values.
• alphaEnabled – if true, enables the transparency (alpha channel) selection.
• colorSelector – the type of the color selector, either "hsv" or "none".
• colorInput – the color input format, one of "hex", "input", or "sliders".

In the palette object, you can configure the palette sections:

• document – if true, displays the document colors section. Default: false.
• user – if true, displays the user colors section. Default: false.
• default – if true, displays the default colors. Default: true.
• recommended – if true, displays the recommended colors. Default: false.
• noColor – if true, displays the document No color section. Default: true.

For example, to open the color picker in the RGB color space with the document and user colors on the palette, use:

{
    "colorPicker": {
        "picker": { "defaultColorSpace": "rgb" },
        "palette": { "document": true, "user": true }
    }
}

printAreas

The printAreas object configures the display of print areas in the editor. The mode property is one of "off" (default), "single", or "multiply".

{
    "printAreas": { "mode": "single" }
}

layers

The layers.limited.enabled property enables the limited layers mode. When it is true, the editor converts containers when loading a design. Default: false.

{
    "layers": { "limited": { "enabled": true } }
}

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:

• fill – fill and stroke colors
• border – border (stroke) settings
• blending – blending mode and opacity
• wrapping – text wrapping
• effects – item effects
• overprint – overprint settings
• nameAndTitle – the item name
• placeholder – placeholder settings
• toggleSet – properties used by the toggle set functionality
• general – permission properties for the target editors
• data – properties used by the VDP functionality
• violation – violation warnings

To hide these property groups, use:

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

toolbar

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.violation 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:

{
    "itemValidation": {
        "violation": {
            "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 that allows you to suppress 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:

{
    "itemValidation": {
        "violation": {
            "safetyLine": true,
            "safetyLines": "InsideAll",
            "tolerance": 0.1
        }
    }
}

Image resolution

Image resolution is controlled by the properties of the itemValidation.qualityMeter object:

• targetResolution – the DPI of the print files.
• enabled – if true, displays the quality meter.
• warning – the percentage of targetResolution that defines the acceptable quality level.
• bad – the percentage of targetResolution that defines the 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,
            "bad": 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 targetResolution. In this example, a DPI lower than 100 will be considered bad, a DPI from 100 through 160 will display a warning, and a DPI higher than 160 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.

{
    "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.
• snapToLockedItems 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.

{
    "snapLines": {
        "snapToLockedItems": { "enabled": false }
    }
}