Debugging HTML5 forms

Last update: June 24, 2024

CREATED FOR:

  • Admin
  • User
  • Developer

This document includes several troubleshooting scenarios. For each scenario, some steps are provided to troubleshoot the problem. Follow these steps and, if the problem persists, configure the Logger to get and review logs for errors/warnings. For more details about HTML5 forms logging, see Generating Logs for HTML5 forms.

Problem: When rendering the form, I see org.apache.sling.api.SlingException exception page

In the exception details, search for word caused by.

The probable reason is that one or more parameters in the URL are incorrect.

Check the following parameters:

ParameterDescription
templateThe filename of the template
contentRootThe path where template and associated resources reside
dataRefAbsolute path of the data file that is merged with the template.
Note: Path defines the absolute path of the data file.
dataUTF-8 encoded data bytes that are merged with the template.

Problem: Unable to render a form (an error message is displayed)

  1. Ensure that the specified parameters are correct. For detailed information on parameters, see Render Parameters.

  2. Log in to CRX Package Manager(at https://<server>:<port>/crx/packmgr/index.jsp) and check whether the following packages are correctly installed:

    • adobe-lc-forms-content-pkg-<version>.zip
    • adobe-lc-forms-runtime-pkg-<version>.zip

  3. Log in to CQ Web Console (Felix Console) at https://<server>:<port>/system/console/bundles.

    Ensure that the status of the following bundles is “active”:

    • scala-lang.bundle [osgi]

    (com.adobe.livecyclescala-lang.bundle)

    • Adobe XFA Forms Renderer

    (com.adobe.livecycle.adobe-lc-forms-core)

    • Adobe XFA Forms LC Connector

    (com.adobe.livecycle.adobe-lc-forms-lc-connector)

Problem: Form renders without styles

  1. In your browser, open Developer Tools. Ensure that profile.css is available.

  2. If the profile.css file is not available, login to CRX DE at https://<server>:<port>/crx/de.

  3. In the folder hierarchy on the left, navigate to /etc/clientlibs/fd/xfaforms/. Open css.txt files listed in the folders.

    • profile
    • runtime
    • scrollnav
    • toolbar
    • xfalib

  4. Verify that the files mentioned inside the css.txt are present in CRX DE lite at /libs/fd/xfaforms/clientlibs/xfalib/css.

    #base=css
application.css
dialog.css
datepicker.css
scribble.css
listboxwidget.css

  5. If the mentioned files are not available, install the adobe-lc-forms-runtime-pkg-<version>.zip package again.

Problem: Unexpected error encountered

  1. In the form URL, add a query parameter debugClientLibs and set its value to true (For example: https://<server>:<port>/content/xfaforms/profiles/test.html?contentRoot=<some path>&template=<name of xdp file>&log=1-a9-b9-c9&debugClientLibs=true)

  2. In the desktop browser like chrome, go to Developer Tools > Console.

  3. Open the logs to identify the type of error. For detailed information on logs, see logs for HTML5 forms.

  4. Go to Developer Tools > Console. Use stack trace to locate the code which is causing the error. Debug the error to resolve the issue.

    NOTE
    If it is scripting failure, check if the same problem occurs during the PDF rendition of the form as well. If yes, then there is a problem in the form scripting logic.

Problem: Unable to submit the form

  1. Ensure that you have rights to access the AEM server and you are connected to the server.
  2. Check that the parameter submitUrl is correct.
  3. Enable the client side logs as mentioned at Logs for the HTML5 forms using debug option as 1-a5-b5-c5. Then render the form and click submit. Open browser debug console and check if there is an error.
  4. Locate the server logs as mentioned at Logs for the HTML5 forms. Check if there was any error in server logs during submission.

Problem: Localized error messages do not display

  1. Render the form with additional query parameter debugClientLibs=true in the desktop browser, and then go to Developer Tools > Resources and check for the file I18N.css.

  2. If the file is not available, login into CRX DE at https://<server>:<port>/crx/de.

  3. In the folder hierarchy on the left, navigate to /libs/fd/xfaforms/clientlibs/I18N and ensure that the following files and folders exist:

    • Namespace.js
    • LogMessages.js
    • Folders for languages

  4. If any of the above files or folders do not exist, install the adobe-lc-forms-runtime-pkg-<version>.zip package again.

  5. Navigate to the folder which has the same name as the name of the locale and check its content. The folder must contain the following files:

    • I18N.js
    • js.txt

  6. Check the content of js.txt and make sure that it has the following entries.

    ../Namespace.js
I18N.js
../LogMessages.js

Problem: Image not showing up

  1. Ensure that the image URL is correct.

  2. Check if your browser supports this type of image.

  3. In the exception details, search for word caused by.

    The probable reason is that one or more parameters in the URL are incorrect.

    Check the following parameters:
    Step text

ParameterDescription
templateThe filename of the template
contentRootThe path where template and associated resources reside
dataRefAbsolute path of the data file that is merged with the template.
Note: Path defines the absolute path of the data file.
dataUTF-8 encoded data bytes that are merged with the template.

  1. In the desktop browser, go to Developer Tools > Resources.

    Check on the left side in Frames if that image displays.

Experience Manager


Espressos & Experience Manager: AEM Forms

Espressos & Experience Manager

Thursday, Mar 6, 7:00 PM UTC

Join Adobe's AEM product team as they highlight AEM Forms' latest innovations, including: the new Gen AI Assistant, Unified Composition with AEM Sites, and new ways to deploy forms through conversations.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now