How to preview HTML Forms in LC Designer ES4 using an AEM Forms server

In addition to providing Adaptive Forms, AEM Forms supports XFA-based forms to generate PDF or HTML Forms (Mobile Forms) like in LC ES4 SP1. If you want to develop new XFA-based forms or edit one, as of today, LC Designer ES4 remains the tool to use.

To preview your HTML Forms within LC Designer ES4 the configuration is the same as when using a LC ES4 server. You just need to follow the steps as explained in the following documentation page: https://helpx.adobe.com/livecycle/help/mobile-forms/preview-xdp-forms-html.html

Note that when using an AEM Forms server you need to remove the "lc/" from the "HTML Preview Context" and "Forms Manager Context" default values metionned in the documentation.

However, after applying these steps, when previewing your HTML Form, you will be confronted to the following error page saying:

HTTP ERROR: 403

Problem accessing /content/xfaforms/profiles/default.html.

Reason: Forbidden

The AEM Forms server log will simultaneously print the following message:

22.04.2015 11:38:37.579 *INFO* [qtp788263154-145] org.apache.sling.security.impl.ReferrerFilter Rejected empty referrer header for POST request to /content/xfaforms/profiles/default.html

This is because, by default, AEM doesn't allow empty referrer header for POST requests. We need to modify the Apache Sling Referrer Filter configuration to allow it.

Here are the steps to follow:

1. Go the following URL: http://localhost:4502/system/console/configMgr/org.apache.sling.security.impl.ReferrerFilter
2. Tick the checkbox called "Allow Empty" (see screenshot below)

After applying this change, no need to restart AEM Forms, you can trying again.

This time your HTML Form should be rendered successfully: