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 changeevery
- 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 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? At this moment, not so much and they depend on an 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 IPlaceholderPermissionsConfig interface.contentPermissions
- the same as IContentPermissionsConfig but supports onlyimagePermissions
.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 the 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
}
}
}
}