Is there any Way to create popup in AEM React SPA.

[ashikg3]

Hello Everyone,

Is there any way to create a popup in AEM React SPA? Currently, I am handling all by CSS and Experience Fragment Component. But it's not coming good alone.

I have created a Model Component in AEM. Where I want to feed Experience Template HTML or JSON code to model it will help to handle the popup by trigger option. Now can anyone help me by giving details? How I can feed experience fragment template code to my model component?

I have added an Image for a better understanding of what I want to do.

Or is there any other best way to make a custom dynamic popup in AEM.

Thanks

[mahi1729]

Have you managed to get experience fragment working with react spa to start with? By default experience fragment when included in page will be returned as Json and not html. So you may need to explain how you are intending to obtain html. There are ways to achieve but then markup is generated by sightly version and may not necessarily be inline with your react markup. Important point to understand is unless you rewrite your experience fragment template to render using react it will not be interpreted by your react code. 

Now let's assume you have a new popup modal component and just for testing hardcode some html and let it be returned in your sling model exporter. Get this working inside aem with or without the trigger. This will be essential for you to go further. Now in dialog of this component you can provide two options. One is RTE or text component where user can author content directly and other option is selecting an experience fragment variation. Java code can be written to obtain sling model for xf and send it along with the other properties of popup modal Json. I hope you got an idea and realization that this requires xf as react template and not the traditional htl template, changes on Java also.

Once you share more details based on these inputs, will share more inputs as needed. Thanks 

[ashikg3]

yes. Experience Fragment Component is working fine. On Insecpt I see it's return HTML as Json and Experience Fragment URL

[mahi1729 · Accepted solution]

Okay, if experience fragment component is loading fine for you on the react app. The easiest way is to create a proxy component that extends experience fragment and call it Popup Modal, and override any labels or fields in CQ Dialog. At this point if you map your new proxy component to react component,  all the components inside experience fragment will render. Just confirm this works as expected even with proxy component.

Next step is to create a new react component or modify your existing react component for popup modal to extend Container component from Adobe's SPA React Editable Components (https://github.com/adobe/aem-react-editable-components/blob/v1.1.11/src/components/Container.tsx). And in the render method you can pass this.components (Container provides the entire experience fragment as JSX) to your modal popup component assuming it accepts React components as children. Assuming your React modal component already has some kind of a trigger button to show and hide modal this should work fine. More customizations or optimizations can be done once you reach to this point. Hope this info helps.

Thanks !