Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Detect component name after user interaction

Stochino
Level 2
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
Bhuwan_B
Correct answer by
Community Advisor
Community Advisor
4 Replies
Kiran_Vedantam
Community Advisor
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.

Rohit_Utreja
Level 4
Level 4

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. 

 

 

Bhuwan_B
Correct answer by
Community Advisor
Community Advisor