The propertyName of a DropTargetConfig node can, by default, only contain a single property field. By dropping something in a component with this DropTargetConfig, the single property will be created or overwritten by the dropped item.
For example, when dragging an image onto a component, it can create/replace the property 'imageReference'. The DropTargetConfig will be configured as:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:EditConfig">
<cq:dropTargets jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="cq:DropTargetConfig"
accept="[*]"
groups="[page]"
propertyName="./imageReference">
</pages>
</cq:dropTargets>
</jcr:root>
By replacing the 'propertyName' with one of the following configurations, other behaviour will be unlocked:
./dropTarget->@pages
: Add an item to the array property 'pages'./dropTarget->/node/@pages
: Add an item to the array property 'pages', which is located on a sub-node called 'node'./dropTarget->/node//@link
: Create a new node under the sub-node 'node' with 1 property called 'link'Starting the propertyName with '/dropTarget->' activates this Jetpack tool.
The property 'accept' and 'groups' determines which kind of object can be dragged onto the component. This is OOTB AEM behaviour.
In your component, create a file named _cq_editConfig.xml with the following xml.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:EditConfig">
<cq:dropTargets jcr:primaryType="nt:unstructured">
<pages
jcr:primaryType="cq:DropTargetConfig"
accept="[*]"
groups="[page]"
propertyName="./dropTarget->@pages">
</pages>
</cq:dropTargets>
</jcr:root>
By configuring the DropTargetConfig, like the example below, array properties are supported. When dragging an image onto this component, it will add an item to the array property './imageReferences'. If the 'imageReferences' property doesn't exist yet, it will be created.
...
<images
jcr:primaryType="cq:DropTargetConfig"
accept="[image/.*]"
groups="[media]"
propertyName="./dropTarget->@imageReferences">
</images>
...
By configuring the DropTargetConfig, like the example below, composite multi-field dialog definitions are supported. When dragging an image onto a component, it will create a new node under 'definitions' with the property 'link'.
...
<images
jcr:primaryType="cq:DropTargetConfig"
accept="[image/.*]"
groups="[media]"
propertyName="./dropTarget->/definitions/{{COMPOSITE}}/@link">
</images>
...