Canvas Commands

Command: modifyItems

This command enables you to override certain properties of design elements in the editor. For example, you may use it if you want to hide/show some elements by choosing options.

Params

items - a list of name-value keys where the name is a name of an element and a value is a set of properties you want to change
every - a set of properties you would like to change for all elements

Items

Let's imagine that you have a design with two text layers - Name and Company. Here is a simple example of how to automatically change its values:

{
    "type": "canvas",
    "name": "editor",
    "params": {
        "initial": {...},
        "modifyItems": {
            "items": {
                "Name": {
                    "value": "Neo"
                },
                "Company": {
                    "value": "Matrix"
                }
            }
        }
    }
}

The value works for all kinds of elements, and you can use the same syntax as you would use for the loadUserInfo method from the Customer's Canvas IFrame API.

What other properties are supported by these commands? Not so many at the moment, and they depend on the item type.

Image Items

visualizationPermissions - the equivalent for the <VNP> and <VNS> markers. See IVisualizationPermissionsConfig interface docs for details.

Placeholder Items

visualizationPermissions - the equivalent for the <VNP> and <VNS> markers. See IVisualizationPermissionsConfig interface docs for details.
placeholderPermissions - the same as the IPlaceholderPermissionsConfig interface.
contentPermissions - the same as IContentPermissionsConfig but only supports imagePermissions.
locked - an equivalent of the <LC> marker - locks the element.
type - placeholder type (ImagePlaceholder | BarcodePlaceholder | Text | InString).

For the BarcodePlaceholder items, it supports:

barcodeFormat - see the BarcodeFormat enumeration.
barcodeSubType - required for QR Codes. See the BarcodeSubType enumeration.

Example of items config

{
	"items": {
		"UserName": {
			"value": "Neo"
		},
		"Photo": {
			"value": "https://cdn-images-1.medium.com/max/1600/1*heL-f8bPywxsNG2snNPIwQ.jpeg",
			"visualizationPermissions": {
				"noShow": true,
				"noPrint": true
			}
		},
		"Avatar": {
			"type": "ImagePlaceholder",
			"visualizationPermissions": {
			  "noShow": true,
			  "noPrint": true
			},
			"placeholderPermissions": {
			  "allowEditContent": true,
			  "showHandleButton": true,
			  "showSelectButton": true
			},
			"contentPermissions": {
			  "imagePermissions": {
				"allowChangeImage": true,
				"allowEditImage": true
			  }
			},
			"locked": false
		},
		"QrCode": {
			"type": "BarcodePlaceholder",
			"value": "http://matrix.com",
			"barcodeFormat": "QR_CODE",
			"barcodeSubType": "Url"
		},
		"Ean8": {
			"type": "BarcodePlaceholder",
			"value": "1234567",
			"barcodeFormat": "EAN_8",
			"barcodeSubType": "None"
		}
	}
}

Example - how to lock all elements

{
    "type": "canvas",
    "name": "editor",
    "params": {
        "initial": {...},
        "modifyItems": {
            "every": {
                "locked": true
            }
        }
    }
}