Create a Custom Function for an Adaptive Form based on Core Components

Adaptive Forms based on Core Components offer dynamic user experiences by adjusting content and behavior based on user input. Custom functions allow developers to extend functionality, ensuring that forms can meet specific requirements. By integrating custom functions, developers can implement complex logic, automate processes, and introduce unique interactions that align with specific business requirements or user expectations. It ensures that the forms not only adapt to varying conditions but also provide a more precise and effective solution for diverse use cases.
This article guides you through the steps of creating custom functions for Adaptive Forms using core components.

Considerations

Prerequisites to create a custom function

Before you begin adding a custom function to your Adaptive Forms, ensure you have the following:

Software:

Create a custom function

Create a client library to call custom functions in the rule editor. For more information, see Using Client-Side Libraries.

Steps to create custom functions are:

Create a client library create-client-library

You can add custom functions by adding a client library. To create a client library, perform the following steps:

Clone the Repository

Clone your AEM Forms as a Cloud Service Repository:

This command downloads the repository and creates a local folder of the cloned repository on your machine. Throughout this guide, we refer to this folder as the [AEMaaCS project directory].

Add a Client Library Folder

To add new client library folder to the [AEMaaCS project directory], follow these steps:

Add files and folders to the Client Library folder

Add the following to the added client library folder:

Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/

Include the new folder in filter.xml:

Deploy the newly created Client library folder to your AEM environment

Deploy the AEM as a Cloud Service, [AEMaaCS project directory], to your Cloud Service environment. To deploy to your Cloud Service environment:

If you haven’t already set up a pipeline, refer to the guide on how to set up a pipeline for AEM Forms as a Cloud Service.

Once the pipeline is executed successfully, the custom function added in the client library becomes available in your Adaptive Form rule editor.

Add client library to an Adaptive Form use-custom-function

Once you have deployed your client library to your Forms CS environment, use its capabilities in your Adaptive Form. To add the client library in your Adaptive Form

You can use the custom function in the rule editor of an Adaptive Form using the JavaScript annotations.

Using a custom function in an Adaptive Form

In an Adaptive Form, you can use custom functions within the rule editor. Let us add the following code to the JavaScript file (Function.js file) to calculate age based on the Date of Birth(YYYY-MM-DD). Create a custom function as calculateAge() which takes the date of birth as input and returns age:

    /**
        * Calculates Age
        * @name calculateAge
        * @param {object} field
        * @return {string}
    */

    function calculateAge(field) {
    var dob = new Date(field);
    var now = new Date();

    var age = now.getFullYear() - dob.getFullYear();
    var monthDiff = now.getMonth() - dob.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
    age--;
    }

    return age;
    }

In the above example, when the user enters the date of birth in the format (YYYY-MM-DD), the custom function calculateAge is invoked and returns the age.

Let’s preview the form to observe how the custom functions are implemented through the rule editor:

Features of Custom Functions

Custom functions in AEM forms offer a robust solution for extending and personalizing the functionality of your forms. You can use th custom functions to meet your organization’s specific needs.

These functions support various capabilities, including working with specific fields, using global fields, and asynchronous operations, as well as incorporating caching mechanisms. This flexibility ensures that forms can adapt to complex requirements and deliver an efficient, tailored user experience. By leveraging these advanced features, you can enhance form interactions and optimize performance, making your AEM forms both more functional and responsive.

Let’s dive into the features of custom functions.

Asynchronous support in custom functions support-of-async-functions

You can implement asynchronous functions in the rule editor using custom functions. For guidance on how to do this, refer to the article Using asynchronous functions in an Adaptive Form.

Field and Global scope objects support in custom functions support-field-and-global-objects

Field objects refer to the individual components or elements within a form, such as text fields, checkboxes. The Globals object contains read-only variables such as form instance, target field instance and methods to do form modifications within custom functions.

For more information on scope objects, see the Scope objects in custom functions article.

Caching support in custom function

Adaptive Forms implement caching for custom functions to enhance response time while retrieving the custom function list in the rule editor. A message as Fetched following custom functions list from cache appears in the error.log file.

In case the custom functions are modified, the caching becomes invalidated, and it is parsed.

Troubleshooting

Next step

Let us now see various examples of custom functions for an Adaptive Form based on Core Components.

See Also