How to write forms component using React? | Community
Skip to main content

2 replies

Avinash_Gupta_
Community Advisor and Adobe Champion
Avinash_Gupta_Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
December 16, 2022

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 

 

    D
    DavidZhangAuthor
    Level 4
    December 16, 2022

    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.

      D
      DavidZhangAuthor
      Level 4
      December 17, 2022

      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/spa-editor/react/overview.html?lang=en 

       

      Hope this helps.


      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?

       

       

        Mayank_Gandhi
        Adobe Employee
        Mayank_GandhiAdobe Employee
        Adobe Employee
        December 19, 2022

        @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
          Adobe Employee
          Mayank_GandhiAdobe Employee
          Adobe Employee
          December 19, 2022

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

            D
            DavidZhangAuthor
            Level 4
            December 19, 2022

            Got it. What's FDM?

              Terms & ConditionsAccessibility statement

              Loading footer...