React SPA AEM Get Container Core Component ID

[adf33avs]

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?

[arunpatidar]

Hi,

Have you tried core components https://github.com/adobe/aem-react-core-wcm-components

for extending core components you can check below 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-extend-responsivegr...

[adf33avs]

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?

[arunpatidar]

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

[bintilitwo]

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?

[adf33avs · Accepted solution]

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