Hello,
I am building a component that dynamically creates a graphQL query based on the fragmentIds of content fragments.
The fragmentIds are entered through an AEM dialog.
I was wondering if there was a way to validate the input to see if the fragmentId exists within AEM before it is added to the AEM page.
Hi @benbakos,
We did similar validation to match the path and resource type of content fragments and returned the error, if not found. Please see the steps below, may be you can just replace path with id:
Create a clientLib with category=dam.cfm.authoring.v2
with below js
(function(document, $) {
'use strict';
/**
* This script enables contentreference field validations for Content Fragment Models
*
* How to use:
*
* Add id custom-cf-reference-inputfield to resourceType contentreference
* Example: granite:id="custom-cf-reference-inputfield"
* Add class custom-cf-reference-multifield to the node resourceType multifield having field contentreference
* Example: granite:class="custom-cf-reference-multifield"
*/
function clear(el) {
$(el).find("input").first().removeAttr("aria-invalid").removeClass("is-invalid");
$(el).find("input").first().nextAll(".coral-Form-fielderrorCf").tooltip("hide").remove();
$(el).removeAttr("aria-invalid", "true").removeClass("is-invalid", true);
$(el).nextAll(".coral-Form-fielderrorCf").tooltip("hide").remove();
}
function enableSave(el) {
let $saveBtn = $('.button-apply');
if ($("#custom-cf-reference-inputfield .coral-InputGroup-input.is-invalid").length == 1) {
$saveBtn.removeClass('disabled');
}
if ($('.custom-cf-reference-multifield > coral-multifield-item > coral-multifield-item-content .coral-InputGroup-input.is-invalid').length === 1) {
$saveBtn.removeClass('disabled');
}
}
function showErrorMsg(el, msg) {
var CF_ERROR_MESSAGE = "Please enter a Valid Content Fragment path";
clear(el);
$(el).find("input").first().attr("aria-invalid", "true").toggleClass("is-invalid", true);
var fieldErrorEl = $("<span class='coral-Form-fielderrorCf coral-Icon coral-Icon--alert coral-Icon--sizeS ' " +
"data-init='quicktip' data-quicktip-type='error'><p> " + CF_ERROR_MESSAGE + "</p></span>");
fieldErrorEl.clone()
.attr("data-quicktip-arrow", "left")
.attr("data-quicktip-content", msg)
.insertAfter($(el).find("input").first());
}
function performValidation(el, cfPath, propertyName) {
let $saveBtn = $('.button-apply');
jQuery.ajax({
url: Granite.HTTP.externalize("/bin/cfvalidation"),
type: 'POST',
data: {
'cfPath': cfPath,
'propertyName': propertyName,
},
dataType: 'json',
success: function(data) {
enableSave(el);
clear(el);
},
error: function(request, error) {
$saveBtn.addClass('disabled');
showErrorMsg(el, request.responseJSON.msg);
}
});
}
$(document).ready(function() {
let $saveBtn = $('.button-apply');
$(document).on('keyup', '#custom-cf-reference-inputfield', function() {
if($(this).find("input").first().val() !=''){
performValidation($(this), $(this).find("input").first().val(), $(this).attr('name'));
}else {
clear($(this));
$saveBtn.removeClass('disabled');
}
});
$(document).on('coral-collection:add', '#custom-cf-reference-inputfield', function() {
if($(this).find("input").first().val() !=''){
performValidation($(this), $(this).find("input").first().val(), $(this).attr('name'));
}else {
clear($(this));
$saveBtn.removeClass('disabled');
}
});
$(document).on('keyup', '.custom-cf-reference-multifield > coral-multifield-item > coral-multifield-item-content', function() {
if($(this).find("input").first().val() !=''){
performValidation($(this), $(this).find("input").first().val(), $(this).find('foundation-autocomplete').attr('name'));
}else {
clear($(this));
$saveBtn.removeClass('disabled');
}
});
$(document).on('coral-collection:add', '.custom-cf-reference-multifield foundation-autocomplete', function() {
if($(this).find("input").first().val() !=''){
performValidation($(this), $(this).find("input").first().val(), $(this).attr('name'));
}else {
clear($(this));
$saveBtn.removeClass('disabled');
}
});
});
})(document, Granite.$);
Next step would be to write the servlet to do the required validation and return the error or success from the servlet.
Hope this helps!!
Thanks,
Chitra
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
