Expand my Community achievements bar.

Parsys is not appearing in experience fragment in SPA Editor React project

Avatar

Level 9

I am trying to create an experience fragment for SPA by extending "cq/experience-fragments/components/xfpage". I just followed the instructions on the WKND site. I could see XF related features on the left side but I don't see any placeholder (parsys) to add a component. I double checked the index.js and entrypoint of the SPA which is provided by the AEM SPA Editor JS SD and.  Both Sightely and SPA entry has the root element "spa-root". But still the responsive grid is not appearing on the XF page. Note I have the same setup for a regular page where I could see the parsys. I have a problem only in XF pages.

 

Is there any additional config I should make?

 

Body.html

 

 

<div id="spa-root" data-sly-resource="${resource @ resourceType='cq/remote/content/renderer/request/handler'}"></div>
<sly data-sly-include="footerlibs.html"/>

 

 

 

Mario248_1-1700653889439.png

 

ui.frontend/src/index.js

 

 

document.addEventListener('DOMContentLoaded', () => {
  ModelManager.initialize().then((pageModel) => {
    const history = createBrowserHistory()
    render(
      <Router history={history}>
        <App
          history={history}
          cqChildren={pageModel[Constants.CHILDREN_PROP]}
          cqItems={pageModel[Constants.ITEMS_PROP]}
          cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
          cqPath={pageModel[Constants.PATH_PROP]}
          locationPathname={window.location.pathname}
        />
      </Router>,
      document.getElementById('spa-root')
    )
  })
})

 

 

 

Mario248_0-1700653830539.png

 

7 Replies

Avatar

Community Advisor

Hi @Mario248,

For the SPA Editor React project, you need to create experience fragment by extending "spa-project-core/components/xf-page".

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
  xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
  jcr:primaryType="cq:Component"
  jcr:title="Experience Fragment"
  sling:resourceSuperType="spa-project-core/components/xf-page"
  componentGroup=".hidden"/>

https://github.com/adobe/aem-project-archetype/blob/e99017e1abe8bfbf0c9f996d413958f170da9c71/src/mai...

 

Avatar

Level 9

It is not working even by extending "spa-project-core/components/xf-page". FYI, this component is not having anything. 

 

Mario248_0-1700724781719.png

 

Avatar

Administrator

@Mario248 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni

Avatar

Level 9

I think the issue is not about policy but I crossed checked the component and layout policy. The problem is with loading responsive grid component as part of page component itself. 

Avatar

Community Advisor

You need to extend the responsivegrid, maybe the json  response is not available in editor for custom system. 

 

https://github.com/arunpatidar02/aemaacs-spa-aemlab/pull/2/commits/16678e231d1a69815e9e8c387e3fad400...



Arun Patidar