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

Dynamically update the div ID in the component.html

Avatar

Level 4

Hi Team,

Could you please help me with how to dynamically update the DIV ID within the component.html based on the number of occurences in the page.

<div id="testcontainer1">
</div>

 

Here the id=testcontainer1 should get dynamically updated as 1,2,3,so on.. based on the number of components being placed on the page.

 

Thanks!

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi @Keerthi97 ,

There are couple of things I can suggest here:-

  • If for your requirement you can manage just to have a unique id for every time a component is dropped in a page- ex-  testcontainer-someUniqueId, then use this documentation. You can have a js code to manipulate the component just by searching the id. - https://aem.redquark.org/2019/12/generate-id-for-aem-components.html
  • if you have to use 1,2,3... then you will have to right a custom js snippet which will iterate through the dom by keeping the count of the iteration it finds, look for the testcontainer id and append -1,-2,-3 and so on. This has to be done completely with custom js code. Here your js will run every time you load a page in order to update the count as and when new component is added or removed.

 

View solution in original post

4 Replies

Avatar

Correct answer by
Employee Advisor

Hi @Keerthi97 ,

There are couple of things I can suggest here:-

  • If for your requirement you can manage just to have a unique id for every time a component is dropped in a page- ex-  testcontainer-someUniqueId, then use this documentation. You can have a js code to manipulate the component just by searching the id. - https://aem.redquark.org/2019/12/generate-id-for-aem-components.html
  • if you have to use 1,2,3... then you will have to right a custom js snippet which will iterate through the dom by keeping the count of the iteration it finds, look for the testcontainer id and append -1,-2,-3 and so on. This has to be done completely with custom js code. Here your js will run every time you load a page in order to update the count as and when new component is added or removed.

 

Avatar

Community Advisor

Hi,

you can use below for dynamic id

<div id="testcontainer-${resource.path.hashCode}">
</div>

 To add number based on occurrence, use Front-end code to append id/data attribute for count.



Arun Patidar

Avatar

Level 4

Hi @arunpatidar ,

 

Thanks for your response.

Could you please explain how and from where the value of '${resource.path.hashCode} gets appended in html

<div id="testcontainer-${resource.path.hashCode}">
</div>

Thanks.

Avatar

Community Advisor

@Keerthi97 ,

 

If I understand your requirement correctly, then please follow below process to implement.

1. Implement a component which can be added to template so that Editors can create pages out of it.

2. Let's assume we have created a page which has component.

3. Develop component logic to read all components added to the page and simpley display that number using sling model.