Improve performance of large forms with lazy loading

June 24, 2024
  • Applies to:
  • Experience Manager 6.5

CREATED FOR:

  • User
  • Developer

Adobe recommends using the modern and extensible data capture Core Components for creating new Adaptive Forms or adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

Version
Article link
AEM as a Cloud Service
AEM 6.5
This article

Introduction to lazy loading

When form become large and complex with hundreds and thousands of fields, end users experience long response time when rendering forms at runtime. To minimize the response time, adaptive forms lets you break forms into logical fragments and configure to defer initialization or loading of fragments until the fragment needs to be visible. It is referred to as lazy loading. In addition, the fragments configured for lazy loading are unloaded once user navigates to other sections in the form and the fragments are no longer visible.

Let’s first understand the requirements and preparatory steps before you configure lazy loading.

Preparing to configure lazy loading

Before you configure lazy loading of fragments in your adaptive form, it is important you define strategies to create fragments, identify values that are used in scripts or referred in other fragments, and define rules to control visibility of fields in lazily loaded fragments.

  • Identify and create fragments
    You can configure only adaptive form fragments for lazy loading. A fragment is a stand-alone segment that resides outside an adaptive form and can be reused across forms. So, the first step toward implementing lazy loading is to identify logical sections in a form and convert them into fragments. You can create a fragment from scratch or save an existing form panel as fragment.

    For more information about creating fragments, see Adaptive form fragments.

  • Identify and mark global values
    Forms-based transactions involve dynamic elements to capture relevant data from users and process it to simplify form filling experience. For example, your form has field A in fragment X whose value determines the validity of field B in another fragment. In this case, if fragment X is marked for lazy loading, the value of field A must be available to validate field B even when fragment X is not loaded. To achieve this, you can mark field A as global, which ensures that its value is available for validating field B when fragment X is not loaded.

    For information about how to make a field value global, see Configuring lazy loading.

  • Write rules to control visibility of fields
    Forms include some fields and sections that are not applicable to all users and in all conditions. Forms authors and developers use visibility or show-hide rules to control their visibility based on user inputs. For example, the Office Address field is not shown to the users who choose Unemployed in the Employment Status field in a form. For more information about writing rules, see Using rule editor.

    You can use visibility rules in the lazily loaded fragments so that conditional fields are shown only when they are required. Also, mark the conditional field global to refer to it in the visibility expression of the lazily loaded fragment.