Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How I can include xf directly (not through parsys) in aem component through sightly | Experience Fragments | HTL

Avatar

Level 4

 

Can I include xf directly on the AEM component through Sightly?

 

For ex:

 

this is existing code: 

 <sly data-sly-test=${currentStyle.myFlag}>
data-sly-resource="${ @path='myContent', resourceType='/apps/my-common/components/content/mycomponent'}"
data-sly-unwrap="${!wcmmode.edit}"></div>
</sly> 

 

But now I have created an xf for mycomponent and now I want to directly use it on the AEM component.

 

Like: 

 

 <sly data-sly-test=${currentStyle.myFlag}>
data-sly-resource="${ @path='myXf', resourceType='content/experience-fragments/sprint/shared/mycomponentXF'}"
data-sly-unwrap="${!wcmmode.edit}"></div>
</sly> 

 

Can anyone suggest is this possible or a good approach?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Abhishekty 

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.

<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’.

<sly data-sly-use.cmp="com.mysite.models.component.MyCustomComponent"></sly>
<sly data-sly-resource="${@path=cmp.exPath,
   selectors='content', wcmmode='disabled'}"></sly>

 

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @Abhishekty ,

Try this,

<sly data-sly-resource="${@path='content/experience-fragments/sprint/shared/mycomponentXF',
   selectors='content', wcmmode='disabled'}"></sly>

Hope that helps!

Regards,

Santosh

Avatar

Correct answer by
Community Advisor

@Abhishekty 

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.

<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’.

<sly data-sly-use.cmp="com.mysite.models.component.MyCustomComponent"></sly>
<sly data-sly-resource="${@path=cmp.exPath,
   selectors='content', wcmmode='disabled'}"></sly>