Tips & Tricks for AEM 6.2 Form Development
We often come across some tricks during the implementation of AEM components, which are not documented anywhere and we spend a lot of time in applying these tricks to our problems. I got a chance to work on a small proof of concept around AEM 6.2 Forms implementation, where I was exploring the OOTB Form components. I thought sharing few tricks would be helpful for developers who are working on AEM Forms.
I. Avoid Hyphen(-) in Element name
Use case and expected implementation
The use case assigned to me was to create a Loan Form using AEM form components. Depending on the end user’s employment type (like salaried, business), the requirement was to show some specific fields. As depicted in the below images, ‘Type of employment’ is a drop-down and on selecting drop-down values, certain fields are shown.
The implementation approach which I followed was to use AEM form panels which contain fields required to be rendered for a particular type of employment. Then, using rule editor to write the rules for the same as depicted in the image below.
Actual Implementation:
So let’s say, salaried and business are two panels containing the fields with element names ‘salaried-panel’ and ‘business-panel’ respectively. As per Adobe’s documentation on forms authoring, the Element Name field accepts letters, numbers, hyphens (-), and underscores (_) only. Other special characters are not allowed, and element name should begin with an alphabet.
The above-created rules to hide and show panels wouldn’t work since the element name of the panels contain a hyphen(-). After removing the hyphen from element name, the expected functionality started working. We identified that using a hyphen in element name will impacts other functionalities too.
II. Resolving Form Component in JS
During the implementation of AEM Forms, sometimes it is required to resolve AEM forms component as an Object in JavaScript files to achieve the following tasks easily:
- Enable/Disable Component
- Get/Set Component value
- Hide/Show Panels
- Retrieve CRX properties values like jcr:path, name and resourceType
Below mentioned are two ways to resolve Form component as an Object:
- Using Guidebridge API
It is a recommended API by Adobe for AEM forms. For accessing GuideBridge API, we get an Object name ‘guideBridge’ of type GuideBridge which is available globally in JS context, after the guideBridge script is loaded. There is a method of ‘guideBridge’ object ‘resolveNode()’ with following definition: GuideNode resolveNode(somExpression).
Here, somExpression is a string representing the reference syntax expression of the component, and it is unique to each component. The SOM Expression string can be obtained by right clicking on the component in Edit mode and then by selecting ‘View SOM expression’.
After getting the SOM expression, the component object can be resolved using the code below:
[code language=”javascript”]
var somExpression = "guide[0].guide1[0].guideRootPanel[0].form-panel[0].decide-toapply-panel[0].eligibilityamount[0]";
var eligibilityAmountComp = guideBridge.resolveNode(somExpression);
eligibilityAmountComp.visible = true;
eligibilityAmountComp.value = 120000;
[/code]
- Using the Element Name
The Element Name of AEM Component which represents the Component Object can also be used. But the limitation of this approach is that the scope of the object is limited to JavaScript code which is written using rule editor in code/visual editor. So in case, the component is required to be used in clientlibs for forms, then the above-mentioned approach is required to be implemented, as ‘guideBridge’ object is available globally. Element Name can be used as shown below:
In above code, ‘eligibilityAmount’ is the element name of the TextBox Form component and this can be used directly to set its value.
III. Form Panel Validation
Multi-step or Multi-panel forms are used in the case where there are multiple fields in a form, which makes the form lengthy. The related use case can be a Loan form again, where few KYC fields are required to be filled and then based on certain loan criteria, the other form fields should be filled. So I used Multi-panel AEM forms (available OOTB), where I validated the current panel and then moved to the next panel on a button click.
We can apply the validation on form fields using the rule editor, using GuideBridge API we can create a method in JavaScript present under AEM forms clientlib and invoke this method on every ‘Next’ button click. The method should first validate the current panel, and if it is successfully validated, then only move to the next panel, otherwise, error messages should be rendered. Details of the steps are mentioned here:
- Create clientlib and add it to the AEM Form. This is done by editing the Adaptive form container in the form and then adding the clientlib category to the “Client Library category” field.
- Create Method nextClick() in any existing or new Js File in Clientlib.
[code language=”javascript”]
function nextClick(currentPanel){
var myList = [];
if(guideBridge.validate(myList,currentPanel.navigationContext.currentItem.somExpression))
{
window.guideBridge.setFocus(currentPanel.somExpression,’nextItem’,true);
}
}[/code]
- Add ‘Next’ button to the toolbar of the MultiPanel wizard.
- Add method call passing the current panel you want to validate in Rule Editor of next button.
Now on clicking ‘Next’ button, the current panel will be first validated, then the user can move to the next panel.
IV. Get Proper XML sample for Dynamic Form Pre-filling
Dynamic pre-filling is one of the popular feature of AEM forms, as well as a ubiquitous requirement in the forms.This can be used whenever there are fields to be pre-filled for the user or to enable the edit form feature for the user.
AEM forms take the specified XML format to allows pre-filling. The one implementing this feature must know the correct XML schema of the form. There is an easy way to generate this XML and here are the details for the same:
- Edit the Adaptive Form Container and click on the submission tab of the dialog on the left side of the form.
- Choose Forms Portal Submit Action from drop down of the Submit Action and save the changes.
- Go to Preview mode of the form and submit the form.
- Open CRXDE and go to the path ‘/content/forms/fp/admin/submit/data’ and look for the last node under it (this is the node where data is stored as XML for form portal submission option).
- Check the ‘jcr:data’ property of this node and click on ‘view’ on the Value.
- An XML file will be downloaded, and you can use this XML as the sample for preview feature.
REFERENCES
- https://helpx.adobe.com/aem-forms/6-2/topics.html
- https://helpx.adobe.com/aem-forms/6-2/prepopulate-adaptive-form-fields.html
- https://helpx.adobe.com/aem-forms/6-2/javascript-api/GuideBridge.html
- https://helpx.adobe.com/aem-forms/6-2/rule-editor.html
- https://helpx.adobe.com/aem-forms/6-2/introduction-forms-authoring.html
Fundamentals of Migrating Content to AEM