Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

How to use data-sly-use in SPA React for content fragments?

Avatar

Level 4

Hi All,

We are working on custom SPA component which is supposed to take the given content fragment & use its field on page. 

In sites custom component we achieved this simply by using below snippet in html & it works fine. cfPath is content fragment path selected in component dialog's pathbrowser field.

<sly data-sly-test.cfPath="${'{0}/jcr:content/data/master' @ format=properties.cfPath}"
data-sly-use.cf="${cfPath}">
<p>${cf.fieldFromCF}</p>
<sly>

So, can anyone please help me to achieve the above SPA react?

Any hint on this would be helpful.

Thanks,

sesmic

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi, 

 

I think you might be confused about how the SPA React approach works. The idea is to delegate the rendering of components to the UI framework—in this case, React—so you no longer interact with HTL. Please check this link: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles... to better understand the parties involved in this architecture.

 

To use content fragment information, you should expose it through a REST service via GraphQL. Please refer to this resource to learn more about it: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/graphql... 

 

Hope this helps.

 



Esteban Bustamante

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi, 

 

I think you might be confused about how the SPA React approach works. The idea is to delegate the rendering of components to the UI framework—in this case, React—so you no longer interact with HTL. Please check this link: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles... to better understand the parties involved in this architecture.

 

To use content fragment information, you should expose it through a REST service via GraphQL. Please refer to this resource to learn more about it: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/graphql... 

 

Hope this helps.

 



Esteban Bustamante

Avatar

Level 4

Hi @EstebanBustamante ,

Thanks for the response. The links you provided looks useful, will go through it.

But I got the desired output by using Sling Model with resource resolver & content fragment path which is then used in my react component via props.

Thanks again