AEM 61 - Classic UI Limit the number of Tags selected in xtype:tags widget

Goal

Limit the number of tags selected in Classic UI Tags widget

For limiting the number of tags per namespace check this post

For Touch UI - check this post

Dialog of foundation Page Properties modified for demonstration only - /libs/foundation/components/page/tab_basic/items/basic/items/tags

Demo | Package Install

Configuration

                     eaemMaxTags  : 2

Error Alert

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-classic-ui-max-tags-in-tags-widget

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-classic-ui-max-tags-in-tags-widget/clientlib and set property categories of String type to cq.tagging and dependencies to underscore

3) Create file ( type nt:file ) /apps/eaem-classic-ui-max-tags-in-tags-widget/clientlib/js.txt, add the following

                         max-tags.js

4) Create file ( type nt:file ) /apps/eaem-classic-ui-max-tags-in-tags-widget/clientlib/max-tags.js, add the following code

(function(){
    var EAEM_MAX_TAGS_CONFIG = "eaemMaxTags";

    var EAEM_TAG_INPUT_FIELD = CQ.Ext.extend(CQ.tagging.TagInputField, {
        checkMaximum: function(tag) {
            var limit = this.initialConfig[EAEM_MAX_TAGS_CONFIG];

            if(limit && this.tags.length >= parseInt(limit)){
                var msgBox = CQ.Ext.Msg.alert('Limit exceeded', "Maximum tags allowed of any namespace: " + limit);
                msgBox.getDialog().setZIndex(99999);
                return false;
            }

            return EAEM_TAG_INPUT_FIELD.superclass.checkMaximum.call(this, tag);
        }
    });

    CQ.Ext.reg("tags", EAEM_TAG_INPUT_FIELD);
}());