How to use data-sly-use in SPA React for content fragments? | Community
Skip to main content
sesmic
sesmic
Level 4
August 29, 2024
Solved

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

  • August 29, 2024
  • 1 reply
  • 1087 views

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

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 EstebanBustamante

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-headless/spa-editor/react/map-components#mapping-approach 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-api/content-fragments 

 

Hope this helps.

 

1 reply

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
September 4, 2024

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-headless/spa-editor/react/map-components#mapping-approach 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-api/content-fragments 

 

Hope this helps.

 

Esteban Bustamante
    sesmic
    sesmicAuthor
    Level 4
    September 5, 2024

    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

      Terms & ConditionsAccessibility statement

      Loading footer...