Frequently asked questions (FAQ) for HTML5 forms

Why do barcodes and signature field in not appear in my form?

Answer: Barcodes and signatures fields are not relevant in HTML or mobile scenarios. These fields appear as a non-interactive area. However, AEM Forms Designer provides a new signature scribble field that can be used instead of signature field. One can also add a custom widget for barcodes and integrate it.

Is Rich Text supported for the XFA Text Field?

Answer: The XFA field, which allows rich content in AEM Forms Designer, is not supported and is rendered as normal text without support for styling the text from the user interface. Also, XFA fields with comb property are displayed as a normal field, though there are still restrictions on number of allowed characters based on the value of comb digits.

Are there any limitations regarding using repeatable Subforms?

Answer: Repeatable Subforms should have an initial count of 1 or more. Repeatable Subforms with an initial count of zero are not supported. You can also choose to use a repeatable Subform and not display it when the form is loaded. To achieve the use case:

1. Set initial count of the repeatable Subform to 1.

   

2. Use initialize event of the form to hide primary instance of the Subform. For example, the code below hides the primary instance of the Subform on form initialization. It also verifies the app type to ensure that the script is executed only on the client side:

   if ((xfa.host.appType == "HTML 5" || xfa.host.appType == "Exchange-Pro" || xfa.host.appType == "Reader")&&(_RepeatSubform.count == 1)&&(form1.Page1.Subform1.RepeatSubform.Key.rawValue == null)) {
   RepeatSubform.presence = "hidden";
   }
   

   Copy

   Toggle Text Wrapping

3. Open the script for adding an instance of the Subform for editing. Add the code like the below to add an instance of the Subform script.

   The code below checks the hidden instance of the Subform. If the hidden instance of the Subform is found, delete the hidden instance of the subform and insert a fresh instance of the Subform. If the hidden instance of the Subform is not found, then simply insert a fresh instance of the Subform.

   if (RepeatSubform.presence == "hidden")
   {
   RepeatSubform.instanceManager.insertInstance(0);
   RepeatSubform.instanceManager.removeInstance(1);
   }
   else
   {
   RepeatSubform.instanceManager.addInstance(1);
   }
   

   Copy

   Toggle Text Wrapping

4. Open the script for removing an instance of the Subform for editing. Add the code like the following to removing an instance of the Subform script.

   The code checks count of the Subforms. If the count of the Subform reached 1, the code hides the subform instead of deleting the Subform.

   if (RepeatSubform.instanceManager.count == 1) {
   RepeatSubform.presence = "hidden";
   } else {
   RepeatSubform.instanceManager.removeInstance(RepeatSubform.instanceManager.count - 1);
   }
   

   Copy

   Toggle Text Wrapping

5. Open the presubmit event of form for editing. Add the following script to the event to remove the hidden instance of the script before editing. It prevents sending data of the hidden Subform on submission.

   if(RepeatSubform.instanceManager.count == 1 && RepeatSubform.presence == "hidden") {
   RepeatSubform.instanceManager.removeInstance(0);
   }
   

   Copy

   Toggle Text Wrapping

Are there any limitations regarding using hidden subforms?

Answer: A hidden subform with complex hierarchy that is split across pages causes layout issues. A workaround is to mark the subform initially visible and then hide it in an initialize script based on some logic or data.

Why some text are truncated or are displayed incorrectly in HTML5?

Answer: Where a Draw or Caption text element has not been given enough space to display content, the text appear truncated in mobile form rendition. This truncation is also visible in the Design view of AEM Forms Designer. Though this truncation can be handled in the PDFs, it cannot be handled in the HTML5 forms. To avoid the issue, provide enough space to Draw or Caption Text so that it does not truncate in the design mode of the AEM Forms Designer.

I am observing layout issues related to missing content or overlapping content. What is the reason?

Answer: If there is a Draw Text or a Draw Image element along with another overlapping element at the same position (say a Rectangle), the Draw Text content are not visible if it comes later in the document order (in AEM Forms Designer Hierarchy view). PDF supports transparent layering but HTML/browsers do not support transparent layering.

Why are some fonts displayed in the HTML form different from the ones used while designing the form?

Answer: HTML5 forms do not embed fonts (in contrast to PDF forms where fonts are embedded inside the form). For the HTML version of form to render as expected, ensure that the fonts specified in the XDP are available on the server and on the client machine. If the required fonts are not available on server, then fall-back fonts are used. Moreover, if you use fonts in Form Template that are not available on the client device, then default fonts of the browser are used to render the text.

Are vAlign and hAlign attributes supported in HTML forms?

Yes, the vAlign and hAlign attributes are supported. The vAlign attribute is not supported in Internet Explorer and in multiline field.

Do HTML5 forms support Hebrew characters?

HTML5 forms support Hebrew characters in all the browsers except Microsoft Internet Explorer.

Do HTML5 forms have any limitations on numeric field?

Answer: Yes, HTML5 forms has a few limitations. If the number of digits are more than the count specified in the picture clause, then the numbers are not localized and are displayed in English locale.

Why HTML forms are larger in size than PDF forms?

