Debugging HTML5 forms

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:

Parameter

Description

template

The filename of the template

contentRoot

The path where template and associated resources reside

dataRef

Absolute path of the data file that is merged with the template.
Note: Path defines the absolute path of the data file.

data

UTF-8 encoded data bytes that are merged with the template.

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

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

Log in to CRX Package Manager(at http://<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

Log in to CQ Web Console (Felix Console) at http://<server>:<port>/system/console/bundles.
Ensure that the status of the following bundles is "active":

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

Problem: Unexpected error encountered

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

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

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

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

Ensure that you have rights to access the AEM server and you are connected to the server.

Check that the parameter submitUrl is correct.

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.

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

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.

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

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

Namespace.js

LogMessages.js

Folders for languages

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

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

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

Ensure that the image URL is correct.

Check if your browser supports this type of image.

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

Parameter

Description

template

The filename of the template

contentRoot

The path where template and associated resources reside

dataRef

Absolute path of the data file that is merged with the template.
Note: Path defines the absolute path of the data file.

data

UTF-8 encoded data bytes that are merged with the template.

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

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

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