Nested Multifield values are not getting stored in touch ui dialog

[Nandheswara]

Hi all,

I need to create a dialog for component having both Touch UI and Classic UI. I came up with the standard layout for both of these dialogs, and all multifield values are storing as JSON array But the issue is once i add the nested level multifield values via Classic UI dialog, these doesn't appear in Touch UI vice-versa and Content that getting store in JCR for touch-ui nested multi-field doesn't contains "/" in json array, but in classic-ui nested multi-field its store with "/" like below

{"subheaderTitle":"","subheaderLink":"","supportColum1Links":["{\"text\":\"Assessment Associates\",\"link\":\"/content/demo/en/support/support-for-you/teachers/work-with-us/roles\"}","{\"text\":\"Exam Officers\",\"link\":\"/content/demo/en/support/support-for-you/exam-officers-administrators\"}"]}

Can anyone suggest some solution for this please. 

@arunpatidar @Jörg_Hoh @lukasz-m @Saravanan_Dharmaraj @B_Sravan @Manjunath_K 

[Jörg_Hoh · Accepted solution]

Nested dialog elements on Classic UI were never supported natively, but always required customization. ACS AEM Commons provided an extension for that (https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/multifield-extension...), but that data structure was incompatible with the one created/used by TouchUI (https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...)

Can you check if you have this situation?

[Saravanan_Dharmaraj]

Couple of questions

1. AEM Version

2. If you are using ACS Commons extension to store it as JSON , its deprecated

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/multifield-not-storing-val... - check this one for more info.

https://medium.com/@ramamity94/implement-an-n-level-aem-multifield-using-coral-ui-and-sling-models-a... - For storing as JSON, custom script.

Have you considered using composite multifield and reading it using Sling Model?  Pretty easy.

Please post the dialog xmls to help more.

[Nandheswara]

Touch UI Dialog

<fieldGroupCol1
       jcr:primaryType="nt:unstructured"
       jcr:title="Column 1"
       sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
       <items jcr:primaryType="nt:unstructured">
             <qualificationcolumnTitle1
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Column 1 Title"
                name="./qualificationcolumnTitle1"/>
                  <qualificationColumn1
                     jcr:primaryType="nt:unstructured"
                     sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                     fieldLabel="Column 1 links">
                       <field
                          jcr:primaryType="nt:unstructured"
                          sling:resourceType="granite/ui/components/foundation/form/fieldset"
                          acs-commons-nested="JSON_STORE"
                          name="./qualificationColumn1">
                          <items jcr:primaryType="nt:unstructured">
                             <column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                   <subheaderTitle
                                      jcr:primaryType="nt:unstructured"
                                      sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                      fieldLabel="Sub header title"
                                      name="./qualificationcolumnTitle1"/>
                                   <subheaderLink
                                      jcr:primaryType="nt:unstructured"
                                      sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                      allowBlank="{Boolean}false"
                                      fieldLabel="Sub header Link"
                                      name="./specURL"
                                      required="{Boolean}true"
                                      rootPath="/content/demo/en/qualifications"/>
                                    <qualificationcolumn1Links
                                      jcr:primaryType="nt:unstructured"
                                      jcr:title="Add column 1 links"
                                      sling:resourceType="granite/ui/components/foundation/form/multifield"
                                      composite="{Boolean}true"
                                      fieldDescription="Click the 'Add field' to add a new item"
                                      fieldLabel="Column 1">
                                      <field
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                         acs-commons-nested="JSON_STORE"
                                         name="./specificationlist1">
                                         <items jcr:primaryType="nt:unstructured">
                                            <column
                                               jcr:primaryType="nt:unstructured"
                                               sling:resourceType="granite/ui/components/coral/foundation/container">
                                               <items jcr:primaryType="nt:unstructured">
                                                  <text
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                     fieldLabel="Text"
                                                     name="./qualificationcolumnTitle1"/>
                                                  <link
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                                     allowBlank="{Boolean}false"
                                                     fieldLabel="Link"
                                                     name="./specURL"
                                                     required="{Boolean}true"
                                                     rootPath="/content/demo/en/qualifications"/>
                                               </items>
                                           </column>
                                  </items>
                           </field>
             	  </qualificationcolumn1Links>
        	 </items>
    	   </column>
          </items>
         </field>
        </qualificationColumn1>
           <qualificationColumn1CTAtext
              jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
              fieldLabel="Column 1 CTA text"
              name="./qualificationcolumn1CTAtext"/>
            <qualificationColumn1CTAlink
              jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
              fieldLabel="Column 1 CTA link"
              name="./qualificationcolumn1CTAlink"/>
       </items>
