How to preview a Headless adaptive AEM Form using a React app

Question

Hi Everyone,

I have created a Adaptive form in AEM. I want to retrieve JSON from an adaptive form and render it in a React application. I'm not able to retrieve the adaptable form's JSON in headless approach

I adhered to the guidelines provided in this article: https://experienceleague.adobe.com/en/docs/experience-manager-headless-adaptive-forms/using/get-started/create-and-publish-a-headless-form. I still can't seem to find the form model.json with form data as mentioned in the article. Could you please tell me how to go about achieving this?

@mayank_gandhi

@arunpatidar @estebanbustamante @aanchal-sikka

Durga Kavali

pankajpr · Accepted Answer

Hi Durga,It seems you are using a foundation adaptive form. Headless is supported by core component based adaptive form only.  Thanks,Pankaj Parashar

pankajpr · Answer

Hi Durga,You can achieve your use case using any of the following two approaches.Approach #1 - Update .env fileAssign AEM Server URL value to variable AEM_URL, e.g. http://localhost:4502 Assign Adaptive Form path value to variable AEM_FORM_PATH, e.g. /content/forms/af/testformSet variable USE_LOCAL_JSON value to trueApproach #2 - Download form model json for remote form and update local form-model.jsonAccess http://:/content/forms/af//jcr:content/guideContainer.model.jsonCopy the emitted json to local form-model.json fileAfter following any of the approach, execute npm start command and verify the result.I hope this information answers your query. Pankaj Parashar

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded