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

How to Get Unique ID of Component HTML

sagrawal
Level 2
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.

 

 

0 Replies
Nupur_Jain
Community Advisor
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

 

Suraj_Kamdi
Community Advisor
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