Documentation AEM AEM Tutorials AEM Forms Tutorials

Custom functions

Last update: Sun Mar 23 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Applies to:
Experience Manager 6.5

Topics:
Adaptive Forms

CREATED FOR:

Beginner
User

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.

To define your first custom function, please follow the following steps:

Log into crx
Create a new folder under apps called experience-league(This folder name can be a name of your choice)
Save your changes.
Under experience-league folder create a new node of type cq:ClientLibraryFolder called clientlibs.
Select the newly create clientlibs folder and add the allowProxy and categories properties as shown in the screen shot and save your changes.

client-lib

Create a folder called js under the clientlibs folder
Create a file called functions.js under the js folder
Create a file called js.txt under the clientlibs folder. Save your changes.
Your folder structure should look like the screen-shot below.

Rule Editor

Double click functions.js to open the editor.
Copy the following code into functions.js and save your changes.

/**
* Get List of County names
* @name getCountyNamesList Get list of county names
* @returns {string[]} An array of county names
 */
function getCountyNamesList()
{
    return ["Santa Clara", "Alameda", "Buxor", "Contra Costa", "Merced"];

}
/**
* Covert UTC to Local Time
* @name convertUTC Convert UTC Time to Local Time
* @param {string} strUTCString in Stringformat
* @return {string}
*/
function convertUTC(strUTCString)
{
    var dt = new Date(strUTCString);
    console.log(dt.toLocaleString());
    return dt.toLocaleString();
}

Please refer to jsdocfor more details on annotating javascript functions.
The above code has two functions:
getCountyNamesList - returns an array of string
convertUTC - Converts UTC time stamp to local time zone

Open the js.txt and paste the following code and save your changes.

#base=js
functions.js

The line #base=js specifies in which directory the JavaScript files are located.
The lines below indicate the location of JavaScript file relative to the base location.

If you are having trouble in creating the custom functions, feel free to download and install this package in your AEM instance.

Using the custom functions

The following video walks you through the steps involved in using custom function in the rule editor of an adaptive form

https://video.tv.adobe.com/v/340305?quality=12&learn=on

Transcript

Hi, in this video we will take a look at using custom functions in an adaptive form using the rule editor. So I have a simple form here which has two text fields and one drop-down list here. Before we start using custom functions, we need to make sure that our adaptive form is associated with the client library of the custom functions. So to do that, open the form containers configuration properties here and make sure that you specify the appropriate client library category here. In my case, it’s going to be custom functions demo because our custom functions client library uses this particular category. The next thing we need to do is to open up one of these fields here and use a custom function. So in our case, we’re going to populate this drop-down list by using a custom function. So click on the drop-down list state counties, click on edit rules, click on create to create a new rule. And make sure you open up this form objects and functions tab here. And here we need to select the option set options off to populate the drop-down list here. Set options off to function output and that functions can be selected from here. So some of these functions are out of the box and some of these are custom functions. We’re going to use our function which we defined get list of county names. Simply select that function and drop it in here. So what we are saying is use the set options of state counties to the function output of get list of county names. Save this. The next function that we’re going to associate is with the UTC date. So here we will take the value in the UTC date field and convert it into the local time zone. So open the rule editor for that, click on create. And here when UTC date is changed, then we are saying set the set value of a field called formatted date here. So select that. And the option is function output here. And we need to select the appropriate function that we’re going to use. So here we’re going to do convert UTC time to local time. Select that function. And if you remember our function has an input parameter. That input parameter’s value is going to be the value user entered in the UTC date field. So select form object. And here you can select the UTC date. You could have also dragged and dropped the UTC field from here onto here for the same behavior. So this is our rule associated with the UTC date. When the UTC date is changed, set the value of formatted date using the convert UTC time to local time function. Save. So now that our rules are defined, let’s try to test out this particular form here. So this is my form. You can see the state counties are populated. And then let’s enter a UTC date here and tab out. And then the formatted date is populated in this particular field. So this is how you would use custom functions in an adaptive form.

recommendation-more-help

8de24117-1378-413c-a581-01e660b7163e