Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Control component node name if authored multiple times on page

Avatar

Level 2

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!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.



Esteban Bustamante

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @Anudeep_Kumar 

 

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

Avatar

Level 2

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

Avatar

Correct answer by
Community Advisor

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.



Esteban Bustamante