While designing a form in AEM Forms Designer, besides previewing the PDF rendition of a form, you can also preview an HTML5 rendition of it. You can use the Preview HTML tab to preview a form as it would appear in a browser.

Enable HTML Preview for XDP forms in Designer

To enable Designer to generate HTML preview of XDP forms, perform the following configurations:

Configure Apache Sling Authentication Service

Disable protected mode

Provide details of AEM Forms server

Configure Apache Sling Authentication Service

Go to http://[server]:[port]/system/console/configMgr on AEM Forms running on OSGi or
http://[server]:[port]/lc/system/console/configMgr on AEM Forms running on JEE.

Locate and click Apache Sling Authentication Service configuration to open it in edit mode.

Depending on whether you are running AEM Forms on OSGi or JEE, add the following in the Authentication Requirements field:

AEM Forms on JEE

-/content/xfaforms

-/etc/clientlibs

AEM Forms on OSGi

-/content/xfaforms

-/etc/clientlibs/fd/xfaforms

Note:

Do not copy-paste the specified value in the Authentication Requirements field as it may corrupt the special characters in the value. Instead, type the specified value in the field.

Specify a user name and password in Anonymous User Name and Anonymous User Password fields, respectively. The specified credentials are used to handle anonymous authentication and allow access to anonymous users.

Click Save to save the configuration.

Disable protected mode

The protected mode is on, by default. Keep it enabled for the production environments. You can disable it for a development environment to preview HTML5 Forms in desinger. Perform the following steps to disable it:

Log in to AEM Web Console as an administrator.

URL for AEM Forms on OSGi is http://[server]:[port]/system/console/configMgr

URL for AEM Forms on JEE is http://[server]:[port]/lc/system/console/configMgr

Open Mobile Forms Configurations for editing.

Deselect the Protected Mode option and click Save.

Provide details of AEM Forms server

In Designer, go to Tools > Options.

In the Options window, select Server Options page, provide the following details, and click OK.

Server URL: AEM Forms server URL.

HTTP port number: AEM server port. The default value is 4502.

HTML Preview Context: Path of the profile for rendering XFA forms. The following default profiles are used to preview the form in Designer. However, you can also specify path to a custom profile.

Testing your form by using a sample data source ensures that the data and fields are mapped and that repeating subforms repeat as you expected. You can create a balanced form layout that provides the appropriate space for each object to display the merged data.

Select File > Form Properties.

Click the Preview tab and, in the Data File box, type the full path to your test data file. You can also use the Browse button to navigate to the file.

Click OK. The next time you preview the form in the Preview HTML tab, the data values from the sample XML file will appear in the respective objects.

Preview forms located in a repository

In AEM Forms, you can preview forms and documents in a repository. Preview helps to know exactly how the forms look and behave as they will be used end users.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.