A lot of intermediate data structures and objects such as form dom, data dom, and layout dom are required to render an XDP to an HTML form.

For PDF Forms, Adobe Acrobat has a built-in XTG engine to create intermediate data structures, and objects. Acrobat also takes care of layout and scripts.

For HTML5 forms, browsers do not have a built-in XTG engine to create intermediate data structures, and objects from raw XDP bytes. So, for HTML5 forms, intermediate structures are generated on the server and sent to the client. At client, javascript based script and layout engine use these intermediate structures.

The size of the intermediate structure depends on the size of the original XDP and the data merged with the XDP.

Are there any limitations regarding using tables in my xdp?

Answer: Complex Tables cause issues in rendering.

• Section (SubformSet) inside a table are not supported.
• Header or footer rows in some tables are marked for repetition. Splitting such tables across multiple pages can run into some issues.

Do accessible tables have any limitations?

Answer: Yes, accessible tables have the following limitations:

• Nested tables and subform inside a table are not supported.
• Headers are only supported for the top row or left columns of the table. Headers are not supported for mid-table elements. You can apply headers to multiple row and column headers are supported provided all such rows and columns are along with the topmost row or leftmost column of the table.
• Rowspanand colspanfrom a random location inside the table is not supported.
• You cannot dynamically add or remove instance of rows which contain elements with rowspan value greater than 1.

What is the reading order of tool tip and caption for screen readers?

• When both caption and tool tip are present, the only caption is read. If the caption is not available, then the tool tip is read. You can also specify the precedence for reading in an XDP using form designer
• When you hover an element, then tool tip is displayed. If tool-tip is not available speech text is displayed. If speech text is not available, then field name is displayed.

When you hover a field, a tool tip is displayed. How to disable it?

To disable tool tip on hover, select none in the accessibility panel of the Designer.

In Designer, a user can configure custom appearance properties of radio button and check boxes. Do, while rendering the forms, HTML5 forms take such custom appearance properties into account?

Answer: HTML5 forms ignore the custom appearance properties of radio button and check boxes. The radio buttons and check boxes appear as per the specifications of the underlying browser.

When an HTML5 Form is opened in a supported browser, the border of the fields placed adjacently is not aligned properly or subforms appear overlapped. When the same HTML5 Form is previewed in Forms Designer, the fields and layout do not appear misaligned and subforms appear in the correct position. How to fix the issue?

When a subform is set to flow content and the subform has a hidden border element, the border of the fields placed adjacently is not aligned properly or subforms appear overlapped. To resolve the issue, you can remove or comment the hidden <border> elements from the corresponding XDP. For example, the following <border> element is marked as a comment:

            <!--<border>
               <edge presence="hidden"/>
               <corner thickness="0.175mm" presence="hidden"/>
            </border> -->

Are there any limitations in JavaScript implementation for HTML Forms?

Answer:

• There is limited support for xfa.connectionSet script. For connectionSet, only server-side invocation of web service is supported. For detailed information, see Scripting Support.
• There is no support for $record and $data in client side scripts. However, if the scripts are written in a formReady, layoutReady block, the scripts still work because these events run on the server side.
• XFA Draw element-specific scripts such as changing the Draw text (or Caption text in case of fields) are not supported.

Are there any limitations in using formCalc?

Answer: Only a subset of the formCalc scripts is currently implemented. For detailed information, see Scripting Support.

Is there any recommended naming convention and are there any reserved keywords to avoid?

• In AEM Forms Designer, it is recommended not to begin the name of an object (such as a subform or a text field) with an underscore (). To use underscore at the beginning of the name, add a prefix after the underscore, *<prefix><objectname>. *
• All HTML5 forms APIs are reserved keywords. For custom APIs/functions, use a name that is not identical to HTML5 forms APIs.

Do HTML5 forms support floating fields?

Yes, HTML5 Forms support floating fields. To enable floating fields, add the following property to the rendering profile:

NOTE

By default, the fields are not enabled for floating. You can use Forms Designer to set the floating property of the fields…

1. Open CRXde lite and navigate to the /content/xfaforms/profiles/default node.

2. Add a property mfDataDependentFloatingField of type String and set the value of the property to true.

3. Click Save All. Now the floating fields are enabled for the HTML Forms using the updated rendering profile.

   NOTE

   To enable floating fields for a specific form without updating the rendering profile, pass the mfDataDependentFloatingField=true property as a URL parameter.

Does HTML5 forms execute the initialization script and form ready event multiple times?

Yes, the initialization scripts and form ready events are executed multiple times, at least once on the server and once on the client side. It is suggested to write scripts like initialize or form:ready events based on some business logic (form or field data) so that the action is performed based on the state of data and idempotent (if data is same).

Are there any reserved keywords in HTML5 forms?

Answer: All HTML5 forms APIs are reserved keywords. For custom APIs/functions, use a name that is not identical to HTML5 forms APIs. Apart from reserved keywords, if you use object names that begin with an underscore (_), it is recommended to add a unique prefix after the underscore. Adding a prefix helps avoid any possible conflict with HTML5 forms internal APIs. For example, _fpField1