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

how to copy paste component

  • September 30, 2025
  • 2 replies
  • 582 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

giuseppebaglio
giuseppebaglio
Level 10
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
Level 3
October 1, 2025

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

Karishma_begumSh
Karishma_begumSh
Level 4
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
    Level 3
    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
    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.

     

     

     

     

    Terms & ConditionsAccessibility statement

    Loading footer...