AEM 6.3.1.0 - Touch UI Add Min Max Limit to Coral 3 Multifield

Goal


Add minimum, maximum limit configuration extension to Coral 3 Multifield - granite/ui/components/coral/foundation/form/multifield

Demo | Package Install | Github


Min-Max Configuration



Max Validation



Min Validation



Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-touchui-min-max-items-multifield

2) Create node /apps/eaem-touchui-min-max-items-multifield/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.all

3) Create file (nt:file) /apps/eaem-touchui-min-max-items-multifield/clientlib/js.txt and add

                       min-max-multifield.js

4) Create file (nt:file) /apps/eaem-touchui-min-max-items-multifield/clientlib/min-max-multifield.js and add the following code

(function ($, $document, gAuthor) {
    var EAEM_MAX_ITEMS = "eaem-max-items",
        EAEM_MIN_ITEMS = "eaem-min-items",
        DATA_MF_NAME = "data-granite-coral-multifield-name",
        RS_MULTIFIELD = "granite/ui/components/coral/foundation/form/multifield",
        SLING_RES_TYPE = "sling:resourceType";

    $document.on("dialog-ready", addMinMaxCheck);

    function addMinMaxCheck(){
        $.ajax(getDialogPath() + ".infinity.json").done(handler);

        function handler(data) {
            var mfProperties = {};

            fillItemsOfMultifield(data, mfProperties);

            _.each(mfProperties, function(mfProps, mfName){
                addValidator($("[" + DATA_MF_NAME + "='" + mfName + "']"),
                                mfProps[EAEM_MAX_ITEMS], mfProps[EAEM_MIN_ITEMS]);
            });
        }
    }

    function addValidator($multifield, maxItems, minItems){
        if(maxItems){
            maxItems = parseInt(maxItems);
        }

        if(minItems){
            minItems = parseInt(minItems);
        }

        $.validator.register({
            selector: "#" + $multifield.attr("id"),
            validate: validate
        });

        function validate(){
            var count = $multifield[0]._items.length;

            if(maxItems && (count > maxItems) ){
                return "Maximum allowed : " + maxItems + " items";
            }

            if(minItems && (count < minItems) ){
                return "Minimum required : " + minItems + " items";
            }

            return null;
        }
    }

    function getDialogPath(){
        var gAuthor = Granite.author,
            currentDialog = gAuthor.DialogFrame.currentDialog, dialogPath ;

        if(currentDialog instanceof gAuthor.actions.PagePropertiesDialog){
            var dialogSrc = currentDialog.getConfig().src;
            dialogPath = dialogSrc.substring(0, dialogSrc.indexOf(".html"));
        }else{
            var editable = gAuthor.DialogFrame.currentDialog.editable;

            if(!editable){
                console.log("EAEM - editable not available");
                return;
            }

            dialogPath = editable.config.dialog;
        }

        return dialogPath;
    }

    function fillItemsOfMultifield(data, mfProperties){
        if(!_.isObject(data) || _.isEmpty(data)){
            return mfProperties;
        }

        _.each(data, function(value, key){
            if(_.isObject(value) && !_.isEmpty(value)){
                mfProperties = fillItemsOfMultifield(value, mfProperties);
            }else{
                if( (key == SLING_RES_TYPE) && (value == RS_MULTIFIELD)){
                    mfProperties[data.field.name] = data;
                }
            }
        });

        return mfProperties;
    }
}(jQuery, jQuery(document), Granite.author));

4 comments:

  1. Hi Sreekanth,
    Can you tell me how to implement this logic into granite multifield for AEM 6.2 ?
    Thanks

    ReplyDelete
  2. This doesn't work if we try to add multi field panel inside a parent multifield

    ReplyDelete
  3. Its working for the multifield bbt not to the nested multifield

    ReplyDelete
  4. Hi Sreekanth, do you have example for autocomplete field under multifield for coral UI3

    ReplyDelete