AEM Multifield with different widgets

Multifield widget in AEM was introduced to allow authors to enter any number of values they want and multifield serves its purpose pretty well. But multifield widget out of the box provides only textbox to take input from author. And at times we are in a situation where we want multifield with different widget for eg pathfield or a textarea or datefield. 

In this article we will see how to create or use multifield with different widgets or Xtypes.

Default Multifield widget

Solution : 

Creating a multifield with custom xtype or widget is a two step process. 

Step 1 : Create a multifield widget i.e create a new widget with xtype multifield. But this will create multi-type with only text field for input as shown above. 

FieldConfig node

Step 2 : create another widget with name fieldConfig and add value of xtype property as whatever widget you want in multifield, in this example we have used pathField. 

 

Multifield with pathfield as xtype

Multifield with Datefield as xtype

The values that are stored can be accessed the same ways we access in a values of default mutifield widget. 

For reference, here is the Link for the demo Multi-field component : 

https://github.com/ankit-gubrani/Codebrains/tree/master/content/src/main/content/jcr_root/apps/codebrains/components/content/multifieldDemo