AEM 6.3 Code snippets : Coral 3 multifield component

Posted in AEM Code Snippets, AEM Tutorials By Raj On July 1, 2017


In this article, I am going to explain to you how to build mulitifield control using Granite UI coral 3 components, If you are working on AEM 6.2 and want to build Touch UI based multifield control then this is not the right article for you I request you refer my other article “How to build multifield control using TouchUI“, this article covers OOTB multifield control which is part of AEM 6.3 and the main advantage of this is we do not need to use ACS touch UI multifield control

This article uses coral 3 components so, I suggest you refer my other article AEM 6.3 Granite UI: Coral 3 components for coral 3 based XML snippets

As part of this article, I am going to build simple list collection component, the authoring dialog of list collection component will have two fields link text and link path and the content author can author more than one record by just clicking on add icon button

Once building authoring dialog is completed, if you go and edit the component the multifield control should look like below


Once the content author completed his job, if you see the repository structure the content is stored something like below,  under the parsys node every link is created as a separate node and added author entered values as properties


here, I am using sling models only for Link object but, if you want to see a full example on sling models then refer this article Building custom list collection component using sling models

In the populateModel of ListCollectionHandler class, I am iterating all the child nodes and populating List collection

Sightly Code

Use the below sightly code to iterate the collection and render it on the page

Download Code

  • nimish kumar

    nice explanation

  • Scott Macdonald

    I like the content – but letting the package be downloaded would be more helpful.

  • Saitama Sensei

    hello, how set max, min item in multifield ?

    • Raj Mandalapu

      There is no OOTB functionality for this, you need to either write custom script or use ACS commons multifield

  • solomen

    I have question for you, please support me. I look name=”./multiCol” var in multifield is unused. Why you add it ???

  • Veerareddy Chilakala

    Nice Article

  • Vineela karnati

    I m having a doubt where to keep the multifields xml code??? can someone help me