how to copy paste component | Community
Skip to main content
S
SudarshanV1
New Participant
September 30, 2025
Question

how to copy paste component

  • September 30, 2025
  • 2 replies
  • 581 views
<div class="a-container"
     data-sly-resource="${'subscribe' @ resourceType='xyz/components/content/subscribe'}"></div>
<div class="b-container"
     data-sly-resource="${'social' @ resourceType='xyz/components/content/social'}"></div>


i have two components and used as resource in other component.
now the problem is, author want to copy this resources from other place and paste in component.
Since its resource and not parsys, im not able to paste it. how to resolve this?

 

2 replies

Karishma_begumSh
Karishma_begumSh
New Participant
October 1, 2025

Hi @sudarshanv1 

  • data-sly-resource just renders another resource at runtime.
  • It doesn’t create an editable node structure inside your current component.
  • Because of that, in the editor, authors don’t see a "real" component instance they can copy/paste – they just see an include.

Use a Parsys

  • Instead of hardcoding data-sly-resource, give authors a drop zone (parsys/responsivegrid) inside your component.
  • Authors can then drag in subscribe or social (or copy-paste them from another place).
<div class="a-container"> <div data-sly-resource="${'a' @ resourceType='wcm/foundation/components/responsivegrid'}"></div> </div> <div class="b-container"> <div data-sly-resource="${'b' @ resourceType='wcm/foundation/components/responsivegrid'}"></div> </div>

or else try below one

Use Component Reference (cq:include / Experience Fragment / Reference Component)

  • Instead of hardcoding subscribe/social, you can expose a dialog option to pick a path to an existing component node (reference).
  • Then render it like:
<div class="a-container" data-sly-resource="${properties.subscribePath @ resourceType='xyz/components/content/subscribe'}"></div>
  • Or use cq:include with path reference.
  • Authors can then copy/paste the reference node anywhere.

    Hope this helpful:)

Regards,

Karishma.

 

    S
    SudarshanV1Author
    New Participant
    October 1, 2025

    How do i restrict to allow only one particular type of resource to add in container/Parsys in this case

    M
    manishmanjul
    New Participant
    October 3, 2025

     In the policy for those containers, restrict Allowed components to just your
    subscribe and social (so authors can paste/drag only those).

    Note: You need to create custom container component so that it will not impact existing container component.

     

     

     

     

    giuseppebaglio
    giuseppebaglio
    New Participant
    September 30, 2025

    hi @sudarshanv1, 

    you can replace the hardcoded data-sly-resource calls with either a Container/Parsys component (like core/wcm/components/container/v1/container) so authors can freely add/copy/rearrange components.

    Use the Core Components Container which creates a proper authoring container where authors can drag, drop, copy, and paste components while maintaining responsive layout capabilities

    <!-- Replace your hardcoded resources with containers --> <div class="a-container"> <div data-sly-resource="${'subscribe-container' @ resourceType='core/wcm/components/container/v1/container'}" data-sly-unwrap="${!wcmmode.edit}"></div> </div> <div class="b-container"> <div data-sly-resource="${'social-container' @ resourceType='core/wcm/components/container/v1/container'}" data-sly-unwrap="${!wcmmode.edit}"></div> </div>

    Then you can configure allowed components via template policies to restrict which components authors can add to each container.

    S
    SudarshanV1Author
    New Participant
    October 1, 2025

    How do i restrict to allow only one particular type of resource to add in container in this case

    Terms & ConditionsAccessibility statement

    Loading footer...