Control component node name if authored multiple times on page

[Anudeep_Kumar]

Hi All,

Is there any way to control the node name of the component on page when same component has been drag and dropped multiple times on page.
Example: there is a custom component named "Product", if I drag and drop same component multiple times on page a random number is appending on component node name i.e "product_2232448". is there any way to control the random number getting appended to have the one of our choice?

if there is any possible solution will this impact all the components at environment level?

Thanks in Advance!

[Rohit_Utreja]

Hi @Anudeep_Kumar 

Could you please share the use-case?
How are you planning to use the node name after defining it?

[Anudeep_Kumar]

Hi @Rohit_Utreja , 

our use case is like on first drag and drop it should be "product" and the next as "product_1", then "product_2".... so on.

Thanks,
Anudeep

[aanchal-sikka]

Please refer to the discussion on:

https://stackoverflow.com/questions/54602200/how-can-i-change-the-name-of-the-node-aem-creates-when-... 

Please do share your findings with us.

[EstebanBustamante · Accepted solution]

Why the name matters? You can still target a specific iteration of the same component by using CSS selectors or javascript,

You could do something like this using CSS:

/* Where "product" is your component name */
div.product:nth-child(2) {
  background: red;
}

If the name is for some audit or SEO and you really need it you can try to use the SlingPostProcessor.class OR you could add it manually via JS.