Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

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

Avatar

Level 2

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

17 Replies

Avatar

Level 2

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

Avatar

Employee Advisor

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

Avatar

Level 2

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

Avatar

Employee Advisor

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 

Avatar

Employee Advisor

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

Avatar

Level 2

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

Avatar

Employee Advisor

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'

Avatar

Level 2

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

Avatar

Level 2

Hi Mayank,

Please follow this link to view the document I am referring to above.

Importing Existing Application As.docx - Google Drive

Regards,

Sunder S

Avatar

Employee Advisor

Not sure what your use case is but the following points are worth noting

When you render XDP as HTML - The rendered HTML is not responsive. The rendered HTML is expected to be consumed on IPAD or laptop/desktop

You may have to touch up the xdp a little bit for the rendered HTML to look perfect

If you want responsive forms, you need to create Adaptive Forms

One question for you - any particular reason for using workspace?

Avatar

Level 2

Use Case - We have our AEM 6.1 running having total 12 custom applications. These applications are from ES2 era. Over the period, we migrated them from ES2 to ES4 and then to AEM 6.1  In each migration, we fixed them only to replace the deprecated services/APIs if any. Other than that, everything was kept same.

Few months back, client decided that we should now move onto AEM 6.5. All the new applications should only be built on that as well as old ones should be brought here. We proposed adaptive forms and did lot of research and managed to give demo by building one application.

Later client told that "adaptive forms" are not good as told by "adobe". Rather go for "html" rendition because they are responsive, more flexible and appropriate for mobile users and then we started research in that direction.

For the question that "why workspace is being used", right from the beginning (since ES2 age), all the applications are exposed to client company employees through workspace. We have single sign on enabled (OAM) and then this workspace page appears from where users can create new processes, check the "to do" sections etc.

Since you raised this question, do we have any other way of exposing these applications to company employees other than workspace? Kindly suggest.

Avatar

Employee Advisor

Please find the response inline:

1. Is this the correct way of transforming a XDP/PDF based application to “HTML5” based (from

rendering perspective)? (I simply clicked on “Restore default” and HTML radio button was

enabled)

Yes, it is.

2. Do I need to do configure something else as well to make it “HTML compliant”? Like you

share the link to set the profiles/end-point etc. I am unable to locate them anywhere.

That is in case you want to render xdp as html and do not use workspace.

3. After we render it as HTML, I know the existing XDP form will be distorted so we will have to

fix the UI. Do we also need to work on other aspect of the application like process re-design

etc or we are good to simply go ahead and use it as-is?

You might have to work on XDP to achieve the desired UI experience else you can create an adaptive form from scratch and use that in workspace.

Please elaborate on "process re-design", what process are we talking here.

Avatar

Level 2

Hi Mayank,

When client asked us to explore AEM 6.5 then after few days of R&D we proposed "Adaptive Forms" and demoed the solution by creating one sample application based on it. Only few days back, client had discussion with senior Adobe person and also with adobe affiliate service provider which suggested that "HTML5" rendition is better and more suitable than "Adaptive forms" that is why we are looking into it and this is the final direction given to us.

As for the "process re-design" is concerned, I do not have any specific process in mind but asked in general that if we changing the rendition format from XDP to HTML, will it cause any existing process(of any type, steps, nature) to show any disruption which might require us to re-write/upgrade functions/methods etc.

Regards,

Sunder S

Avatar

Level 2

Hi Mayank,

Thank you for all your help and assistance provided so far. I have posted another question through a separate thread. Kindly review and suggest.

Regards,

Sunder S

Avatar

Employee Advisor

Happy to help Sunder!

I have responded to the new post as well.

-Mayank