data-sly-resource render experience-fragment in a custom component and pass a variable to experience-fragment | Community
Skip to main content
V
vhochsteinTef
Level 2
June 22, 2023

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

  • June 22, 2023
  • 2 replies
  • 2507 views

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

2 replies

Tanika02
Tanika02
Level 7
June 22, 2023

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>

 

 

 

    V
    vhochsteinTefAuthor
    Level 2
    June 27, 2023

    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
      Community Advisor
      krishna_saiCommunity Advisor
      Community Advisor
      June 23, 2023

      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

        V
        vhochsteinTefAuthor
        Level 2
        June 26, 2023

        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 ?


          V
          vhochsteinTefAuthor
          Level 2
          June 27, 2023

          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

            Terms & ConditionsAccessibility statement

            Loading footer...