AEM 62 - Touch UI Validator for restricting Tags Count in a Dialog Field

Goal


Granite Validator for restricting the count of tags selected in a Touch UI Dialog field

For Classic UI - check this post

Dialog of foundation Page Properties modified for demonstration only - /libs/foundation/components/page/cq:dialog/content/items/tabs/items/basic/items/column/items/title/items/tags

Demo | Package Install


Configuration



Error



Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-max-tags-in-tags-picker

2) Create node /apps/eaem-max-tags-in-tags-picker/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog and dependencies to underscore

3) Create file (nt:file) /apps/eaem-max-tags-in-tags-picker/clientlib/js.txt and add

                       max-tags.js

4) Create file (nt:file) /apps/eaem-max-tags-in-tags-picker/clientlib/max-tags.js and add the following code

(function ($) {
    var EAEM_MAX_TAGS_VALIDATOR = "eaem.max.tags",
        EAEM_MAX_TAGS = "eaemMaxTags",
        foundationReg = $(window).adaptTo("foundation-registry");

    foundationReg.register("foundation.validation.validator", {
        selector: "[data-validation='" + EAEM_MAX_TAGS_VALIDATOR + "'] input",
        validate: function(el) {
            var $tagsPicker = $(el).closest(".js-cq-TagsPickerField"),
                maxTagsAllowed = $tagsPicker.data(EAEM_MAX_TAGS.toLowerCase());

            if(!maxTagsAllowed){
                console.log(EAEM_MAX_TAGS + " number not set");
                return;
            }

            var $tagList = $tagsPicker.next(".coral-TagList");

            return ($tagList.find(".coral-TagList-tag").length > maxTagsAllowed
                            ? "Max exceeded, allowed : " + maxTagsAllowed : undefined);
        }
    });
}(jQuery));


5 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. One of the biggest challenges that organizations face today is having inaccurate data and being unresponsive to the needs of the Adobe CQ5 CMS Email List organization.

    ReplyDelete
  3. Hi, I'm using AEM 6.2 and maybe you only need update the line 9, ... var $tagsPicker = $(el).closest(".js-cq-TagsPickerField-selective");

    Only update the class .js-cq-TagsPickerField --> .js-cq-TagsPickerField-selective , awesome post! ;)

    ReplyDelete
  4. Seems like this is not working on 6.2, with both TagsPickerField and TagsPickerField-selective. Validation never kicks in. Any help is appreciated.

    ReplyDelete
  5. change line no. 17 from $tagsPicker.next(".coral-TagList"); to $tagsPicker.siblings(".coral-TagList");, because second time .next() would return the error icon not the tag list.

    ReplyDelete