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


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


                     eaemMaxTags  : 2

Error Alert


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


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

    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);
                return false;

            return, tag);

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

No comments:

Post a Comment