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

Forum|Forum|1 year ago
August 14, 2024
2 replies
1247 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by pankajpr

Hi Durga,

It seems you are using a foundation adaptive form. Headless is supported by core component based adaptive form only.

Thanks,

Pankaj Parashar

W

workflowuser

Employee

Did you create adaptive form based on core components?

P

pankajpr

Employee

Hi Durga,

You can achieve your use case using any of the following two approaches.

Approach #1 - Update .env file

Assign 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/testform
Set variable USE_LOCAL_JSON value to true

Approach #2 - Download form model json for remote form and update local form-model.json