Smartphone

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