Creating a dialog with multifield in multifield

Multifield is a very important widget in CQ5. The biggest utility of it is the author can add many as he wants, even reorders with a very simple interface. This makes it an ideal choice for scenarios where there is no fixed count for how many records a component can have(no of items in a list for example). The multifield that comes out of the box is limited by the fact that it can handle a single xtype at a given time. This problem, however, is overcome by creating a custom composite xtype that can hold multiple xtypes within it. The fields are converted into a string separated by a delimiter pattern. With this hack, you can use the multifield that comes out of the box for a wider range of applications as it'd be still dealing with a single xtype.

Something that would be even better would be having a custom multifield in a multifield. My friend Hariprasad Marigowda came up with this brilliant solution. The approach involved in pulling off this is explained below:

The type of widget you want in a multifield is configured through its fieldconfig. You can configure this manually by creating an nt:unstructured node under the multifield node or programmatically through the custom multifield js. The data in a composite field is stored in a hidden form in the dialog. it is this form that the dialog posts to the node when you click OK on your dialog. The data in this hidden form then gets saved in the node.

The OOTB multifield stores the configured data as an array of strings. To work with composite widgets that contain multiple fields, you hack it to store the data as a string separating each pattern by a fixed pattern. Now when it comes to a multifield within a multifield, somehow the data from the inner multifield must be a string; but the multifield saves data as an array of strings. How do you get it to work?

Hari created this custom outer multifield that takes the string array from inner multifield and converts it into a comma-separated string. The form in the outer field is then updated with this value along with the other fields separated by a fixed delimiter.

The inner multifield expects the data to be a string array when it is being rendered.you again fetch the comma-separated string from the node and create string array by splitting it. By doing this the inner multifield is abstracted from the fact it is being used inside a multifield. As far as the inner multifield is concerned it stores an array of strings and renders the dialog by reading an array of strings.

create a custom xtype for the outer multifield fieldconfig by extending the composite field.

override the set value and get value methods in the outer multifield like how you would do for a composite field by separating the fields with a delimiter.

Copy the multifield js from the foundation and replace the multifield xtype in it with custom xtype of your inner multifield. Let's call it innermultifield.

override the set value method in the modified multifield js to split the comma-separated array and set its value using it.


create a custom composite field to be used in the fieldconfig of inner multifield. Let's call it the innerfield.
This again is like any other composite field except that the hidden field of the outer multifield is updated too when there is a change in the inner multifield.

The end result when the dialog is configured will look some thing like this
String array
[0] : a-outer-field1<#-*>a-outer-field2<#-*>a-1-inner-field1<#-#>a-1-inner-field2<#-#>,a-2-innerfield1<#-#>a-2-innerfield2<#-#><#-*>

[1] : b-outer-field1<#-*>b-outer-field2<#-*>b-1-inner-field1<#-#>b-1-innerfield2<#-#>,b-2-innerfield1<#-#>b-2-innerfield2<#-#><#-*>

Source: http://cq5tutorials.blogspot.com/2014/04/cq5-multifield-in-multifield.html