Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

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