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

[durga_kavali]

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-star.... 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]

Hi Durga,

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

Approach #1 - Update .env file

1. Assign AEM Server URL value to variable AEM_URL, e.g. http://localhost:4502 
2. Assign Adaptive Form path value to variable AEM_FORM_PATH, e.g. /content/forms/af/testform
3. Set variable USE_LOCAL_JSON value to true

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

1. Access http://<host>:<port>/content/forms/af/<form-name>/jcr:content/guideContainer.model.json
2. Copy the emitted json to local form-model.json file

After following any of the approach, execute npm start command and verify the result.

I hope this information answers your query.

Pankaj Parashar

[durga_kavali]

Hi @pankajpr 

I'm grateful for your reply.

I've already tried the ways described above. Please see if there are any missing parts.

/content/forms/af/test9/jcr:content/guideContainer.model.json

Regards,

Durga Kavali.

[pankajpr · Accepted solution]

Hi Durga,

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

Thanks,

Pankaj Parashar

[durga_kavali]

Thank you  @pankajpr  for prompt response.

Yes, I have used an adapted form built on the foundation. This is how I obtain the model.json when I create a form using the core components.

http://localhost:4502/content/forms/af/test10/jcr:content/guideContainer/rootPanel/items/container.m...

{
  "method": "POST",
  "enctype": "multipart/form-data",
  "id": "new_form",
  "name": "new_form",
  "action": "/content/forms/af/test10.html",
  "resourceTypeForDropArea": "aemutilitykit/components/form/container/new",
  ":itemsOrder": [
    "text"
  ],
  ":items": {
    "text": {
      "id": "form-text-307749072",
      "title": "Text input field",
      "name": "text",
      "value": "",
      "helpMessage": "",
      "type": "text",
      "readOnly": false,
      "required": false,
      "requiredMessage": "",
      "constraintMessage": "",
      "rows": 2,
      "defaultValue": "",
      ":type": "aemutilitykit/components/form/text"
    }
  },
  ":type": "aemutilitykit/components/form/container"
}

 regards,

Durga Kavali.

[workflowuser]

Did you create adaptive form based on core components?