Passing paramater to the resource from HTL/Sightly template

[anasustic]

I have a component that uses two different resources in its HTL/Sightly template.

Is there a way to pass a parameter, to the say in my example the eventResource template, so that I can depending on this passed paramter change a css class on it?

<ul data-sly-list.teasers="${model.resourceList}" class="teaser-list-alternating c-list--reset">
<sly data-sly-test="${teasers.eventTeaser}"
data-sly-resource="${teasers.resource @ resourceType='xxx/components/content/eventTeaser'}"></sly>
<li data-sly-test="${teasers.contentTeaser}" class="l-stack l-stack--horse"
data-component-hook-content-hub="teaser"
data-sly-resource="${teasers.resource @ resourceType='xxx/components/content/contentHubTeaser'}"></li>
</ul>

I tried using `data-sly-resource="${teasers.resource @ resourceType='xxx/components/content/eventTeaser', requestAttributes=model.config, selectors='blabla'}` to no availability.

@RequestAttribute(name = "contentHub")
private String contentHub;

The requestAttribute `contentHub` in the eventTeaser model is alway null and I am not sure how to get the selectors value in the eventTeaser template.

I can do it using TypeScript on the front end part but it is not very clean.

[arunpatidar · Accepted solution]

Hi, 

Please check HTL specification https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#229-resource

You can't pass parameters but you can add selectors.

[anasustic]

Hi 

Thanks for your answer. I read the specifications several times but I am not sure how can I use the selectors in the other component.

Say I use the selectors like this. 

<sly data-sly-test="${teasers.eventTeaser}"
     data-sly-resource="${teasers.resource @ resourceType='xxx/components/content/eventTeaser', selectors='selector1.selector2'}"></sly> 

 I am sorry but I am not clear how to fetch the selectors in the eventTeaser Model or its respective HTL/Sightly template?

[arunpatidar]

In a model,

you can get selector using request object , example 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-do-i-get-a-selector-fr... 

[anasustic]

Thank you very much.

I was able to solve it using the selector indeed and reading the selector value directly from the other sightly template.

data-sly-resource="${teasers.resource @ resourceType='xxx/components/content/eventTeaser', requestAttributes=model.config, selectors='inContentHub'}

 In the eventTeaser template I then used the following:

data-sly-set.inContentHub="${'inContentHub' == request.requestPathInfo.selectorString}

and depending on the value of the inContentHub variable I was able to change the css class which was my ultimate goal.