Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
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
Level 7

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
Level 7

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.