Detect component name after user interaction

Avatar

Avatar

Stochino

Avatar

Stochino

Stochino

26-03-2021

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.

click component html Interaction

Accepted Solutions (1)

Accepted Solutions (1)

Answers (3)

Answers (3)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

882

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

882
Arun_Patidar
MVP

28-03-2021

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.

 

Avatar

Avatar

Rohit_Utreja

Avatar

Rohit_Utreja

Rohit_Utreja

26-03-2021

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

Avatar

KiranVedantam1992

Avatar

KiranVedantam1992

KiranVedantam1992

26-03-2021

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.