How to write forms component using React?

[DavidZhang]

Any suggestion?

[Avinash_Gupta_]

Hi @DavidZhang 

Would you please provide more details about the use case you want to implement. Refer to the following link if your ask was only to create a form in React.js 

https://reactjs.org/docs/forms.html 

[DavidZhang]

I mean how to use React in AEM Forms addon. I didn't see any example on how to integrate AEM forms component to React.

[Avinash_Gupta_]

Hi @DavidZhang 

For implementing it for the AEM forms also, it would follow the similar approach to create React SPA component in AEM. You only have to assign it under the similar component group name as "Adaptive Form"  so that this component would be listed to drag drop on the forms. 

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

Hope this helps.

[DavidZhang]

I saw that before. Still, my blocking issue is how to import the global variables and forms page context parameters, for a forms component, for JSP file, we can use:

<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<guide:initializeBean name="guideField" className="com.adobe.aemds.guide.common.GuideFileUpload"/>

in init.jsp

and:

<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<!--<%@include file="/apps/nas/custom-component/nasglobal.jsp"%>-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcpeiotgMZUYRe2UgvNDyMCECBMMaIeM0"></script>
<div id="googleMap" class="${cmpDisaply}" style="width:100%;height:872px"></div>

and in widget.jsp:

<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>

How to initialize these global variables in React component?

Where can I find a sample code to start or do you have some example?

[Avinash_Gupta_]

Hi @DavidZhang 

What's the use case you want to implement? Do you want to create a new component in AEM using React or want to extend the current OOB AEM forms component  and implement it in React?

[DavidZhang]

Yes, exactly. We want to jump over the JSP and HTL. Everything is React based.

[Mayank_Gandhi]

@DavidZhang form has not been tested with react components unlike AEM which has SPA support. There is something in pipe line to bring it closer to aem core component on Cloud, are you using on prem?

[Mayank_Gandhi]

@Avinash_Gupta_ @DavidZhang the core essence of the OOTB form components is its data binding capabilities, do keep in mind once you bring REACT components the data handling, DOR, sign, and FDM would not understand your custom component though you may have  UX then you need to handle the custom component data capture capability and merge to the form data on your own.

[DavidZhang]

Got it. What's FDM?

[DavidZhang]

Yes, we are using AEM 6.5 in prem.

[Mayank_Gandhi]

@DavidZhang FDM is form data model that allows you to connect forms for R/W operation with the backend system and API without writing code.

https://experienceleague.adobe.com/docs/experience-manager-65/forms/form-data-model/work-with-form-d...