AEM 6.3 : Coral 3 multifield component

 

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

coral3-multifield-collection

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

coral3-multifield

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.