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

[Srinivas_Opti]

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

[h_kataria · Accepted solution]

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.