AEM 61 - Classic UI Limit Multifield Widget

Goal

Extend CQ.form.Multifield to create a LimitMultfield to limit the number of items added in the widget

For TouchUI check this post

Demo | Package Install


Configuration



Error

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/classic-ui-multi-field-limit-items

2) Create node /apps/classic-ui-multi-field-limit-items/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) Create file (nt:file) /apps/classic-ui-multi-field-limit-items/clientlib/js.txt and add

                       multi-field-limit-items.js

4) Create file (nt:file) /apps/classic-ui-multi-field-limit-items/clientlib/multi-field-limit-items.js and add the following code.

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.LimitMultiField = CQ.Ext.extend(CQ.form.MultiField, {
    initComponent: function () {
        ExperienceAEM.LimitMultiField.superclass.initComponent.call(this);

        if(!this.limit){
            return;
        }

        this.on("beforeadd", function(){
            var items = this.findByType(this.fieldConfig.xtype);

            if(items.length < parseInt(this.limit)){
                return;
            }

            CQ.Ext.Msg.alert('Error', 'More than ' + this.limit + " not allowed");

            return false;
        });
    }
});

CQ.Ext.reg("limit-multifield", ExperienceAEM.LimitMultiField);