@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
121 lines (103 loc) • 4.04 kB
Markdown
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:
``` json
{
"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 [IVisualizationPermissionsConfig interface docs](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.configuration.defaultconfig.ivisualizationpermissionsconfig.htm) for details.
### Placeholder Items
- `visualizationPermissions` - the equivalent to the `<VNP>` and `<VNS>` markers. See [IVisualizationPermissionsConfig interface docs](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.configuration.defaultconfig.ivisualizationpermissionsconfig.htm) for details.
- `placeholderPermissions` - the same as the [IPlaceholderPermissionsConfig interface](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.configuration.defaultconfig.iplaceholderpermissionsconfig.htm).
- `contentPermissions` - the same as [IContentPermissionsConfig](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.configuration.defaultconfig.icontentpermissionsconfig.htm) 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](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.editor.barcodeformat.htm).
- `barcodeSubType` - required for QR Codes. See the [BarcodeSubType enumeration](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.editor.barcodesubtype.htm).
### Example of the items config
``` json
{
"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
``` json
{
"type": "design-editor",
"name": "design-editor",
"params": {
"initial": {...},
"modifyItems": {
"every": {
"locked": true
}
}
}
}
```