Dialog Values are not saving on classic UI

[sams16001423]

Hi @AEM Community,

I'm working on classic UI project, I have to create nested multifield dialog as  part of requirement. I'm able to create dialog but after authoring the values in respective fields within the multifield and if i reopen the dialog I'm seeing blank fields. not sure what's wrong within the dialog. if anyone had faced this issue , please help to find the issue, below is the dialog xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="600"
title="Test Component"
width="{Long}800"
xtype="dialog">
<items jcr:primaryType="cq:TabPanel">
<items jcr:primaryType="cq:WidgetCollection">
<general
jcr:primaryType="cq:Panel"
title="General">
<items jcr:primaryType="cq:WidgetCollection">
<footer
jcr:primaryType="cq:Widget"
collapsible="{Boolean}true"
itemId="footer"
name="./footer"
title="Component footer"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<supportList
jcr:primaryType="cq:Widget"
border="{Boolean}true"
collapsed="{Boolean}false"
collapsible="{Boolean}false"
fieldDescription="Link title / Link"
fieldLabel="Links list:"
name="./secondLevelPages"
width="{Long}750"
xtype="multifield">
<fieldConfig
jcr:primaryType="nt:unstructured"
allowBlank="{Boolean}true"
limit="7"
xtype="multifieldcontainer">
<myItems jcr:primaryType="cq:WidgetCollection">
<supportText
jcr:primaryType="cq:Widget"
fieldLabel="Title:"
name="./pageTitleValue"
width="90%"
xtype="textfield"/>
<supportLink
jcr:primaryType="cq:Widget"
fieldLabel="Path:"
name="./pagePath"
width="90%"
xtype="pathfield"/>
<secondmulti
jcr:primaryType="cq:Widget"
composite="{Boolean}true"
fieldDescription="Child Category Links:"
fieldLabel="Child Category Pages:"
name="./childPages"
xtype="multifield">
<fieldConfig
jcr:primaryType="nt:unstructured"
allowBlank="{Boolean}true"
limit="7"
xtype="multifieldcontainer">
<myItems jcr:primaryType="cq:WidgetCollection">
<categoryText
jcr:primaryType="cq:Widget"
fieldLabel="child category Title:"
name="./categoryText"
width="90%"
xtype="textfield"/>
<categoryLink
jcr:primaryType="cq:Widget"
fieldLabel="child category Path:"
name="./categoryLinks"
width="90%"
xtype="pathfield"/>
</myItems>
</fieldConfig>
</secondmulti>
</myItems>
</fieldConfig>
</supportList>
</items>
</footer>
</items>
</general>
</items>
</items>
</jcr:root>

Thanks in advance

[EstebanBustamante]

Hi

Classic UI is deprecated and is no longer recommended. There may be compatibility issues at this time, so you should avoid using it. Instead, create dialogs using Granite and Touch UI. Here is an example of a nested multifield using Touch UI:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <multifield
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        fieldLabel="Add Items">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./items">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <name
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldLabel="Name"
                                            name="./name"/>
                                        <jobTitle
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldLabel="Job Title"
                                            name="./jobTitle"/>
                                        <secondMF
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                            composite="{Boolean}true"
                                            fieldLabel="Sub Section Feilds">
                                            <field
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="Click to Expand"
                                                sling:resourceType="granite/ui/components/foundation/container"
                                                name="./secondMF">
                                                <layout
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
                                                <items jcr:primaryType="nt:unstructured">
                                                    <thirdleveltitle
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                        fieldLabel="Second Level Title"
                                                        name="./thirdLevelTitle"
                                                        required="{Boolean}true"/>
                                                    <thirdlevelicontype
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                        fieldLabel="Level Type"
                                                        name="./thirdlevelType"
                                                        required="{Boolean}true">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <option1
                                                                jcr:primaryType="nt:unstructured"
                                                                text="option1"
                                                                value="option1"/>
                                                            <option2
                                                                jcr:primaryType="nt:unstructured"
                                                                text="option2"
                                                                value="option2"/>
                                                            <option3
                                                                jcr:primaryType="nt:unstructured"
                                                                text="option3"
                                                                value="option3"/>
                                                        </items>
                                                    </thirdlevelicontype>
                                                    <thirdpagePath
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                        fieldLabel="Page Path"
                                                        name="./thirdpagePath"
                                                        rootPath=""/>
                                                </items>
                                            </field>
                                        </secondMF>
                                    </items>
                                </column>
                            </items>
                        </field>
                    </multifield>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

