Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

AEM Remote SPA with React How to fetch and pass model.json to ResponsiveGrid component

Avatar

Level 1

I am using react remote spa 

In authoring instance i am using parsys, users are adding some editable react custom components and everything is getting rendered fine as per default configurations with WKND app code.

 

Now i want to add some business logic, My Requirement is i would be able to pass JSON data to 

<ResponsiveGrid> component instead of passing pagePath and itemPath. Just wanted to stop implicit API call happening to fetch modal.json.
 
I want to fetch modal.json like JSON from custom source and pass it to responsive grid.
As per documentation I tried passing modal={json} prop, where i kept json with same as  AEM modal,json graphql output.
It does't render page.
 
I would like to know how we can pass JSON to ResponsiveGrid component and what will be the format structure.
 
2 Replies

Avatar

Level 5

First question would be, are you using a custom endpoint instead of calling model.json directly?is that the reason you are trying to pass Json directly? If that's the case are you using local model Dev client to talk to your custom endpoint.? This is crucial for maintaining the mapping of paths and respective model Json. If you don't intend to set page path and item path then at the bare min I assume you have to set cqpath at the component level.. Or else the component will not know how to enable editing on the component. It will be nice if you can mock a sample app and share public url for troubleshooting your use case 

Avatar

Level 1

Yes, I want to use external data source which will provide me dynamically (from outside of AEM ) updated model.json

I am using wknd app for editable react components. just that there are some proxies created where <Responsive Grid /> component is fetching corresponding page model json from AEM using some implicit api calls. i just want to have control over that piece of code that instead on AEM model i can get same type of data from somewhere else.

 

I am just exploring and not hosted app yet.