Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

anshumank367659
Level 2
Level 2

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.

1 Accepted Solution
kaushal_mall
Correct answer by
Employee
Employee

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

View solution in original post

13 Replies
smacdonald2008
Level 10
Level 10

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.

anshumank367659
Level 2
Level 2

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.

smacdonald2008
Level 10
Level 10

Have you placed the asset picker in the dialog yet?

anshumank367659
Level 2
Level 2

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

smacdonald2008
Level 10
Level 10

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

smacdonald2008
Level 10
Level 10

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

smacdonald2008
Level 10
Level 10

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
Level 10
Level 10

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

anshumank367659
Level 2
Level 2

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

kaushal_mall
Correct answer by
Employee
Employee

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

View solution in original post

anshumank367659
Level 2
Level 2

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

anshumank367659
Level 2
Level 2

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.