modifyItems

• 1 minute to read

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.

For the complete list of parameters, you can refer to IDesignEditorDefinitionModifyItems.

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

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

Placeholder Items

• visualizationPermissions - the equivalent to the <VNP> and <VNS> markers. See IVisualizationPermissionsData interface docs for details.
• placeholderPermissions - the same as the IPlaceholderPermissionsData interface.
• contentPermissions - the same as IContentPermissionsData but only supports imagePermissions.
• locked - an equivalent to 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 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
            }
        }
    }
}