AEM 62 - Touch UI Create Page Wizard Set Tags Widget Required

Goal

Make the Tags field required in Touch UI Create Page wizard

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-create-page-tag-required

2) Create node /apps/eaem-touchui-create-page-tag-required/clientlib of type cq:ClientLibraryFolder, add String property categories with value cq.gui.common.tagspicker, String property dependencies with value underscore

3) Create file (nt:file) /apps/eaem-touchui-create-page-tag-required/clientlib/js.txt, add

                       tag-required.js

4) Create file (nt:file) /apps/eaem-touchui-create-page-tag-required/clientlib/tag-required.js, add the following code

(function ($, $document) {
    var CREATE_PAGE_WIZARD_URL = "/mnt/overlay/wcm/core/content/sites/createpagewizard.html",
        TAGS_FIELD = "./cq:tags";

    if(window.location.pathname.indexOf(CREATE_PAGE_WIZARD_URL) !== 0){
        return;
    }

    $document.on("foundation-contentloaded", function(){
        var $tagsPicker = $("[data-property-path='" + TAGS_FIELD + "']");

        if(_.isEmpty($tagsPicker)){
            return;
        }

        var $tagsTextField = $tagsPicker.find("input:text"),
            cuiPathBrowser = $tagsPicker.data("pathBrowser");

        cuiPathBrowser.$picker.on("coral-pathbrowser-picker-confirm.tagspicker", triggerChange);

        cuiPathBrowser.dropdownList.on("selected.tagspicker", triggerChange);

        $document.on("click", ".coral-TagList-tag-removeButton", triggerChange);

        function triggerChange(){
            setTimeout(function(){
                $tagsTextField.trigger("change");
            }, 250);
        }
    });

    $.validator.register({
        selector: ".js-cq-TagsPickerField input:text",

        validate: function ($textField) {
            var $tagsPicker = $textField.closest(".js-cq-TagsPickerField"),
                $tagList = $tagsPicker.parent().find(".coral-TagList");

            $tagsPicker.prev("label").html("Tags *");

            if ($tagList.find(".coral-TagList-tag").length <= 0) {
                return "Please fill out this field";
            }
        }
    });
}(jQuery, jQuery(document)));