Tune your XFA-based HTML5 Forms for best performance.
AEM Forms has a component called HTML5 forms. It helps render existing XFA-based PDF forms (XDP files) in HTML5 format. This document provides guidelines and recommendations to reduce the load time and improve the performance of HTML5 forms on mobile devices.
Most mobile devices have a limited processing power and memory capabilities. It helps in improving the standby time of mobile devices. The web browsers running on a mobile device have access to limited resources (limited memory and processing capabilities). After the limit is reached, the browser behavior turns sluggish. This document provides recommendations to keep the size of an HTML5 form in check. A smaller form does not breach memory and processing power limits of a device and provides a smooth experience.
Although, the recommendations discussed in this article are targeted at HTML5 forms, yet these are equally applicable to XFA-based PDF Forms. These best practices collectively contribute to the overall performance of HTML5 forms. It requires a careful planning to develop efficient and productive forms. Let’s get started:
Generally, an XFA form has multiple elements. For example, table, text field, and images. Every element has a number of properties to control the behavior and appearance of the element. When an XFA form is rendered in HTML5 format, all XFA elements, and the corresponding properties are converted to Model or HTML DOM nodes. These nodes add to the size and complexity of a DOM. Making the HTML5 form slow to render.
It is easier for the browsers to render a leaner DOM. So, you can perform the following optimizations on an XFA form to reduce the number of nodes. Therefore, generate a lean DOM structure:
Hence, reducing the size of the external resources and using only absolutely required resources is the preferred method of improving the performance of the forms. You can perform the following optimizations on an XFA form to reduce the size of external resources of a form:
An HTML5 form can run into hundreds of pages. A form with a large number of fields is slow to load in the browser. You can perform the following optimizations on an XFA form to optimize the forms with a large number of fields and pages:
HTML5 forms can contain data-driven fields (tables and sub-forms). These fields expand the size of the form on the run-time. For example, a data-driven table in an HTML5 form can span to thousands of rows. Such tables can cause layout and performance degradation. The optimizations suggested below can help you reduce the load time of HTML5 forms with data-driven fields:
Use XFA-scripting to achieve paged navigation to display data-driven fields (tables and sub-forms). In paged navigation, only a specific data is displayed on a page. It limits the browser paint operation to the fields being displayed at a time and makes it easier to navigate a form. Moreover, users on the mobile devices are interested only in a subset of data. It helps you deliver great user experience and reduces the time required to load the required data. You get two solutions for the price of one. Also note that paged navigation is not available out of the box. You can use XFA scripting to develop paged navigation.
Evaluate merging multiple read-only columns into a single column. It reduces the memory required to display the form. Also, avoid displaying the columns which do not require any inputs from users.
Evaluate splitting the data-driven form into a form set, if the above suggestions do not yield many improvements. For example, if a table has more than 1000 rows, then move every 100 rows to a different form. It would help improve the load time and performance of the forms. Also note that a Form set produces a consolidated submit XML for all the forms. To differentiate data of every form, use different data roots. For more information, see Form set in AEM Forms.
An XFA form can have a large number of sections dedicated only for Document of Record (DOR). To reduce the number of nodes and improve the performance of such a form, you can maintain different copies of the form - one copy to fill the form, and another one to generate Document of Record on the server. In the copy to fill the XFA form show fields required only to capture data. In the generate Document of Record XFA from, keep fields required only in the printed output of the form. Before choosing the suggested approach, evaluate the performance gain and the maintenance overhead.
Adobe Experience Manager (AEM) forms can help you transform complex transactions into simple, delightful digital experiences. However, it requires concerted effort to develop efficient and productive forms. In addition to HTML5 Forms, here are some recommended reads for general AEM best practices: