Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

How to Get Unique ID of Component HTML

Avatar

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

Avatar

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!

Thanks!

Nupur

 

Avatar

Community Advisor

@sagrawal 

Just create another sling model which extend to your component model 

@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)
        .filter(StringUtils::isNotBlank)
        .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