Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

How to Get Unique ID of Component HTML


Level 2

How to Get Unique ID of Component HTML. 


I need to add same component multiple times 2-3 time on a page and this comp has config field as portal_id. 

Reading on comp html.

<INPUT TYPE=hidden id="portalid" name="portalid" VALUE="${properties.portalid}"/>


So for a page if  component added 2 times then this line is set 2 times in html.  I have two different value.


<INPUT TYPE=hidden id="portalid" name="portalid" VALUE="1001"/>

<INPUT TYPE=hidden id="portalid" name="portalid" VALUE="1002"/>


But I want to append some unique value to each portal id variable to filter out the variable value with comp id wise in component js file.


Any suggestion would help.



2 Replies


Community Advisor

Hi @sagrawal 


You can use component name as a identifier to append after each portal ID like


<INPUT TYPE=hidden id="portalid" name="portalid" VALUE="${[properties.portalid, component.name] @ join = '-'}"/>


where component is the global HTL object.


The HTMl after the change will be generated like

<INPUT TYPE=hidden id="portalid" name="portalid" VALUE="1001-my-component"/>

<INPUT TYPE=hidden id="portalid" name="portalid" VALUE="1002-my-component"/>


Hope it helps!





Community Advisor


Just create another sling model which extend to your component model 

    adaptables = {SlingHttpServletRequest.class, Resource.class},
    adapters = {ComponentModel.class},
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public abstract class ComponentModel{
  public final String COMPONENT_ID = this.getClass().getSimpleName();

  @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
  public String id;

  @SlingObject protected Resource resource;

  public String getUid() {
    return Optional.ofNullable(id)
        .orElseGet(() -> SlingModelUtil.getUid(getIdPrefix(), resource.getPath()));
  protected String getIdPrefix() {
    return COMPONENT_ID;

Here getUid() will generate unique id for each of newly added component.


Please let me know if you need any help on this.


Thanks and Regards,

Suraj Kamdi