Not to allow components inside the container only

[VeeraCh1]

Hi Team,

I currently have a custom container component structured as follows:

• The container component includes a parsys or responsiveGrid inside it.

When the team adds the container component to a page, the node structure looks like this: ../container/content—this is expected.

Additionally, the team can add components to the parsys or responsiveGrid (content) by clicking the + symbol—this is also expected. However, sometimes components are accidentally dragged and dropped directly into the container node (e.g., ../container/text). These components then become invisible to authors.

Could you guide me on how to use cq:dropTargets to restrict components from being added directly to the ../container node?

Thanks in Advance

Veera

[muskaanchandwani]

You can try to -

• Find the component definition in /apps/myproject/components/container.
• Edit cq:dialog Node - Open the cq:dialog node of the container component.
• Add cq:dropTargets Property:

Add the cq:dropTargets property to the cq:dialog node.
Specify accepted components with cq:accept.
Define the drop zone groups with cq:groups.
Set the property name for the drop target with cq:propertyName (e.g., ./content).

(Ensure components can only be added to the specified drop zones (e.g., parsys or responsiveGrid).

reference :
https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/com...
http://www.sgaemsolutions.com/2019/01/cqdroptagets-in-cqeditconfig-node-in-aem.html

[VeeraCh1]

hanks, Chandwani, for the quick reply.

I tried adding the configuration at the component level, but it didn't work. Could you please verify and correct my configuration?

<cq:dropTargets jcr:primaryType="nt:unstructured">

 <image

      jcr:primaryType="cq:DropTargetConfig"

      accept="[image/.*]"

      groups="[media]"

      propertyName="./fileReference">

  <parameters>

      sling:resourceType:”/apps/myproject/components/container”

  </parameters>

</image>

</cq:dropTargets>

Additionally, the container component has the cq:isContainer property set to true.

Can we restrict component drag-and-drop to the container if the cq:isContainer property is set?

Thanks In Advance

Veera

[rk_pandian · Accepted solution]

Hi @VeeraCh1,

You can also use policies for the container to restrict the allowed components.

Regards,

Ramkumar

[EstebanBustamante]

Hi, 

I agree with @rk_pandian. This was the "old" way of restricting components. Since Editable Templates, the preferred approach is to use "policies." With this method, a template-author defines a list of components available to authors, which helps prevent these types of authoring errors.

You can learn more here: https://www.hoodoo.digital/blog/organizing-content-policies-in-aem

http://www.sgaemsolutions.com/2017/09/dynamic-editable-templates-in-aem-63.html

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

Hope this helps

[kautuk_sahni]

@VeeraCh1 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!