New online demos available.  

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 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

Placeholder Items

For the BarcodePlaceholder items, it supports:

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
            }
        }
    }
}