hi All,
I have a requirement to validate a custom assetpicker field for my overlayed pageProperties dialog, in the similar fashion how the page title is getting validated. The validation for the ootb page title is handled from "/libs/cq/gui/components/siteadmin/admin/createpagewizard/page/POST.jsp", but i could not find a way on how to customize it to my needs. The assetpicker is being marked up on the dialog using coral ui(render.jsp) and the same is used on my cq:dialog.
Many thanks for your responses and guidance.
Solved! Go to Solution.
Views
Replies
Total Likes
the validation happens client side. Not in the file you mention above.
Below is a sample to make the fileupload widget required, you can use the same.
(function(document, $, Granite) {
"use strict";
var CLASS = ".coral-FileUpload-input",
DATA_VALIDATION_VALUE = "fileupload-required",
fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error' />");
// check for coral-id of tab, see if it's hidden, then pass the validation .
// if dialog doesn't have tab, do regular validation
function validateFileUpload(e) {
var valid = true,
validationRequired = true,
validation = $(e).data('validation'),
message = $(e).data('error-msg'),
tabpanel = $(e).closest('section.coral-TabPanel-pane');
if(typeof tabpanel !== "undefined"){
var dialogPanel = $(tabpanel).closest("div.coral-TabPanel");
var id = $(tabpanel).attr("id");
var isHidden = $(tabpanel).attr("aria-hidden");
if(typeof dialogPanel !== "undefined"){
var thisPanel = $(dialogPanel).find("[aria-controls='"+ id +"']");
if(typeof thisPanel !== "undefined" && $(thisPanel).hasClass("hide")){
validationRequired = false;
}
}
}
if (validationRequired && validation && validation.indexOf(DATA_VALIDATION_VALUE) >= 0) {
valid = $(e).closest('.coral-FileUpload').hasClass('is-filled');
if (valid) {
clearError(e);
} else {
showError(e, message);
}
}
return valid;
}
function clearError(el) {
var fieldSet = $(el).closest('.coral-Form-fieldwrapper'),
field = el.closest(".coral-Form-field");
fieldSet.removeAttr("aria-invalid").removeClass("is-invalid");
fieldSet.find(".coral-Form-fielderror").remove();
}
function showError(el, message) {
var fieldSet = $(el).closest('.coral-Form-fieldwrapper'),
field = el.closest(".coral-Form-field"),
error = fieldSet.find(".coral-Form-fielderror"),
arrow = "right";
fieldSet.attr("aria-invalid", "true").toggleClass("is-invalid", true);
if (error.length === 0) {
fieldSet.css('position', 'relative');
fieldErrorEl.clone()
.attr("data-quicktip-arrow", arrow)
.attr("data-quicktip-content", message)
.css('position','absolute')
.css('top','px')
.css('right','190px')
.insertAfter(field);
}
el.blur();
}
$(document).on('click', ".cq-dialog-submit", function(e) {
var fileUploads = $(this).parents('form').find(CLASS);
fileUploads.each(function(){
if (!validateFileUpload(this)) {
e.stopPropagation();
e.preventDefault();
}
})
});
$(document).on('change', '.coral-FileUpload', function(e) {
validateFileUpload($(this).find(CLASS));
});
})(document, Granite.$, Granite);
What do you mean validate this field - are you checking for a length to make sure a value has been chosen? Are you trying to verify the location of the asset? Please provide more detail on what exactly you are trying to accomplish by overlaying this component.
Views
Replies
Total Likes
By validating i mean, if the author has configured that field or not(mandatory field), i am trying to do a similar kind of implementation that we have for page title in our ootb.
Views
Replies
Total Likes
Have you placed the asset picker in the dialog yet?
Views
Replies
Total Likes
yes Scott i am calling the render.jsp of the overlayed tagfield component from the node of my dialog using sling:resourceType.
Views
Replies
Total Likes
Can you post a screenshot
Views
Replies
Total Likes
I am checking internally so see if we have any samples for this use case.
Views
Replies
Total Likes
This may make a really good community article too - overlay a component and then make the new widget mandatory.
Views
Replies
Total Likes
See this community thread too -
cq5 - How add mandatory dropdown field in Touch UI - Stack Overflow
Different granite type - but it points you in the right direction....
Views
Replies
Total Likes
Our Touch UI expert referenced this blog too to help you --
This only sets tags picker required in page properties… I guess he could do something similar for asset picker
Views
Replies
Total Likes
Thanks a ton Scott, i will try some logic to implement this concept.
Views
Replies
Total Likes
the validation happens client side. Not in the file you mention above.
Below is a sample to make the fileupload widget required, you can use the same.
(function(document, $, Granite) {
"use strict";
var CLASS = ".coral-FileUpload-input",
DATA_VALIDATION_VALUE = "fileupload-required",
fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error' />");
// check for coral-id of tab, see if it's hidden, then pass the validation .
// if dialog doesn't have tab, do regular validation
function validateFileUpload(e) {
var valid = true,
validationRequired = true,
validation = $(e).data('validation'),
message = $(e).data('error-msg'),
tabpanel = $(e).closest('section.coral-TabPanel-pane');
if(typeof tabpanel !== "undefined"){
var dialogPanel = $(tabpanel).closest("div.coral-TabPanel");
var id = $(tabpanel).attr("id");
var isHidden = $(tabpanel).attr("aria-hidden");
if(typeof dialogPanel !== "undefined"){
var thisPanel = $(dialogPanel).find("[aria-controls='"+ id +"']");
if(typeof thisPanel !== "undefined" && $(thisPanel).hasClass("hide")){
validationRequired = false;
}
}
}
if (validationRequired && validation && validation.indexOf(DATA_VALIDATION_VALUE) >= 0) {
valid = $(e).closest('.coral-FileUpload').hasClass('is-filled');
if (valid) {
clearError(e);
} else {
showError(e, message);
}
}
return valid;
}
function clearError(el) {
var fieldSet = $(el).closest('.coral-Form-fieldwrapper'),
field = el.closest(".coral-Form-field");
fieldSet.removeAttr("aria-invalid").removeClass("is-invalid");
fieldSet.find(".coral-Form-fielderror").remove();
}
function showError(el, message) {
var fieldSet = $(el).closest('.coral-Form-fieldwrapper'),
field = el.closest(".coral-Form-field"),
error = fieldSet.find(".coral-Form-fielderror"),
arrow = "right";
fieldSet.attr("aria-invalid", "true").toggleClass("is-invalid", true);
if (error.length === 0) {
fieldSet.css('position', 'relative');
fieldErrorEl.clone()
.attr("data-quicktip-arrow", arrow)
.attr("data-quicktip-content", message)
.css('position','absolute')
.css('top','px')
.css('right','190px')
.insertAfter(field);
}
el.blur();
}
$(document).on('click', ".cq-dialog-submit", function(e) {
var fileUploads = $(this).parents('form').find(CLASS);
fileUploads.each(function(){
if (!validateFileUpload(this)) {
e.stopPropagation();
e.preventDefault();
}
})
});
$(document).on('change', '.coral-FileUpload', function(e) {
validateFileUpload($(this).find(CLASS));
});
})(document, Granite.$, Granite);
many thanks Kaushal, i was trying to find the js file that validates the page title mandatory check, but could not, any help on this. Thanks
Views
Replies
Total Likes
The validation can be easily made by customizing POST.jsp present in createpagewizard. The /libs/cq/gui/components/siteadmin/admin/createpagewizard/page/POST.jsp (createpagewizard) can be overlayed in the similar hierarchical fashion as in /libs to /apps and then do the custom modifications for the exceptions based on the validation criteria.
Views
Likes
Replies
Views
Likes
Replies