Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

How to write forms component using React?

Avatar

Level 4

Any suggestion?

11 Replies

Avatar

Community Advisor

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 

 

Avatar

Level 4

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.

Avatar

Community Advisor

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. 

 

AvinashGupta01_0-1671310995691.png

 

 

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

 

Hope this helps.

Avatar

Level 4

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?

 

 

Avatar

Community Advisor

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?

 

 

 

 

Avatar

Level 4

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

Avatar

Employee Advisor

@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?

Avatar

Employee Advisor

@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.

Avatar

Employee Advisor

@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...