How to create a page component and give it the ability to drag and drop ? | Community
Skip to main content
M
monish_gavali
Level 3
December 23, 2023
Solved

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

  • December 23, 2023
  • 4 replies
  • 1597 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

@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:

 

 

4 replies

Hemendra
Hemendra
Level 2
December 24, 2023

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

 

    M
    monish_gavaliAuthor
    Level 3
    December 25, 2023

    Let me explain what I did from starting.

     

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

     

     

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

     

     

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

     

     

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

     

     

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

     

    Path of existing template type:

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

     

     

    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.

     

      Hemendra
      Hemendra
      Level 2
      December 25, 2023

      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 

        Raja_Reddy
        Community Advisor
        Raja_ReddyCommunity Advisor
        Community Advisor
        December 25, 2023

        Hi @monish_gavali 

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

        Thanks

          M
          monish_gavaliAuthor
          Level 3
          December 25, 2023

          Let me explain what I did from starting.

           

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

           

           

           

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

           

           

           

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

           

           

           

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

           

           

           

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

           

          Path of existing template type:

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

           

           

           

          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.

           

            aanchal-sikka
            Community Advisor
            aanchal-sikkaCommunity Advisor
            Community Advisor
            December 26, 2023

            @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
              M
              monish_gavaliAuthor
              Level 3
              December 26, 2023

              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. 

                aanchal-sikka
                Community Advisor
                aanchal-sikkaCommunity AdvisorAccepted solution
                Community Advisor
                December 26, 2023

                @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:

                 

                 

                Aanchal Sikka
                  kautuk_sahni
                  Community Manager
                  kautuk_sahniCommunity Manager
                  Community Manager
                  January 2, 2024

                  @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
                  Terms & ConditionsAccessibility statement

                  Loading footer...