Sunday, January 27, 2019

cq:dropTagets in cq:editConfig Node in AEM


Hello Everyone,

In the previous blog, we already talk about one of the child node of cq:editConfig
which is cq:listeners.

In this blog, we will talk about “cq:dropTargets” feature of “cq:editConfig” node.
cq:dropTargets(of type nt:unstructured) is the child node of cq:editConfig
(of type cq:EditConfig) node and defines a list of drop targets that can accept a drop from an
asset of the content finder as shown in the image below.It serves as a collection of
nodes of type cq:DropTargetConfig.
Fig:1- Assets in content finder

Note:
  • Multiple drop targets are only available in the classic UI.
  • In the touch-enabled UI, a single drop target is allowed.

Each child node of type cq:DropTargetConfig defines a drop target in the component.
The node name was so fix till AEM 6.2, but as now from AEM 6.3, the node name is
so flexible and we can use any nodenam,still we will try to use nodename as
OOTB components are using.

The node of type cq:DropTargetConfig needs to have the following properties:
Property Name
Property Value
accept
Regex applied to the asset mime type to validate if dropping is allowed.
groups
Array of drop target groups. Each group must match the group type that is defined in the content finder extension and that is attached to the assets.
propertyName
Name of the property that will be updated after a valid drop.

Why to use dropTargets in a component??

It is not really necessary to use dropTarget as you can configure image,video after opening the dialog, but it is good to use feature if without opening dialog, you can just drag and drop the image from the content finder inside the dialog.

So personally, I would like to go with this feature for every possible component where I can use it.

So question comes here, in which components we can use this feature? We can use this in any component where I can drag and drop any asset using content finder Image,Video,Audio,any component having a page Path configuration etc.

Variations of Drop Targets in a Component
Image Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
 <image
      jcr:primaryType="cq:DropTargetConfig"
      accept="[image/.*]"
      groups="[media]"
      propertyName="./fileReference">
  <parameters>
      sling:resourceType:”relative path of the component”
  </parameters>
</image>
</cq:dropTargets>

Confusion:I have seen sling:resourceType in the “parameters” node pointing to itself for only image,video and audio dropTargetConfig nodes and what I understood from forums about it is “sling:resourceType as necessary to tell which component is supposed to render the content that gets dragged and dropped.”

My Observation: But my observation is that if you don’t put resourceType also,still things will work fine for image,video and audio components.But I recommend that you use resourceType as it is given in all OOTB Components so there may be situations where it is needed.If i will get to know the use case of adding this property, I will let you know.

Demonstration Video on Drag and Drop functionality of image using cq:dropTargets:


Video Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
 <video
      jcr:primaryType="cq:DropTargetConfig"
      accept="[video/.*]"
      groups="[media]"
      propertyName="./fileReference">
  <parameters>
      sling:resourceType:”relative path of the component”
  </parameters>
</video>
</cq:dropTargets>

Audio Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
 <audio
      jcr:primaryType="cq:DropTargetConfig"
      accept="[audio/.*]"
      groups="[media]"
      propertyName="./fileReference">
  <parameters>
      sling:resourceType:”relative path of the component”
  </parameters>
</audio>

Any component having Page Path:
<cq:dropTargets jcr:primaryType="nt:unstructured">
 <pages
      jcr:primaryType="cq:DropTargetConfig"
      accept="[.*]"
      groups="[page]"
      propertyName="./pages"/>
</cq:dropTargets>

Demonstration Video on Drag and Drop functionality of page using cq:dropTargets:
:

Download Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
 <file
      jcr:primaryType="cq:DropTargetConfig"
      accept="[.*]"
      groups="[media]"
      propertyName="./fileReference"/>
</cq:dropTargets>

Note: In AEM 6.4 fresh instance, cq:dropTargets doesn’t work so you need to add service pack (Service Pack 6.4.2) to the instance. So if you face this issue in any other version so maybe you need to upgrade your AEM instance with service pack.

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

No comments:

Post a Comment