Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to create a page component and give it the ability to drag and drop ?

Avatar

Level 4

Hi, I have already gone through some blogs related to this problem statement.

But i am not getting the placeholder to drag and drop the component in template. I am creating the base page component by extending the core component.

Kindly suggest me the solution.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@monish_gavali 

 

The Images are really burry for me. I am unable to understand the structure you have.

 

Requesting you to please refer to WKND templates and template-type. For a root container, you need to have "/structure/jcr:content/root" as indicated in the image below:

 

aanchalsikka_0-1703591586650.png

 


Aanchal Sikka

View solution in original post

9 Replies

Avatar

Level 2

Hi, Please check your template and choose structure mode to unlock the LayoutContainer (this is the key to have drag and drop functionality)

Also, I recommend to add an additional new LayoutContainer (also set the policy, to add allowed desired components) on the page in Structure mode and unlock this.

for more details check below part of this documentation link

Hemendra_0-1703431590967.png

 

Avatar

Level 4

Let me explain what I did from starting.

 

1) First I created a page component having  resourceSuperType path of Core Page component path.

 

monish7_0-1703490191507.png

 

2) Then I created a custom template type which is having resource type path of my own Page Component.

 

monish7_1-1703490490023.png

 

3) Then I created a editable template by using my custom template type.

 

monish7_2-1703490528082.png

 

This is the template which i have created using my custom template type

 

monish7_3-1703490572269.png

 

This is the template which i have created using the existing template type

 

Path of existing template type:

/libs/settings/wcm/template-types/html5page

 

monish7_4-1703490667960.png

 

In this template the drag and drop component placeholder is available but in my template it is not available.

 

Please help me with this issue.

 

Avatar

Level 2

Hi Monish, Thanks for explaining the issue and I have tried the same steps and i am able to see the drag-drop functionality. May it could be something wrong with the environment setup. I'm attaching my demo package that i created, try to upload it using package manager side on your side and see if you are able to see it using this.
package link 

Avatar

Community Advisor

Hi @monish_gavali 

you are using a static template, allowing the template in /etc/design can you see the "drag" and "drop" sections.

Thanks



Avatar

Level 4

Let me explain what I did from starting.

 

1) First I created a page component having  resourceSuperType path of Core Page component path.

 

monish7_0-1703490766734.png

 

 

2) Then I created a custom template type which is having resource type path of my own Page Component.

 

monish7_1-1703490766844.png

 

 

3) Then I created a editable template by using my custom template type.

 

monish7_2-1703490766956.png

 

 

This is the template which i have created using my custom template type

 

monish7_3-1703490766836.png

 

 

This is the template which i have created using the existing template type

 

Path of existing template type:

/libs/settings/wcm/template-types/html5page

 

monish7_4-1703490766833.png

 

 

In this template the drag and drop component placeholder is available but in my template it is not available.

 

Please help me with this issue.

 

Avatar

Community Advisor

@monish_gavali 

 

To be able to Drag-n-Drop components, you would first need to allow them to be added to the container.

 

- Go to the template

- CLick on the Root container

- Go to its policy

- ENable the components you would like to add. Save the policy

- Refresh template

- You should be able to add components now


Aanchal Sikka

Avatar

Level 4

Thanks @aanchal-sikka for the reply but the thing is using my base page component I am not getting that Drag Components Here Placeholder in my templates. 

Avatar

Correct answer by
Community Advisor

@monish_gavali 

 

The Images are really burry for me. I am unable to understand the structure you have.

 

Requesting you to please refer to WKND templates and template-type. For a root container, you need to have "/structure/jcr:content/root" as indicated in the image below:

 

aanchalsikka_0-1703591586650.png

 


Aanchal Sikka

Avatar

Administrator

@monish_gavali Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni