{"id":46028,"date":"2017-06-20T15:31:58","date_gmt":"2017-06-20T10:01:58","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=46028"},"modified":"2022-01-13T14:12:40","modified_gmt":"2022-01-13T08:42:40","slug":"tips-tricks-for-aem-6-2-form-development","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/tips-tricks-for-aem-6-2-form-development\/","title":{"rendered":"Tips & Tricks for AEM 6.2 Form Development"},"content":{"rendered":"

We often come across some tricks during the\u00a0implementation of AEM components<\/a>, which are not documented anywhere and we spend a lot of time in applying these tricks to our problems. I got a\u00a0chance 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.<\/span><\/strong><\/p>\n

I. Avoid Hyphen(-)\u00a0in Element name<\/strong><\/h1>\n

Use case and expected implementation<\/strong><\/p>\n

The use case assigned to me was to create a Loan Form using AEM form components. Depending on the\u00a0end user\u2019s employment type (like salaried, business), the requirement was to show some specific fields. As depicted in the below images, ‘Type of employment’<\/em>\u00a0is a drop-down and on selecting drop-down values, certain fields are shown.<\/p>\n

\"1\"<\/p>\n

\"2\"<\/p>\n

The implementation approach which I followed was to use AEM form panels which contain\u00a0fields required to be rendered for a\u00a0particular type of employment. Then, using rule editor to write the rules for the same as depicted in the image below.<\/p>\n

\"3\"<\/p>\n

Actual Implementation<\/strong>:<\/p>\n

So let\u2019s say, salaried and business are two panels containing the fields with element names ‘salaried-panel’<\/em>\u00a0and ‘business-panel’<\/em>\u00a0respectively.\u00a0As per Adobe’s documentation on forms authoring<\/a>, 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.<\/p>\n

The above-created rules to hide and show panels wouldn\u2019t 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.<\/p>\n

II. Resolving Form Component\u00a0in JS<\/strong><\/h1>\n

During the\u00a0implementation of AEM Forms, sometimes it is required to resolve AEM forms component as an Object in JavaScript files to achieve the following tasks easily:<\/p>\n