</fieldGroupCol1>

[Nandheswara]

Classic UI Dialog

<fieldGroupCol1
                        jcr:primaryType="cq:Widget"
                        collapsed="{Boolean}true"
                        collapsible="{Boolean}true"
                        itemId="column2fieldSet"
                        title="Column 1"
                        xtype="dialogfieldset">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <qualificationcolumnTitle2
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Column 1 Title"
                                name="./qualificationcolumnTitle1"
                                width="300"
                                xtype="textfield"/>
                            <qualificationColumn1
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Click the '+' to add a new page"
                                fieldLabel="Column 1 links"
                                hideLabel="false"
                                name="./qualificationColumn1"
                                title="Column 1 links"
                                xtype="multifield">
                                <fieldConfig
                                    jcr:primaryType="cq:Widget"
                                    border="true"
                                    hideLabel="true"
                                    layout="form"
                                    padding="10px"
                                    width="1000"
                                    xtype="multi-field-panel">
                                    <items jcr:primaryType="cq:WidgetCollection">
                                        <subheaderTitle
                                            jcr:primaryType="cq:Widget"
                                            dName="subheaderTitle"
                                            fieldLabel="Sub header title"
                                            name="subheaderTitle"
                                            width="600"
                                            xtype="textfield"/>
                                        <subheaderLink
                                            jcr:primaryType="cq:Widget"
                                            dName="subheaderLink"
                                            fieldLabel="Sub header Link"
                                            name="subheaderLink"
                                            width="600"
                                            xtype="pathfield"/>
                                        <qualificationcolumn1Links
                                            jcr:primaryType="cq:Widget"
                                            dName="qualificationColumn1Links"
                                            fieldLabel="Column 1"
                                            hideLabel="false"
                                            title="Add column 2 links"
                                            xtype="multifield">
                                            <fieldConfig
                                                jcr:primaryType="cq:Widget"
                                                border="true"
                                                hideLabel="true"
                                                layout="form"
                                                padding="10px"
                                                width="1000"
                                                xtype="multi-field-panel">
                                                <items jcr:primaryType="cq:WidgetCollection">
                                                    <text
                                                        jcr:primaryType="cq:Widget"
                                                        dName="text"
                                                        fieldLabel="Text"
                                                        width="500"
                                                        xtype="textfield"/>
                                                    <link
                                                        jcr:primaryType="cq:Widget"
                                                        dName="link"
                                                        fieldLabel="Link"
                                                        width="500"
                                                        xtype="pathfield"/>
                                                </items>
                                            </fieldConfig>
                                        </qualificationcolumn1Links>
                                    </items>
                                </fieldConfig>
                            </qualificationColumn1>
                            <qualificationColumn1CTAtext
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Column 1 CTA text"
                                name="./qualificationcolumn1CTAtext"
                                width="300"
                                xtype="textfield"/>
                            <qualificationColumn1CTAlink
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Column 1 CTA link"
                                name="./qualificationcolumn1CTAlink"
                                width="300"
                                xtype="pathfield"/>
                        </items>
  </fieldGroupCol1>

[Nandheswara]

I am migrating the classic dialog to touch ui dialog in that classic ui the multifield values are stored as JSON array so i used same json array but if i given any values in classic dialog that is saving but when i opening the touch dialog those fields showing empty.  

[Saravanan_Dharmaraj]

Like i said in my previous comment, if you still need the touch UI works with nested multifeld as JSON, you need to write the custom code, here is an example

https://medium.com/@ramamity94/implement-an-n-level-aem-multifield-using-coral-ui-and-sling-models-a...

Or you can simple store the multifield value in nodes and read it using sling models like this.

https://levelup.gitconnected.com/aem-how-to-use-nested-multifields-in-your-components-using-a-sling-...