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.
To enable Designer to generate HTML preview of XDP forms, perform the following configurations:
https://'[server]:[port]'/system/console/configMgr on AEM Forms running on OSGi or
https://'[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
AEM Forms on OSGi
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.
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.
Open Mobile Forms Configurations for editing.
Deselect the Protected Mode option and click Save.
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.
/content/xfaforms/profiles/default.html (AEM Forms on OSGi)
/lc/content/xfaforms/profiles/default.html (AEM Forms on JEE)
Forms Manager Context: Context path at which Forms Manager UI is deployed. The default values are:
/aem/forms(AEM Forms on OSGi)
/lc/forms(AEM Forms on JEE)
Ensure that AEM Forms server is up and running. The HTML preview connects to the CRX server to generate a preview.
AEM Forms Designer options
To preview a form in HTML, click the Preview HTML tab.
To test the real end-user experience, preview your forms in external browsers (Google Chrome, Microsoft Edge, Mozilla Firefox, and more) also. Every browser uses separate engine to render HTML, so there may be some differences in the way a form previews in Designer and external browser.
Designer lets you preview and test your form by using sample XML data. It is recommended that you frequently test your form with sample data to ensure that the form renders correctly.
If you do not have sample data, Designer can create it, or you can create it yourself. (See To automatically generate sample data to preview your form and To create sample data to preview your form.)
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.
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.