Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

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

Avatar

Level 2

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
7 Replies

Avatar

Community Advisor

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>

 

 

 

Avatar

Level 2

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.



Avatar

Community Advisor

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

Avatar

Level 2

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 ?


Avatar

Level 2

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

Avatar

Community Advisor

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

Avatar

Level 2

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.