Expand my Community achievements bar.

SOLVED

Nested Multifield values are not getting stored in touch ui dialog

Avatar

Level 5

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 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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?

View solution in original post

6 Replies

Avatar

Correct answer by
Employee Advisor

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?

Avatar

Community Advisor

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.

Avatar

Level 5

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>

Avatar

Level 5

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>

Avatar

Level 5

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.  

Avatar

Community Advisor

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-...