You can learn more here: 

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/deploying/prac... 

https://experienceleague.adobe.com/en/docs/events/experience-manager-gems-recordings/gems2015/aem-cu... 

https://sourcedcode.com/blog/aem/creating-a-basic-aem-touch-ui-dialogue

I hope this helps.

[partyush]

Hi @EstebanBustamante 

I believe the requirement is for Classic UI. Classic UI and Touch UI use different technologies, He is working on Classic UI, where xtype is used instead of sling:resourceType


[EstebanBustamante · Accepted solution]

@partyush 

As I mentioned in my answer, this is not the advisable way to implement AEM. That's why I am not explicitly suggesting a way to fix a deprecated technology. Instead, I recommend using the Touch UI and providing a way to switch to it. The reasoning behind this is that if you have time to actually "change" something in Classic UI, you should take advantage of that time to modernize and switch to Touch UI.

I hope you understand and agree that as a Community Advisor guiding is more about influencing a better approach rather than just fixing issues.

[kautuk_sahni]

@sams16001423 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[partyush]

Hi @sams16001423  Could you please check
Fix the Field Name and Hierarchy: The name attribute is crucial for correctly storing and retrieving values. In a nested multifield, make sure that the parent multifield and child multifields have correct hierarchical names.

Update your XML with relative paths using ./ to reference nested fields properly. For example:

<supportText
    jcr:primaryType="cq:Widget"
    fieldLabel="Title:"
    name="./pageTitleValue"
    width="90%"
    xtype="textfield"/>

<supportLink
    jcr:primaryType="cq:Widget"
    fieldLabel="Path:"
    name="./pagePath"
    width="90%"
    xtype="pathfield"/>

<secondmulti
    jcr:primaryType="cq:Widget"
    composite="{Boolean}true"
    fieldDescription="Child Category Links:"
    fieldLabel="Child Category Pages:"
    name="./childPages"
    xtype="multifield">
    <fieldConfig
        jcr:primaryType="nt:unstructured"
        allowBlank="{Boolean}true"
        limit="7"
        xtype="multifieldcontainer">
        <myItems jcr:primaryType="cq:WidgetCollection">
            <categoryText
                jcr:primaryType="cq:Widget"
                fieldLabel="child category Title:"
                name="./childPages/categoryText"
                width="90%"
                xtype="textfield"/>
            <categoryLink
                jcr:primaryType="cq:Widget"
                fieldLabel="child category Path:"
                name="./childPages/categoryLinks"
                width="90%"
                xtype="pathfield"/>
        </myItems>
    </fieldConfig>
</secondmulti>

• Ensure Correct Data Storage Format: For nested multifields in classic UI, each field must use the correct relative path to store data in the correct location. For example, ensure that the child fields of secondmulti use a naming convention such as ./childPages to store the child fields under the correct hierarchy.

• Check if Multifield Data is Serialized Correctly: Classic UI sometimes has issues with the multifield serialization process. To troubleshoot:

  • Open CRXDE and check if the data is being stored in the correct node structure.
  • Ensure that each nested field in the multifield is saving the data properly by looking at how it's serialized in the JCR repository.

• Use Granite/Coral3 Approach (If Possible): If the project allows, consider migrating the dialog to Touch UI (using Granite/Coral3), as the multifield support is much more robust in Touch UI. It can also help with future-proofing, since Classic UI is deprecated.

• If the fields remain blank, open CRXDE and inspect the nodes under the component to see if the data is being stored properly after authoring.
• Check if the node names and the values correspond to your field names in the XML.

Thanks

Partyush Kumar