data-sly-resource render experience-fragment in a custom component and pass a variable to experience-fragment

[vhochsteinTef]

HI,

I ve got a custom component which renders a list of experience Fragments.
Experience Fragments includes a custom component as well.

please see code in my component html file:

<sly data-sly-list.stageListItems="${stages.stageSlideList}">

  <div class="stage-item">

     <sly data-sly-test="${stageListItems.stagePath}" data-sly-resource="${stageListItems.stagePath @wcmmode='disabled',selectors='content'}" />

   </div>

</sly>

I want to pass a variable to data-sly-resource (you are the first item)
so experience fragment rendering process will pass that variable to custom component inside of it and html template of that component will use that variable value to render itself accordingly.

Would be great if you could share a solution how to accomplish that.

thanks a lot for your support in advance.

--
Volker

[Tanika02]

Hello @vhochsteinTef - 

<sly data-sly-list.stageListItems="${stages.stageSlideList}">
  <div class="stage-item">
    <sly data-sly-test="${stageListItems.stagePath}" data-sly-template.myTemplate="${stageListItems.stagePath}" />
    <sly data-sly-call="${myTemplate @wcmmode='disabled', myVariable=myValue}" />
  </div>
</sly>

In the code above, we define a template called myTemplate using data-sly-template. The template is assigned the value ${stageListItems.stagePath}.

Then, we use data-sly-call to invoke the template and pass the variables to it. In this case, we pass myVariable with the value myValue to the template.

Next, modify the HTML template of the custom component inside the experience fragment to include the template invocation and access the variable value:

<!-- Inside the HTML template of the custom component -->
<sly data-sly-template.myTemplate="${@ myVariable}">
  <div>
    <p>Variable value: ${myVariable}</p>
  </div>
</sly>

[vhochsteinTef]

HI Tanika, 

thanks a lot for your response.

It s not possible to use templates using data-sly-call 
I am including experience fragment using data-sly-resource into my custom page component.
and I want to pass a parameter to a custom component inside of that experience fragment.

[krishna_sai]

Hi @vhochsteinTef , Generally we cannot pass any params through data-sly-resource but you can pass values via selectors.

<sly data-sly-list.stageListItems="${stages.stageSlideList}">
  <div class="stage-item">
     <sly data-sly-test="${stageListItems.stagePath}" data-sly-resource="${stageListItems.stagePath @wcmmode='disabled',selectors=['content','your_custom_value']}" />
   </div>
</sly>

In your custom component's html or sling model you can retrieve the selectors from this passed request.

${request.requestPathInfo.selectors[0]} or request.getRequestPathInfo().getSelectors()

Hope this helps,
Krishna

[vhochsteinTef]

Hi Krishna,

Sorry, for my late response, but I ve tried it for a while, but your suggestion is not working for me.

If I call 

request.getRequestPathInfo().getSelectors()

in my sling model. It s always empty. Although I am passing selectors to data-sly-resource call of experience fragment.
My Experience Fragment is just including that single custom component. 

Any idea why ?

[vhochsteinTef]

Hi,

maybe to add to this...

Looks like Selectors are only available for Rendering Process of Experiment Fragment itself.
How might I get access to these inside of my model for a component inside of Experient Fragment ?

Thanks a lot for your support in advance.

--

Volker

[krishna_sai]

Hi @vhochsteinTef ,
Can you please try with below code

<sly data-sly-list.stageListItems="${stages.stageSlideList}">
  <div class="stage-item">
     <sly data-sly-set.selector="content.your_custom_selector" data-sly-test="${stageListItems.stagePath}" data-sly-resource="${stageListItems.stagePath @wcmmode='disabled',selectors=selector}" />
   </div>
</sly>

and you should be able to retrieve selectors in your component's slingmodel

Hope this helps,
Krishna

[vhochsteinTef]

Hi,

I ve tried it out but still I cannot see any selectors in my model:

Following Code in my model:

@SlingObject

private SlingHttpServletRequest request;

somewhere in method:

log.info("selectors: {}", request.getRequestPathInfo().getSelectors());

Output: 

aem.core.models.Stage selectors: {}

Thanks a lot for your support in advance.