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

Dynamically update the div ID in the component.html

Avatar

Level 3

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
Level 10

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
Level 10

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.

Avatar

Level 3

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.