Smartphone

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

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);
}());