Adding multifields based on numberfield in AEM 6.4

Avatar

Avatar

berni7473

Avatar

berni7473

berni7473

13-05-2019

Hello Everyone,

I am creating a component in which I need to add multifields based on the increment or decrement in the numberfield.

1751824_pastedImage_0.png

For example in the above dialog -  Suppose the author adds 3 in the numberfield, now he should be able to add only 3 sets of multifields in the dialog. That is he should be able to click on the "Add" button only 3 times and 3 sets of the field should be available. I am using Coral UI 3 for dialog creation.

Can anyone please provide some insights for the same? I have seen examples with checkbox and select but none with the numberfield.

Thanks and Regards,

Bernadine

Feike Visser smacdonald2008Arun PatidarVeena_07

Replies

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.1K

Correct Reply

839

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.1K

Correct Reply

839
Arun_Patidar
MVP

13-05-2019

Hi,

You need to write a listener same as to check min or max field but in your case min=max=number field.

no need to add data attribute(granite:data) node.

check this How to set min max item in Multifield AEM 6.3?

Avatar

Avatar

dushan1

Avatar

dushan1

dushan1

13-05-2019

Multi-field example implementation shows belo URL and let us know if you find any specific issues:

Experiencing Adobe Experience Manager - Day CQ: AEM 64 - Touch UI Nested Composite Multifield Using ...

Avatar

Avatar

berni7473

Avatar

berni7473

berni7473

14-05-2019

Hi  Arun,

I tried the same solution but it did not work for the for the min max values. The listener does not work for me.

Although I'm using AEM 6.4, do you think that this might be a factor here?

Regards,

Bernadine Soman

Avatar

Avatar

berni7473

Avatar

berni7473

berni7473

14-05-2019

Hi Dushan,

Thank you for the input, however I'm trying the restrict the addition of fields inside a multifield, so if you have any insights on that it would be helpful.

Regards,

Bernadine Soman

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.1K

Correct Reply

839

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.1K

Correct Reply

839
Arun_Patidar
MVP

15-05-2019

It should work. Let me try.

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.1K

Correct Reply

839

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.1K

Correct Reply

839
Arun_Patidar
MVP

15-05-2019

It does work,

Please check sample script on dialog submit

I am using Coral3/Granite type field.

chrome-capture (1).gif

(function($, $document) {

    "use strict";

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

        var inputSelector = $('#multi-number-id');

        var inputVal = inputSelector.find("input.coral3-Textfield").attr("aria-valuenow");

       

        var multifieldSelector = $('#multi-id');

        var multiFieldItem = multifieldSelector.find("coral-multifield-item").size();

         

                if (multiFieldItem !== inputVal) {

                function getDialog() {

            var dialog = new Coral.Dialog();

            dialog.id = 'dialogId';

            dialog.header.innerHTML = '<coral-alert-header>Dialog cannot be submitted</coral-alert-header>';

            dialog.content.innerHTML = '<coral-alert-content>Number of multifield Items are not equal to Number</coral-alert-content>';

            dialog.footer.innerHTML = '<button is="coral-button" variant="primary" coral-close><coral-button-label>Ok</coral-button-label></button>';

            dialog.variant = "error";

            return dialog;

        }

                    var dialog = getDialog();

                document.body.appendChild(dialog);

                dialog.show();

                    return false;

                }

            });

$(document).on("change", "#multi-number-id", function(e) {

        var inputSelector = $('#multi-number-id');

        var inputVal;

        setTimeout(function(){ 

        inputVal = inputSelector.find("input.coral3-Textfield").attr("aria-valuenow");

        console.log(inputVal.Value);

        var multifieldSelector = $('#multi-id');

        var multiFieldItem = multifieldSelector.find("coral-multifield-item").size();

        if (multiFieldItem >= inputVal) {

        multifieldSelector.find("button[coral-multifield-add]").attr("disabled","disabled");

        }else{

        multifieldSelector.find("button[coral-multifield-add]").removeAttr("disabled");

        }

    }, 100);

            });

})($, $(document));