Generate HTML5 preview of an XDP form

Last update: May 3, 2023

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

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

  1. Go to 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.

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

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

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

  5. 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:

  1. Log in to AEM Web Console as an administrator.

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

  2. Open Mobile Forms Configurations for editing.

  3. Deselect the Protected Mode option 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 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)

    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.