Data not populated in Dialog when using Multifield in Mobile View

[saukaush]

I have using Multifield as "granite/ui/components/foundation/form/multifield", it is working fine when dialog opens as a pop up. But when the size of the screen is reduced to tab or mobile, dialog is opening as mnt/override/apps/.... in the URL and multifield data is shown as blank.

I tried upgrading from acs aem commons from 4.11 to 5.0.4 but no luck. 

I am using AEM 6.3.3 version but also checked in 6.5.9, this is not working as expected.

I know if I use coral multifield this will work fine but for that model and crx/de data needs to be modified which is not an acceptable solution for us. 

Moreover, the custom validation added in js are also not working. $(document).on("dialog-ready", function() is not getting triggered while opening dialog in mobile or Tab view.

Please help with a solution to make this work.

[arunpatidar]

Hi did you tried with coral3(granite) type granite/ui/components/coral/foundation/form/select ?

Could you share your sample dialog, so that we can try it from our end as well?

[saukaush]

Hi Arun,

Below the dialog xml i am using.

<?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="Test Multifield Dialog"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
jcr:title="Test Component"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true"
type="nav">
<items jcr:primaryType="nt:unstructured">
<config
jcr:primaryType="nt:unstructured"
jcr:title="Configuration"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
fieldLabel="Title"
name="./linkTitle"
fieldDecription="Enter Component title"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
<options
jcr:primaryType="nt:unstructured"
fieldLabel="Links"
orderable="{Boolean}true"
maxlinksallowed="2"
sling:resourceType="granite/ui/components/foundation/form/multifield">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fieldset"
acs-commons-nested=""
name="./productData">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
fieldLabel="Link Text"
name="./linkText"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
<link
jcr:primaryType="nt:unstructured"
fieldLabel="Link"
name="./link"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
rootPath="/content"/>
</items>
</columns>
</items>
</field>
</options>
</items>
</config>
</items>
</tabs>
</items>
</content>
</jcr:root>

Looking into this issue further i have noticed that, touchui-composite-multifield.js from acs commons is called to populate the multifield data, addDataInFields function is used for the same. but when dialog-ready event is not triggered in case of dialog opening as mnt/override/apps/.. this function is not called and data is not populated in the dialog. If i explicitly call this function data is populated just fine.

[kchaurasiya · Accepted solution]

@saukaush , Below one is working fine on AEM 6.4. You can check and compare your dialog structure. you can also share your sample dialog as Arun said.

<images
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
        composite="{Boolean}true"
        fieldDescription="Click on Add button to add a new image"
        fieldLabel="Images">
    <field
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container"
            name="./imagesList">
        <items jcr:primaryType="nt:unstructured">
            <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title jcr:primaryType="nt:unstructured"
                           sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                           fieldDescription="Title"
                           name="./title"
                           fieldLabel="Title"
                           text="Title" />
                    <image
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                            fieldDescription="Image"
                            name="./image"
                            fieldLabel="Image"
                            text="Image"
                            rootPath="/content/dam/my-project"/>
                    <imageAlt
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldDescription="Image Alt"
                            name="./imageAlt"
                            fieldLabel="Image Alt"
                            text="Image Alt" />
                </items>
            </column>
        </items>
    </field>
</images>

[saukaush]

Hi @kchaurasiya, As I have mentioned I can't use coral multifield, I need to use coral 2 Multifield as my data and model are aligned to handle String array json. Please suggest a solution to trigger dialog-ready event in case dialog open in mnt/overlay/apps/... Thanks.