AEM6.5 CQ touch dialog with component path added to page to be displayed needs to displayed on dialog | Community
Skip to main content
S
Srinivas_Opti
Level 3
July 4, 2024
Solved

AEM6.5 CQ touch dialog with component path added to page to be displayed needs to displayed on dialog

  • July 4, 2024
  • 1 reply
  • 766 views

Hello,

In the cq touch dialog for the component A added to page .
1> I will need to add a disabled field to the dialog which will show component path added to the page,
2> Also just side of it need a copy button so that we can copy the field value.


So if the page path was /content/application/en/page the component path will be /content/application/en/page/jcr:content/componentA

I will need to copy this value and added this component path to different component B dialog , then component A path will used in component B slightly code with data-sly-resource.

Please let me know how could be achieve it.


Regards,
Srinivas

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 h_kataria

You can add two fields to component from where you want to copy the path :

 

<compPath jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/text" granite:class="actual-component-path" text="${requestPathInfo.suffix}"/> <button jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/button" granite:class="copy-component-path" text="Copy component path"/>

 

 And then can write small js to copy it on click of button
Sample js

 

$(".copy-component-path").click(function(){ var button = $(this); var compPath = button.parent().find(".actual-component-path").text(); navigator.clipboard.writeText(compPath); })

 

And if I may suggest an alternative approach, you can write a sling model in your second component and can easily find the first component's path which you want to include in that sling model using a simple query or any other option that you find suitable.
Then call that sling model in your HTL to get the component path and include in data-sly-resource. Will save you all the hassle of going through copy/past etc.
Hope this helps.

1 reply

h_kataria
Community Advisor
h_katariaCommunity AdvisorAccepted solution
Community Advisor
July 4, 2024

You can add two fields to component from where you want to copy the path :

 

<compPath jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/text" granite:class="actual-component-path" text="${requestPathInfo.suffix}"/> <button jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/button" granite:class="copy-component-path" text="Copy component path"/>

 

 And then can write small js to copy it on click of button
Sample js

 

$(".copy-component-path").click(function(){ var button = $(this); var compPath = button.parent().find(".actual-component-path").text(); navigator.clipboard.writeText(compPath); })

 

And if I may suggest an alternative approach, you can write a sling model in your second component and can easily find the first component's path which you want to include in that sling model using a simple query or any other option that you find suitable.
Then call that sling model in your HTL to get the component path and include in data-sly-resource. Will save you all the hassle of going through copy/past etc.
Hope this helps.

Terms & ConditionsAccessibility statement

Loading footer...