White paper: Templates in web-to-print.  Free download

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 their values:

{
    "type": "design-editor",
    "name": "design-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 this command? Not so many at the moment, and they depend on the item type.

Image Items

Placeholder Items

For the BarcodePlaceholder items, it supports:

Example of the 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 of how to lock all elements

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