Validating the custom assetpicker(coralUI) in the overlayed pageProperties dialog | Community
Skip to main content
New Participant
December 7, 2017
Solved

Validating the custom assetpicker(coralUI) in the overlayed pageProperties dialog

  • December 7, 2017
  • 13 replies
  • 6074 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kaushalmall

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

13 replies

New Participant
December 11, 2017

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.

New Participant
December 8, 2017

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

kaushalmallAccepted solution
Employee
December 7, 2017

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

New Participant
December 7, 2017

Thanks a ton Scott, i will try some logic to implement this concept.

smacdonald2008
New Participant
December 7, 2017

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

http://experience-aem.blogspot.com/2016/08/aem-62-touch-ui-create-page-wizard-set-tags-widget-required.html

smacdonald2008
New Participant
December 7, 2017

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....

smacdonald2008
New Participant
December 7, 2017

This may make a really good community article too - overlay a component and then make the new widget mandatory.

smacdonald2008
New Participant
December 7, 2017

I am checking internally so see if we have any samples for this use case.

smacdonald2008
New Participant
December 7, 2017

Can you post a screenshot

New Participant
December 7, 2017

yes Scott i am calling the render.jsp of the overlayed tagfield component from the node of my dialog using sling:resourceType.