Advanced Drop Targets

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.

Biggest advantages

  • Support for a String array property
  • Support for a Composite Multi-field structure

Ready to try this out?

Want to learn more on how this works?

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