Dynamically update the div ID in the component.html

[Keerthi97]

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!

[Anish-Sinha · Accepted solution]

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.

[arunpatidar]

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.

[Keerthi97]

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.

[Anny0505]

@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.