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

Question

I develop the site with Day CQ5 and was faced witha problem. I'm creating a component, and the dialogue for it. I use in the dialog for the component element "multifield", which contains several elements "pathfield." How can I set a specific number of elements "pathfield" and remove buttons "+" and "-"?

Peruke

Answer 1

I've come across this exact problem this week :)

It seems that by default you can't limit the number of items the editor can enter. To resolve the issue, I created an overlay of the Multifield.js placed at

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

I've added a check for a 'limit' property set on the fieldConfig node under the multifield. If present & not zero, it will use this as the max number of fields a user can add.

Don't want to get into copyright issues by posting the full overlay, but the changes I made where as follows:

In the constructor (line #53), add in a check to get the value of limit from the fieldConfig node:

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

In the handler for the "+" button (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
    });
}

Rather than removing the buttons, I've just created a pop-up to inform the editor that 'N is the max number of fields allowed'.

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

Carmelinacarmelita

can you answer this question ? #28362498 – Hightower

Answer 2

You can also add listeners in parallel to 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 the limit value to fieldConfig of multifield.

Maitund

Answer 3

I have not found yet a standard solution to this problem, but came up a little trick. At first I add the required number of children-elements through a dialogue of component. And then I add the property "class" to the element "multifield", for example "sliderpanel-dialog-multifield". Then I add in the component CSS-style such construction:

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

".x-btn" is a class that uses the buttons in CQ5. After that, the buttons will be hidden and you can not add or remove elements in multifield. I have another suggestion that this problem can be solved with the help of listeners and script, but it will be harder to solve, which I quoted above. I have so far focused on this variant, but if you have other ideas, I would be very interested to know them.

Peruke

Answer 4

There seem to be an issue with beforeadd solution: the form/dialog becomes in an invalid state, telling us to correct the marked fields ... but everything is correct.

Is there a way to re-initialize the form validation?

Zondra

Answer 5

Refer to this post where i have implement the functionality by removing the Add item button once the limit is reached.

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

However the process of implementation is:

1. Add limit**(long)**property to fieldConfig node
2. Add listeners node to the 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 limit : 3

The Add item button will disappear after adding 3 items

Add item button disappears:

Sorption