How to Get Unique ID of Component HTML

[sagrawal]

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.

[Nupur_Jain]

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

[Suraj_Kamdi]

@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