Expand my Community achievements bar.

SOLVED

React SPA AEM Get Container Core Component ID

Avatar

Level 2

I'm following the code here: https://github.com/schoudry/eaem-extensions/tree/master/eaem-65-extensions/eaem-sites-spa-dm-video-c...

to create a React component that extends AEM Container core component so that I can get an ID that is set in the container dialog into the React component as a prop.  However, when I try to add the container to the page, nothing shows in the UI, although I can see it in the CRXDE. 


I've tried multiple different variations of this just so I can get the ID of a container, but nothing seems to work with the SPA editor.


Is this the proper way to get the ID of the container as a prop in a React component, or is there an easier way without extending the Container core component?

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

I ended getting the ID through the cqPath, then making a get call to get that containers json adding .json to the end of the URL

View solution in original post

5 Replies

Avatar

Level 2

I have tried that exact code for extending the Responsive Grid core component, but the problem is that Responsive Grid does not have a dialog, and whenever I tried to add a dialog in ui.apps, it would break the responsive grid.  I've seen that problem mentioned here before also.  

 

The code I originally posted here is extending the Container core component, and that comes with a dialog out of the box, although I can't find a configuration to get it to render when dragged into the editor.

 

After more research, I'm now wondering if there is just another way to get the ID from the container core component without extending it in the React component.  I tried using the model.json added to the end of the page url, and that does have information about the container, but unfortunately does not contain the properties set in the authoring dialog.


Do you know of another way to get the properties from the author dialog?

Avatar

Community Advisor

I was using the container component for aem core and that does have the dialog. you can explore that.

https://github.com/adobe/aem-react-core-wcm-components-spa/tree/master/src/container/container/v1

 



Arun Patidar

Avatar

Level 1

I see there is a config in the ui.frontend for this, but how would I use it as a React component where I could add custom code to it? I want to be able to make the container a flex box with options in the dialog to align content in different ways and create a custom grid.  Is it possible to do this without the style editor?

Avatar

Correct answer by
Level 2

I ended getting the ID through the cqPath, then making a get call to get that containers json adding .json to the end of the URL