How to extend AEM CIF Dialog

[MuhammadAh1]

Hi,

There is a requirement where we may need to customize Product/Catalog picker which comes from CIF cloud-ready-feature add on, as shown in below screenshot using reactJS data in below dialog is being displayed.

wanted to know what kind of approach can be followed if we need to extend this feature and do our own customization.

@aanchal-sikka @Imran__Khan @arunpatidar -- Any Suggestions

[TarunKumar]

HI @MuhammadAh1 ,

You can put your custom React code in the ui.frontend module which is a webpack project. A majority of the SPA development and testing is done in the webpack project. When a production build is triggered, the SPA is built and compiled using webpack. The compiled artifacts (CSS and Javascript) are copied into the ui.apps module which is then deployed to the AEM runtime.

You can follow below link for more details on it:

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...


Thanks
Tarun

[SaurbhSi]

I think he is asking on standard way of extending AEM CIF dialogs just as we have AEM CIF Backend classes e.g. ProductRetriever to modify GraphQL call. There is no document on standard way of modifying AEM CIF Category / Dialog picker.