Experience Fragment in multi field | Community
Skip to main content
B
BhavaniBharani
New Participant
January 7, 2024
Solved

Experience Fragment in multi field

  • January 7, 2024
  • 3 replies
  • 1269 views

Hello,

 I am having a requirement where i have a grid with 3 images with expand arrow in the Page. (Eg: Component1). On click on Expand arrow, i will be getting an pop with some logo and component(Component2). I want to add the component 2 in Experience fragments. Eg: I will be creating 3 Experience Fragments with the component2 on each with different contents.I want to author the Experience Fragment path in the component1 dialog. Say, Component1 will have a multi field with the grid title and path of the Experience Fragment in the dialog. 

 

I have changed the sling:resourceType to browse my experience fragment path in component1, some one please help me how i can fetch the multi field XF path in the backend and in HTML. Thanks in advance.

 

 

Regards,

Bhavani Bharanidharan

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Kamal_Kishor

Hi @bhavanibharani : In sightly/HTL of your component, you can include the content of experience fragment using the XF path that you will specify in your component property.
For each grid/image, you will have a XF path and you will render it using 'data-sly-resource'. You will have to design your html and then have JS based interaction, so that on click of expand arrow, it will open the XP content in a pop-up.

You can refer these links on how to load experience fragment content on a page using its path.
https://sourcedcode.com/blog/aem/dynamically-include-an-experience-fragment-in-sightly#:~:text=Sightly%20Implementation&text=The%20first%20example%20uses%20sightly,value%20here%20is%20hard%20coded.

https://stackoverflow.com/questions/49875595/reference-an-experience-fragment-dynamically-in-aem

 

3 replies

B
BhavaniBharaniAuthor
New Participant
January 9, 2024

Hi, i am getting the RecursionTooDeepException, below is my piece of code. As i tried to print the value of teaser.linkURL in the <p> tag, i getting the XF path with .html extension. Same way, i tried to hard code the value of XF path with html extension, i am getting the RecursionTooDeepException. I think if i get the value of path without html then it will work fine. Can anyone suggest how i can proceed. Thanks in advance.

<div id="myModal" class="modal background-${model.bgColor}">
<!-- Modal content -->
<div class="modal-content ${model.bgColor}">
<span class="close"></span>
<sly
data-sly-resource="${@path=teaser.linkURL,selectors='content', wcmmode='disabled'}"></sly>
</div>
</div>

 

Regards,

Bhavani Bharanidharan

 

    Kamal_Kishor
    Kamal_Kishor
    New Participant
    January 9, 2024

    @bhavanibharani : Please refer this link where a similar issue was faced for RecursionTooDeepException.
    It is primarily because of how you are rendering the path and selectors.

    https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/sightly-in-aem-6-3-org-apache-sling-api-request/m-p/267597

     

      varun_m1
      varun_m1
      New Participant
      January 8, 2024

      Hi, you can use the data-sly-list to iterate over this part for the multifield,

      <sly data-sly-resource="${@path= list.xfPath, selectors='content', wcmmode='disabled'}"></sly>

      <sly data-sly-resource="${@path= list.xfPath,
      selectors='content', wcmmode='disabled'}"></sly>

       

      OR 

       

      you can use a java model and then iterate the list,

      <sly data-sly-use.model="com.mysite.models.XPComponent"></sly> <sly data-sly-list.xfPaths = ${model.xfPaths}> <sly data-sly-resource="${@path= xfPaths.xfResource, selectors='content', wcmmode='disabled'}"></sly> </sly>

       

        Kamal_Kishor
        Kamal_KishorAccepted solution
        New Participant
        January 8, 2024

        Hi @bhavanibharani : In sightly/HTL of your component, you can include the content of experience fragment using the XF path that you will specify in your component property.
        For each grid/image, you will have a XF path and you will render it using 'data-sly-resource'. You will have to design your html and then have JS based interaction, so that on click of expand arrow, it will open the XP content in a pop-up.

        You can refer these links on how to load experience fragment content on a page using its path.
        https://sourcedcode.com/blog/aem/dynamically-include-an-experience-fragment-in-sightly#:~:text=Sightly%20Implementation&text=The%20first%20example%20uses%20sightly,value%20here%20is%20hard%20coded.

        https://stackoverflow.com/questions/49875595/reference-an-experience-fragment-dynamically-in-aem

         

          Terms & ConditionsAccessibility statement

          Loading footer...