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:

  • Allow requests with empty referrers
  • Increase request payload size for large form
  • Provide details of AEM forms server  

Allow requests with empty referrers

AEM has Apache Sling Referrer header to protect against CSRF attacks, the header can disable the POST requests with empty referrer headers. On the development environment, perform the following steps to configure the filter to allow requests with empty referrers:

  1. Go to http://[server]:[port]/system/console/configMgr.

  2. In the Apache Sling Referrer Filter option, enable Allow Empty, and click Save.

Increase request payload size for large forms

Out of the box, the maximum request payload size of the forms is 200 KB. Increase the maximum form size limit to support forms of larger size. Perform the following steps to change the size limit:

Note:

If you submit a form larger than the maximum allowed limit, HTTP 500 error occurs and Template is not specified exception is logged.

  1. Go to http://[server]:[port]/system/console/configMgr.

  2. Locate and open the apache felix jetty based http service.

  3. Change the Maximum Form Size property and click Save.

Provide details of AEM forms server  

  1. In Designer, go to Tools > Options.

  2. 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 default value is /content/xfaforms/profiles/default.html. The default profile is used to preview the form in Designer. You can also specify path to a custom profile.
    • Forms Manager Context: Context path at which Forms Manager UI is deployed. The default value is /aem/forms.

    Note: 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
    AEM forms Designer options

  3. To preview a form in HTML, click the Preview HTML tab.

    Note:

    If HTML Preview tab is closed, Press F4 to open the Preview HTML tab. You can also select Preview HTML from View menu to open the Preview HTML tab.

    Note:

    The HTML preview does not support PDF documents, the HTML preview is only for XDP documents.  

To preview a form using sample data

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.

  1. Select File > Form Properties.

  2. 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.

  3. 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. 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy