Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Data not populated in Dialog when using Multifield in Mobile View

saukaush
Level 2
Level 2

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.

1 Accepted Solution
kchaurasiya
Correct answer by
Level 6
Level 6

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

 

View solution in original post

1 Reply
Arun_Patidar
Community Advisor
Community Advisor

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
Level 2
Level 2

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
Correct answer by
Level 6
Level 6

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

 

View solution in original post

saukaush
Level 2
Level 2
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.