#multifield

[ankur-ahlawat]

Create Touch UI Nested MultiField Dialog in AEM

In this tutorial we will see how to create Touch UI Nested Multifield component using HTL in aem. This tutorial is in continuation with our last tutorial about creating multifiled component in aem. In this tutorials also we will be using ACS common (Adobe consulting services) multifield component that allows developers to create a nested multifield (multifiled inside multifiled) of a fieldset…

View On WordPress

[aemec]

Multifield implementation using ACS AEM Commons

While looking for some instructions on how to create a custom widget I landed on a great website that I wasn't aware of before ACS AEM Commons.

AEM Commons is a package containing a bunch of different common and very useful features. I think the lemma of this packages say it all “The wheel doesn't need reinventing”.

The Installation of this tools is very easy, it can be done using maven or manually deploying the package, this can be done via package manager.

The package can be found in GitHub.

The feature that I used at first was the “Multi Field Panel”. This feature is inside the “Custom Widgets and Validators” section.

I am pretty sure you as a developer have faced the need to create a multifield property that contains more than one type of fields.

The traditional way to workaround this requirement is to create a custom widget. This for sure take some time, plus it might very complex to maintain it and reuse it for multiple purposes.

Now, with the AEM Commons tools, this requirement and necessity is covered. The field to be used is multifieldpanel. It will store the content in a json string. The tools also offer a custom tag to read this property.

“The multifieldpanel widget is a widget which enables the management of complex items in a traditional multifield. These complex items are composed of multiple widgets.“

JSON:

{"term":"term","definition":"a word or phrase used to describe a thing"}

Custom tag:

<%@ taglib prefix="widgets" uri="http://www.adobe.com/consulting/acs-aem-commons/widgets" %><c:set var="definitions" value="${widgets:getMultiFieldPanelValues(resource, 'definitions')}"/>

Iteration:

The value stored in definitions is a List of Maps. List<Map<String, String>>.

<c:forEach items="${definitions}" var="definition">     <dt>${definition['term']}</dt>     <dd>${definition['definition']}</dt> </c:forEach>

Note: The code shown in this post is taken from the ACS site.