Expand my Community achievements bar.

SOLVED

Detect component name after user interaction

Avatar

Level 2

Hi all,

I'm using Adobe AEM 6.5 and I'm looking for a solution to my problem.

All I need is that when an user clicks on an html portion (a button, an input etc.), I have to be able to understand which component that portion belongs to. Is there an OOB way to detect the component name after an user interaction (e.g. a click)?

Otherwise, I was thinking to customize the html related to every component by adding an extra html line with helpful infos in order to detect the component name with javascript. By the way I wonder if is there a way to add this extra line once for all component, avoiding to customize every html file.

 

Has anyone had the same need? Please help me, I've been thinking about a solution for weeks.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
4 Replies

Avatar

Community Advisor

Hi @Stochino,

 

For this, I don't think there is anything OOTB. You can customize it like below:

  1. Create a tracking component
  2. Add it [via data-sly-resource] to all the component
  3. Add a specific data variable [like parent component name] in each component and track it on any action via this tracking component

Hope this helps.

 

Thanks,

Kiran Vedantam.

Avatar

Community Advisor

Hi @Stochino,

 

By default, the Component name is getting displayed at the bottom right corner of the component when you hover the cursor on it.

 

Otherwise, you can add following code in every component.

<div data-sly-test.emptyAuthor= "${(wcmmode.edit || wcmmode.design)}">

      This is test component. Edit this component to make the changes.

</div>

 

You can change this "test component" to the real component name. 

 

 

Avatar

Correct answer by
Community Advisor

Avatar

Community Advisor

Hi,

Yes, there is a way to add the component name(or node name) as a class using Sling Filter

https://github.com/Adobe-Consulting-Services/acs-aem-samples/blob/master/core/src/main/java/com/adob...

https://github.com/arunpatidar02/aem63app-repo/blob/master/java/XFFilter.java

or use sling rewriter pipeline to modify html while generating.

 



Arun Patidar