Experience Fragment in multi field

[BhavaniBharani]

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

[Kamal_Kishor · Accepted solution]

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=Sight....

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

[varun_m1]

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>

[BhavaniBharani]

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]

@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-apa...