Highlighted

How/where to start with building HTML5 forms in Adobe AEM 6.4

samsitr

17-06-2019

Dear All,

I am new to Adobe AEM Forms. Few months back we were told that we have to build some applications using Adobe AEM 6.4 forms (on JEE) so we installed it on Dev instance and started experimenting with "Adaptive Forms". Managed to create Adapative forms end to end.

Now the requirement has changed and client wants HTML5 forms not "adaptive forms".  This has puzzled us as we are unable to locate any documentation/tutorial on creating the HTML5 forms on JEE.

In fact, the forms.html URL shows option to create only "Adaptive form" and there is no option to explicitly create "HTML5  form".

Request you all to kindly guide me and suggest how to approach this.

Thanks in advance.

Regards,

Sunder S

Replies

Highlighted

samsitr

18-06-2019

Hi All - Made some progress since yesterday (or so I believe). I explored loads of articles available online and found that we can create the HTML5 forms via designer. Apart from creating the new applications in HTML5, we have our legacy system (with old applications) running in AEM 6.1 (pdf based). We have this milestone of migrating them into AEM 6.5 forms (on JEE) and redesign/build as HTML5.

I read that we can make use of the xdp file of all our applications and can deploy it through workbench/designer to get HTML5 based application. This is the part I am unable to understand here.  Even though we have "preview in HTML" in designer but how to transform the pdf/xdp based application into HTML5 (not adaptive form type) is something I am still trying to figure out. Kindly provide pointers or any worthwhile tutorial link/online which can help me accomplish this will be much appreciated.

Regards,

Sunder S

Highlighted

workflowuser

Employee

18-06-2019

to render xdp as html you do not have to do anything

just upload the xdp into AEM forms using the user interface . Then select the newly upload xdp and click on preview

you do not need j2ee for this. You can use AEM Forms OSGI

Highlighted

samsitr

18-06-2019

Hi Dear,

Thank you for the input. I tried it and simply uploaded the xdp of old instance. There are two hurdles I need to take care of:

1. How to make this available to my end users over HTML workspace? Because it does not appear there even though I have uploaded this into AEM forms section as suggested. Pl suggest on this one.

2. Eventually I will have to modify it because the UI is completely distorted as it was pdf based solution in old application. So configuring with workbench is another point. I am exploring it right now.

Note: We have AEM forms on JEE deployed.

Thanks in advance.

Regards,

Sunder S

Highlighted

workflowuser

Employee

18-06-2019

rypically you will have AEM as am publish instance

on this publish instance you will have portal that will

list the xdp files thay will be renderd as html

exposing workspace to the end users outside your organization is not recommended 

Highlighted

Mayank_Gandhi

Employee

18-06-2019

Let's start one by one.

You were on the correct path and have been able to get to HTML rendering already of the xdp. Now there are few ways to render an XDP in HTML. You can either construct this URL and embed this URL in your site or whatever application you have or you can use HTML workspace to expose the form to the user. HTML workspace required login so you need to differentiate between the requirement here.

Let's say you have an XDP 'SAMPLE.XDP', it can be on the file system, CRX, or even a web server. You need to render it as shown below:

AEM 6.0 Forms Help | Rendering form template for HTML5 forms

1. How to make this available to my end users over HTML workspace? Because it does not appear there even though I have uploaded this into AEM forms section as suggested. Pl suggest on this one.

-> You need to create a workbench process first. The start point of the process should be Workspace. Here is a sample LCA that you can install on the server and load in workbench. It will serve you as a basic tutorial for a Workspace startpoint.

Sample Adobe Document Cloud

2. Eventually, I will have to modify it because the UI is completely distorted as it was pdf based solution in old application. So configuring with workbench is another point. I am exploring it right now.

->In Workspace you can render a form both as PDF and HTML. You can replace the asset in sample LCA with your form and see what fits your requirement.

Thanks,

Mayank

Highlighted

samsitr

18-06-2019

Hi Mayank - Many thanks for taking out time to look into my query and provide such a detailed response.

1. We are on AEM 6.4 so looks like the settings mentioned here (AEM 6.0 Forms Help | Rendering form template for HTML5 forms) are not working here. I tried to follow this through but all in vein.

2. I deployed your package but then referred my travel_requets.xdp but still it was not working as expected.

Strangely, I decided to create new application and import the above xdp and create the workbench process as you suggested. The catch is here.

workspace_point.jpg

In the workbench, for a workspace start process, the action profile is what is having the option like shown above. Here if I select HTML and deploy the application into workspace, it appears as HTML.  Not really sure if this is the correct way of doing it. Assuming so, now I am trying to explode this xdp because in the current scenario, it is appearing as one single file. Not able to see individual forms/processes.

Thank you once again for your valuable inputs and considerable time spent looking into this issue.

Regards,

Sunder S

Highlighted

Mayank_Gandhi

Employee

19-06-2019

Hi Sunder,

For point 1, kindly share your form or LCA with me directly.

For point 2, yes, you need to select HTML only. The preview will be generated in the workspace http://host:post/lc/ws page. Please elaborate 'Not able to see individual forms/processes'

Highlighted

samsitr

20-06-2019

Hi Mayank,

I have spent considerable amount of time and figured out "a way to transform XDP/PDF to HTML rendering form". I have encapsulated the steps along with screen shots with explanation and queries from my side.

Request you to kindly review this once and please suggest if this is the approach I need to follow and move forward.

Also, I am unable to figure out how to send the word doc that I have prepared which has steps. Can I have some mail address to mail this to or some way to upload and share. Kindly suggest.

Regards,

Sunder S