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

Question

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/componentAI 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 Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO