How to limit the number of elements in multifield in CQ5?

Question

I am developing a site using Day CQ5 and ran into a problem. I create a component and a dialog for it. I use the "multifield" component element in the dialog, which contains several "pathfield" elements. How to set a certain number of "pathfield" elements and remove the "+" and "-" buttons?

Answer 1

This week I ran into this problem :)

It seems that by default you cannot limit the number of elements that the editor can enter. To solve the problem, I created a Multifield.js overlay placed in

/apps/cq/ui/widgets/source/widgets/form/MultiField.js 

I added a check for the "limit" property set in the Config node field under multifield. If present, and not zero, he will use this as the maximum number of fields that the user can add.

Don't want to deal with copyright issues by posting a full overlay, but the changes I made are as follows:

In the constructor (line # 53) add a check to get the limit value from the Config node field:

 if (!config.fieldConfig.limit) { config.fieldConfig.limit = "0"; } 

In the "+" button handler (line 71), change the function to the following:

 if(config.fieldConfig.limit == 0 || list.items.getCount() <= config.fieldConfig.limit) { list.addItem(); } else { CQ.Ext.Msg.show({ title: 'Limit reached', msg: 'You are only allowed to add ' + config.fieldConfig.limit + ' items to this module', icon:CQ.Ext.MessageBox.WARNING, buttons: CQ.Ext.Msg.OK }); } 

Instead of deleting the buttons, I just created a pop-up window to tell the editor that "N is the maximum number of fields allowed."

Simple change, but does the job! Hope this is helpful.

Answer 2

You can also add listeners in parallel to the multifield node. for example

Event: beforeadd

Function:

 function(list,component,index) { if(this.fieldConfig.limit!=0) { if(this.fieldConfig.limit == (list.items.getCount()-1)) { CQ.Ext.Msg.show( {title: 'Limit reached', msg: 'You are only allowed to add '+this.fieldConfig.limit+' items to this module',icon:CQ.Ext.MessageBox.WARNING,buttons: CQ.Ext.Msg.OK} );;return false; } } } 

Prerequisites: Add a limit value to the Config field for the multi-finals.

Answer 3

I have not yet found a standard solution to this problem, but I came up with a little trick. First, I add the required number of children through the component dialog. And then I add the class property to the multifield element, for example sliderpanel-dialog-multifield. Then I add the style of this design to the CSS component:

 .sliderpanel-dialog-multifield .x-btn{ display: none; } 

". x-btn" is a class that uses buttons in CQ5. After that, the buttons will be hidden and you will not be able to add or remove elements in multifield. I have another assumption that this problem can be solved with the help of listeners and script, but it will be more difficult to solve, as I said above. I have still focused on this option, but if you have other ideas, I would be very interested to know them.

Answer 4

It seems that the problem with the beforeadd solution: the form / dialog goes into an invalid state, telling us to correct the marked fields ... but everything is correct.

Is there a way to reinitialize form validation?

Answer 5

Refer to this post where I implement the functionality by removing the “Add Element” button when the limit is reached.

http://letsaem.blogspot.in/2015/12/add-limit-to-number-of-elements-in.html

However, the implementation process:

• Add limit ** (long) ** property to the Config node field
• Add node listeners to multifield xtype and add the following listeners.

removeditem:

 function(list) { var length = list.items.length; if (length <= list.fieldConfig.limit) { list.items.items[length - 1].show(); } } 

beforeadd:

 function(list, component, index) { var length = list.items.length; var addButton = list.items.items[length - 1]; if (length == list.fieldConfig.limit) { addButton.hide(); } } 

Now if you give a restriction: 3

Add item button will disappear after adding 3 items

The add item button disappears: