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