How to Dynamically Include an Experience Fragment in Sightly

In this article, we will dynamically reference an AEM experience fragment to a page, dynamically using code.


Sightly Implementation

Hard Coded Example
The first example uses sightly to reference an experience fragment, /content/experience-fragments/we-retail/equipment, and the required variation, master. This will only work when the path includes the experience fragment variation path. The value here is hard coded.

1
2
<sly data-sly-resource="${@path='/content/experience-fragments/we-retail/equipment/master',
   selectors='content', wcmmode='disabled'}"
></sly>

Dynamic Example
In the second example, we can see that our component adapts to the com.mysite.models.component.MyCustomComponent, Sling Model backend, and then it exposes the experience fragment in the exPath property. The value returned from the exPath is ‘/content/experience-fragments/we-retail/equipment/master’.

1
2
3
4
<sly data-sly-use.cmp="com.mysite.models.component.MyCustomComponent"></sly>

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

Was this post helpful?

Hello, I am an active Adobe Community Advisor & a certified Lead AEM Developer who is currently working as a Senior AEM Full Stack Developer. I have over a decade of overall web engineering experience and many years (more than 6) of AEM experience in practice. I hope to give back to the AEM Full Stack Development community by sharing my knowledge with the world.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top