How to build multifield control using TouchUI

This article supports AEM 6.2 and below if you are looking for AEM 6.3 touch UI multifield control then I suggest you read this article AEM 6.3 Granite UI Coral 3 multifield component

In this article, I am going to explain to you how to build multifield control using TouchUI, building multifield control is not simple thing when it comes to touchUI, we have faced lot issues when we were working on AEM 6.0, but luckily the acs-commons provided custom multifield control so, for me it does not make sense to re-invent the wheel once again so I am going to explain how can we re-use acs commons multifield in our projects without re-inventing the wheel

touchuimultifield

The first thing which you need to do is download and install ACS Commons in your local development environment, then go to the crx/de/index.jsp and check the folders related to acs commons are created or not, once acs commons are installed then go to your component and add below fields,if you are familiar with XML then you can create dialog directly in dialog.XML file

To create a custom multifield first create a node and add sling resource type to granite multifield widget “sling:resourceType=”granite/ui/components/foundation/form/multifield” , up to now nothing has changed, now what you need to do is add separate property to this multifield widget and the property is

Once this is completed then the next step is, create a fieldset and add below property, the ACS Commons multifield JavaScript creates multifield control based on these properties, the NODE_STORE value creates new node for every record and assigns property’s to it

Then the remaining things are same you just need to create container and add fields which need to have appeared when you click on add new button

For the above XML the dialog will be rendered something like below if you face any issue with the width of fields then add below class for multifield node and all other fields, linkUrl, Title, screen readers text etc…

dialog

Now, just add some records using multifield control and check the repository, the node structure will be created something like below

content-hierarchy

Now I suggest you to use below sling model code to read static list values, for more information on sling models and how it works check this link Sling Models