Validating FragmentIds in AEM

[benbakos]

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.

[Saravanan_Dharmaraj]

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

[benbakos]

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

[ChitraMadan · Accepted solution]

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

[benbakos]

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