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