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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
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

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

 

The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now