Wednesday, 17 February 2016

Creating an AEM HTML Template Language component that uses a Multifield

You can create an Adobe Experience Manager (AEM) 6.x Touch UI component that can be used within the AEM Touch UI view and display dynamic information. For example, an author can enter information into a multi-field control in the components dialog, as shown in this illustration.



In the previous illustration, notice that the Page Name and Path controls are used within a multi-field control. When an author clicks the Add Field button, a new area that contains a Page Name control and Path control appears. This lets an author dynamically enter as many values as required into the dialog. These values are used by the component.

The component created in this article is a HTL component.  When using HTL, you can use Java to retrieve the values that an author enters into a dialog. For example:

 iBean.setPage(jObj.getString("page"));

As discussed in this article, the Java class that you use as part of a HTL component extends com.adobe.cq.sightly.WCMUsePOJO.

This article walks you though how to build this HTL component that uses a multi-field control within its dialog.





Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel