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

SOLVED

How to set min max item in Multifield AEM 6.3?

Tai_Nguyen_Duc
Level 2
Level 2

Hi all,

I have a problem with multifield, that is set min max item in multifield AEM 6.3?

Please help me.

Thank you so much!

1 Accepted Solution
Techaspect_Solu
Correct answer by
Level 7
Level 7

Hi,

I was able to set min size and max size restrictions in multifield in AEM 6.3.

Max size restriction: Following sample code can be used to put max size restriction in a multifield -

1. Add a new property - "maxlinksallowed" to the multifield node in your cq:dialog. Refer the screenshot below -

max-limit.png

2. Put the below sample code in a clientlibs JS file with category "cq.authoring.dialog".

$(document).on("dialog-ready", function () {

$(".js-coral-Multifield-add").click(function() {

    var field = $(this).parent();

    var size = field.attr("data-maxlinksallowed");

    if (size) {

        var ui = $(window).adaptTo("foundation-ui");

        var totalLinkCount = $(this).prev('ol').children('li').length;

        if (totalLinkCount >= size) {

            ui.alert("Warning", "Maximum " + size + " links are allowed!", "notice");

            return false;

        }

    }

});

});

Below is the screenshot of sample output:

max-limit-output.png

Min size restriction: Following sample code can be used to put min size restriction in a multifield -

1. Add a new property - "minlinksallowed" to the multifield node in your cq:dialog. Refer the screenshot below -

min-limit.png

2. Put the below sample code in a clientlibs JS file with category "cq.authoring.dialog".

(function (document, $, ns) {

     "use strict";

$(document).on("click", ".cq-dialog-submit", function (e) {

     e.stopPropagation();

     e.preventDefault();

    var $form = $(this).closest("form.foundation-form"), title = $form.find("[name='./jcr:title']").val(), message, clazz = "coral-Button ";

    var fieldd = $(".coral-Multifield");

    var sizee = fieldd.attr("data-minlinksallowed");

    if(($(this).prev('ol').children('li').length) < sizee){

              message = "Minimum" + sizee + " links are required. Are you sure to submit?";

              clazz = clazz + "coral-Button--warning";

    }

    ns.ui.helpers.prompt({

             title: Granite.I18n.get("Confirm"),

             message: message,

             actions: [{

                    id: "CANCEL",

                    text: "CANCEL",

                    className: "coral-Button"

                },{

                    id: "SUBMIT",

                    text: "SUBMIT",

                    className: clazz

                }

            ],

             callback: function (actionId) {

                if (actionId === "SUBMIT") {

                    $form.submit();

                }

            }

        });

    });

})(document, Granite.$, Granite.author);

Below is the screenshot of sample output:

min-limit-output.png

Regards,

TechAspect Solutions

View solution in original post

0 Replies
kautuk_sahni
Community Manager
Community Manager

Read:- AEM Touch UI Custom Validation - Adobe Experience Manager | AEM/CQ | Apache Sling

// this would help you to create AEM Touch UI Custom Validation where you can add any logic as per your case.

   Exact use-case mentioned at cq5 - How to limit nested multifield in AEM? - Stack Overflow

And blog post:- Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Sample Granite Widget In Touch UI extending...

// This post will help you to limit the multi fields, but i last checked it on AEM 6.1

This should help

~kautuk

Tai_Nguyen_Duc
Level 2
Level 2

Thank you so much,

I'm try. But not work in AEM 6.3.

smacdonald2008
Level 10
Level 10

I got it working on 6.3 - i can only put 3 Multifield here:

MFLimit.png

Watch the demo and then install the package here:

Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Sample Granite Widget In Touch UI extending...

Techaspect_Solu
Correct answer by
Level 7
Level 7

Hi,

I was able to set min size and max size restrictions in multifield in AEM 6.3.

Max size restriction: Following sample code can be used to put max size restriction in a multifield -

1. Add a new property - "maxlinksallowed" to the multifield node in your cq:dialog. Refer the screenshot below -

max-limit.png

2. Put the below sample code in a clientlibs JS file with category "cq.authoring.dialog".

$(document).on("dialog-ready", function () {

$(".js-coral-Multifield-add").click(function() {

    var field = $(this).parent();

    var size = field.attr("data-maxlinksallowed");

    if (size) {

        var ui = $(window).adaptTo("foundation-ui");

        var totalLinkCount = $(this).prev('ol').children('li').length;

        if (totalLinkCount >= size) {

            ui.alert("Warning", "Maximum " + size + " links are allowed!", "notice");

            return false;

        }

    }

});

});

Below is the screenshot of sample output:

max-limit-output.png

Min size restriction: Following sample code can be used to put min size restriction in a multifield -

1. Add a new property - "minlinksallowed" to the multifield node in your cq:dialog. Refer the screenshot below -

min-limit.png

2. Put the below sample code in a clientlibs JS file with category "cq.authoring.dialog".

(function (document, $, ns) {

     "use strict";

$(document).on("click", ".cq-dialog-submit", function (e) {

     e.stopPropagation();

     e.preventDefault();

    var $form = $(this).closest("form.foundation-form"), title = $form.find("[name='./jcr:title']").val(), message, clazz = "coral-Button ";

    var fieldd = $(".coral-Multifield");

    var sizee = fieldd.attr("data-minlinksallowed");

    if(($(this).prev('ol').children('li').length) < sizee){

              message = "Minimum" + sizee + " links are required. Are you sure to submit?";

              clazz = clazz + "coral-Button--warning";

    }

    ns.ui.helpers.prompt({

             title: Granite.I18n.get("Confirm"),

             message: message,

             actions: [{

                    id: "CANCEL",

                    text: "CANCEL",

                    className: "coral-Button"

                },{

                    id: "SUBMIT",

                    text: "SUBMIT",

                    className: clazz

                }

            ],

             callback: function (actionId) {

                if (actionId === "SUBMIT") {

                    $form.submit();

                }

            }

        });

    });

})(document, Granite.$, Granite.author);

Below is the screenshot of sample output:

min-limit-output.png

Regards,

TechAspect Solutions

View solution in original post

Tai_Nguyen_Duc
Level 2
Level 2

Hi,

It has worked already.

Thank you so much!

hoangc59578253
Level 2
Level 2

it working with granite/ui/components/foundation/form/multifield

but not working with granite/ui/components/coral/foundation/form/multifield

Coral is not working.

prabodh
Level 2
Level 2

Did you find a solution to implement the same for coral?

Vijayalakshmi_S
Community Advisor
Community Advisor

Hi,

This validation logic can be easily  achieved with foundation validation.

Difference with coral UI 2 and UI 3 would be the HTML markup in identifying the multifield items.

Below link has validation for fieldLimit. Same can be followed for min max with change in logic alone.

Custom Validation for Coral UI 3 Multifield using foundation-validation

Arun_Patidar
Community Advisor
Community Advisor

I am able to make it work for Coral by setting validation property with value min:mx
And on ADD button(for max) and Submit(for min) click , I am reading this property and doing validating like below:

//For min

$(document).on("click", ".cq-dialog-submit", function(e) {

        var $form = $(this).closest("form.foundation-form");

        var field = $form.find("[data-granite-coral-multifield-name='./phoneitems']");

        var attrDV = field.attr("data-validation");

        var size;

        if (typeof attrDV !== undefined && attrDV !== false) {

            if(typeof attrDV.split(':')[1] !== undefined){

                    size = attrDV.split(':')[0];

                    }

        }

        // console.log("min size : " + size)

        if (size) {

            var ui = $(window).adaptTo("foundation-ui");

            var totalLinkCount = field.children('coral-multifield-item').length;

            if (totalLinkCount < size) {

                ui.alert("Warning", "Minimum " + size + " Phone numbers are allowed!", "notice");

                return false;

            } else {

                return true;

            }

        }

    });

//For Max

$(document).on("dialog-ready", function() {

        $(".coral-Button").click(function() {

            var attr = $(this).attr('coral-multifield-add');

            if (typeof attr !== typeof undefined && attr !== false) {

                var field = $(this).parent();

                var attrDV = field.attr("data-validation");

                var size;

                if (typeof attrDV !== undefined && attrDV !== false) {

                    if(typeof attrDV.split(':')[1] !== undefined){

                    size = attrDV.split(':')[1];

                    }

                }

                //console.log(size);

                if (size) {

                    var ui = $(window).adaptTo("foundation-ui");

                    var totalLinkCount = $(this).parent().children('coral-multifield-item').length;

                    if (totalLinkCount >= size) {

                        ui.alert("Warning", "Maximum " + size + " Phone numbers are allowed!", "notice");

                        return false;

                    }

                }

            }

        });

    });

Screen Shot 2018-05-10 at 9.59.15 PM.png

Screen Shot 2018-05-10 at 9.59.28 PM.png

mayanks84410489
Level 2
Level 2

Hi All,

I have also achieved the above using below code snippet:

For Maximum links validation:

Add a new property - "maxlinksallowed", type- String to the multifield node in your cq:dialog.

Add below javascript code to touchui js file.

            $(".js-coral-Multifield-add").click(function() {

            var field = $(this).parent();

            var size = field.attr("data-maxlinksallowed");

            if (size) {

                var ui = $(window).adaptTo("foundation-ui");

                var totalLinkCount = $(this).prev('ol').children('li').length;

                if (totalLinkCount >= size) {

                    ui.alert("Warning", "Maximum " + size + " links are allowed!", "notice");

                    return false;

                }

             }

           });

For Minimum links validation:

Add a new property - "minlinksallowed" , type- String to the multifield node in your cq:dialog.

Add below javascript code to touchui js file.

        $(document).on("click", ".cq-dialog-submit", function () {

            var $multifields = $("[" + DATA_EAEM_NESTED + "]");

            if(_.isEmpty($multifields)){

                return;

            }

            var $form = $(this).closest("form.foundation-form");

            var fieldd = $(".coral-Multifield");

            var minsize = fieldd.attr("data-minlinksallowed");

            var multilinks = $multifields.length-1;

            if (multilinks < minsize) {

                var ui = $(window).adaptTo("foundation-ui");

                ui.alert("Warning", "Minimum " + minsize + " link is required!", "notice");

                return false;

            }

        });

Regards,

Mayank Saxena

Cognizant Technology Solutions