Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Validating FragmentIds in AEM

Avatar

Level 2

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

 

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

 

View solution in original post

4 Replies

Avatar

Community Advisor

You may need to write the validation scripts to verify the FragmentIDs entered. As for as how you can check whether there are any fragment with that ID, you can write some servlet to check and give true/false response , you can make call to servlet with ID from the validation script to get the confirmation. Its a cumbersome process! Please give it a try!

 

Blog to help 

https://blogs.perficient.com/2017/11/06/aem-touch-ui-dialog-validation-new-best-practice-use-foundat... 

Avatar

Level 2

Thank you for the response. I will take a look and see if this solution will work for me.

Avatar

Correct answer by
Community Advisor

 

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

 

Avatar

Level 2

Thank you for the response. I will see if the above js code works for our use case.