Nested multi field in touch UI- AEM 6.3

[nagendra_prasa1]

I am trying to implement nested multi fields in touch UI. I have tried below example and it worked fine.

Experiencing Adobe Experience Manager - Day CQ: AEM 63 - Touch UI Nested ( Multi-Multi ) Coral 2 Com...

However, if I add any new fields after multifield(highlighted in bold) , dialog is not getting rendered correctly.  It seems like nested multi fields are working only if the multifield is the last element in the corresponding container. Please let me know if there is any work around for this issue.

<items jcr:primaryType="nt:unstructured">

     <dashboard

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/form/textfield"

            fieldDescription="Enter Dashboard name"

            fieldLabel="Dashboard name"

    name="./dashboard"/>

<countries

       jcr:primaryType="nt:unstructured"

       sling:resourceType="granite/ui/components/foundation/form/multifield">

            <items jcr:primaryType="nt:unstructured">

            <country

                 jcr:primaryType="nt:unstructured"

                 sling:resourceType="granite/ui/components/foundation/form/textfield"

                 fieldDescription="Name of Country"

                 fieldLabel="Country Name"

                 name="./country"/>

            <states

                 jcr:primaryType="nt:unstructured"

                 sling:resourceType="granite/ui/components/foundation/form/multifield">

                      ......

                      ......

                      .....

            </states>

           <country2

                 jcr:primaryType="nt:unstructured"

                 sling:resourceType="granite/ui/components/foundation/form/textfield"

                 fieldDescription="Name of Country2"

                 fieldLabel="Country Name2"

                 name="./country2"/>

  </items>

</countries>

<dashboard_2

  jcr:primaryType="nt:unstructured"

  sling:resourceType="granite/ui/components/foundation/form/textfield"

  fieldDescription="Enter Dashboard name"

  fieldLabel="Dashboard name12"

  name="./dashboard_2"/>

</items>

[viveksachdeva]

Any sample content package to replicate this behavior?

[nagendra_prasa1]

Hi Vivek,

Here is the link to the package:

eaem-touch-ui-nested-multi-field-node-store-63.zip - Google Drive

[viveksachdeva]

Are you getting following on opening dialog(check browser console) :

"Uncaught RangeError: Maximum call stack size exceeded"

[kautuk_sahni]

I have asked Sreekanth to have a look at this one.

~kautuk

[nagendra_prasa1 · Accepted solution]

Hi Vivek,

You might see that error if ACS Commons is installed(it has custom multi field implementation) or any other custom multi-field implementation. Make sure you have only one implementation of below code.

CUI.Multifield = new Class({

_addListeners: function () {

}

});

  CUI.Widget.registry.register("multifield", CUI.Multifield);

Thanks

[viveksachdeva]

So, I was able to see the behavior partially.. What I observed is:

- Dashboard name12 is working fine for me as it is outside the outer multifield(country).

- Country Name2 is not working as expected when moved below inner multifield but still inside outer multifield.

The dialog doesnt seem to get rendered correctly. When moved below inner multifield, "Country Name2" is rendered outside the multifield, which is incorrect.

It appears to be a product bug. The way fields are rendered by ComponentHelper class seems to be causing the issue.

[viveksachdeva]

smacdonald2008​: This is just a clarification and not the correct answer. The issue is still there