Custom functions in Adaptive Forms (Core Components)

Introduction

AEM Forms 6.5 introduced the ability to define JavaScript functions that can be used in defining complex business rules using the rule editor. AEM Forms provides a number of such custom functions out of the box, but you will have the need to define your own custom functions and use them across multiple forms.

The custom functions extend the capabilities of forms by facilitating manipulation and processing of entered data to meet specified requirements. They also enable dynamic alteration of form behavior based on predefined criteria.
In Adaptive Forms, you can use custom functions within the rule editor of an Adaptive Form to create specific validation rules for form fields.
Let us understand use of custom function where users enter the email address, and you want to ensure that the entered email address follows a specific format (it contains an “@” symbol and a domain name). Create a custom function as “ValidateEmail” which takes the email address as input and returns true if it is valid and false otherwise.

function ValidateEmail(inputText)
{
    var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(inputText.value.match(email))
        {
            alert("Valid email address!");
            return true;
        }
    else
    {
        alert("Invalid email address!");
        return false;
    }
}

In the above example, when the user tries to submit the form, the custom function “ValidateEmail” is invoked to check if the email address entered is valid.

Uses of custom functions uses-of-custom-function

Advantages of using custom functions in Adaptive Forms are:

Supported JS annotations

Ensure that the custom function you write is accompanied by the jsdoc above it, in case, you require custom configuration and description. There are multiple ways to declare a function in JavaScript, and comments let you keep a track of the functions. For more information, see usejsdoc.org.

Supported jsdoc tags:

Function declaration supported types function-declaration-supported-types

Function Statement

function area(len) {
    return len*len;
}

This function is included without jsdoc comments.

Function Expression

var area;
//Some codes later
/** */
area = function(len) {
    return len*len;
};

Function Expression and Statement

var b={};
/** */
b.area = function(len) {
    return len*len;
}

Function Declaration as Variable

/** */
var x1,
    area = function(len) {
        return len*len;
    },
    x2 =5, x3 =true;

Limitation: custom function picks only the first function declaration from the variable list, if together. You can use function expression for every function declared.

Function Declaration as Object

var c = {
    b : {
        /** */
        area : function(len) {
            return len*len;
        }
    }
};

Create custom function create-custom-function

To create a custom function, perform the following steps:

You can refer to the following custom function folder. Download and install this folder in your AEM instance.

Now, you can use the custom function in your Adaptive Form by adding the client library.

Add client library in 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

Now, you can create a rule to use custom functions in the rule editor:

Now, let’s understand how to configure and use a custom function using the Rule Editor’s Invoke service in AEM Forms.