Highlighted

How to Get Unique ID of Component HTML

sagrawal

27-08-2020

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.

 

 

Replies

Highlighted

Nupur_Jain

MVP

28-08-2020

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

 

Highlighted

Suraj_Kamdi

MVP

28-08-2020

@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