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

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

Avatar

Level 4

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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.