creating a dialog with multifield in multifield

By | 10:58 Leave a Comment


Multifield is a very important widget in CQ5. The biggest utility of it being the author can add many as he wants, even reorder 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 how ever is over come 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 be dealing with a single xtype. You can check out these links for how a custom multifield can be created

http://cq.shishank.info/2011/12/19/multifield-with-custom-xtype/
http://forums.adobe.com/message/4332833

Something that would be even more 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 a nt:unstructured node under the multifield node or programatically 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, some how 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.

over ride 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 foundation and replace the multifield xtype in it with custom xtype of your inner multifield. Lets call it innermultifield.

over ride 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. Lets call it 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<#-#><#-*>

Credits:
Hariprasad Marigowda
Edit : Check out http://cq5tutorials.blogspot.in/2015/03/create-multifield-in-multifield.html for creating multifield in multifield without any custom code.

Leave a comment if you have any queries.

0 comments:

Post a Comment