Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Employee

Hi Durga,

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

 

Thanks,

Pankaj Parashar

View solution in original post

5 Replies

Avatar

Employee

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

 

Avatar

Level 2

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

 

Screenshot 2024-08-20 at 10.52.59 PM.png

 

Screenshot 2024-08-20 at 11.23.54 PM.png

 

Regards,

Durga Kavali.

 

 

Avatar

Correct answer by
Employee

Hi Durga,

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

 

Thanks,

Pankaj Parashar

Avatar

Level 2

 

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.

Avatar

Employee Advisor

Did you create adaptive form based on core components?