Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Pathbrowser and fileupload not working first time inside coral multifield ?

Avatar

Level 2

Having a component with following cq:dialog.

After clicking add button in multi-filed, as expected i am getting Pathbrowser and fileupload field which is not working. if i close the dialog and open again both fields are started working (i can able to browse file and upload image).

1, Is it a bug ? or am i missing anything here ?

2, Pathbrowser or fileupload which is best to use for images ?

I understand the difference that in Pathbrowser we can restrict user to specific path, but user will not have image preview (am i correct ?)

<?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="Product Banner"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/tabs"

            type="nav"/>

        <items jcr:primaryType="nt:unstructured">

            <tab1

                jcr:primaryType="nt:unstructured"

                jcr:title="Left Banner Box"

                sling:resourceType="granite/ui/components/foundation/container">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

                <items jcr:primaryType="nt:unstructured">

                    <columns

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <items jcr:primaryType="nt:unstructured">

                            <title

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/textfield"

                                fieldLabel="Title"

                                name="./title"/>

                            <description

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/textarea"

                                fieldLabel="Description"

                                name="./description"/>

                            <linktext

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/textfield"

                                fieldDescription=" Link Text"

                                fieldLabel="Link Text"

                                name="./linktext"/>

                            <linkurl

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                fieldDescription="Link URL"

                                fieldLabel="Link URL"

                                name="./linkurl"/>

                        </items>

                    </columns>

                </items>

            </tab1>

            <tab2

                jcr:primaryType="nt:unstructured"

                jcr:title="Product Box List"

                sling:resourceType="granite/ui/components/foundation/section">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                    margin="{Boolean}false"/>

                <items jcr:primaryType="nt:unstructured">

                    <column

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <items jcr:primaryType="nt:unstructured">

                            <list

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

                                composite="{Boolean}true"

                                fieldDescription="Click + to add a new list item"

                                fieldLabel="Product List"

                                name="./list">

                                <field

                                    jcr:primaryType="nt:unstructured"

                                    sling:resourceType="granite/ui/components/coral/foundation/container"

                                    name="./items">

                                    <items jcr:primaryType="nt:unstructured">

                                        <image

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

                                            autoStart="{Boolean}false"

                                            class="cq-droptarget"

                                            fieldLabel="Product Image"

                                            fileNameParameter="./fileName"

                                            fileReferenceParameter="./fileReference"

                                            mimeTypes="[image]"

                                            multiple="{Boolean}false"

                                            name="./file"

                                            title="Upload Image Asset"

                                            uploadUrl="${suffix.path}"

                                            useHTML5="{Boolean}true"/>

                                        <title

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/form/textfield"

                                            fieldLabel="Product Title"

                                            name="./productTitle"/>

                                        <description

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/form/textarea"

                                            fieldLabel="Description"

                                            name="./description"/>

                                        <linktext

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/form/textfield"

                                            fieldDescription=" Link Text"

                                            fieldLabel="Link Text"

                                            name="./linktext"/>

                                        <linkurl

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

                                            fieldDescription="Link URL"

                                            fieldLabel="Link URL"

                                            name="./linkurl"/>

                                    </items>

                                </field>

                            </list>

                        </items>

                    </column>

                </items>

            </tab2>

        </items>

    </content>

</jcr:root>

11 Replies

Avatar

Level 2

Hi

Can you check console errors when dialog is breaking/not opening and try adding listener after edit so page refresh happens.

Console error could help to know whats breaking in the java script .

Check the below links for Touch multi field Dialog

Adobe Experience Manager Help | Creating an AEM 6.2 HTML Template Language component that uses a Mul...

Avatar

Level 2

Hi

There is no problem in opening dialog. Dialog works perfectly, problem only in multi-field.

There no error related to this issue in the console.

eee.JPG

Avatar

Level 2

Hi

I have implemented multi field as per the blog it works perfectly fine. can you go thru blog once upload demo package and try it

Which version of AEM are you using?

Avatar

Level 2

Thanks but i am using AEM 6.3. it's easy to implement in 6.3 compare to link you posted.

http://keysandstrokes.info/aem-6-3-coral-3-multifield-component/

In the above they are using java use api, but i am using js use api (it's even easier to implement than java)

Avatar

Level 2

is issue happening even after following implementation as in the blog and AEM 6.3 ?

Avatar

Level 1

I have the same issue.

Fileupload or pathbrowser are not working in the multifield.  Pathfield is ok.

It's rendered properly but when dragging an asset on the fileupload nothing happens.

If I move my fileupload node outside of the multifield it works. 

I'm running aem 6.3 with sp2.

Avatar

Level 10

Just tried adding a file upload to a MF 6.3 dialog and it works:

FileUP1.png

As you can see - we can drag an image onto it.

Upload2.png

You can try this too. Load the package from this artilce on 6.3:

Scott's Digital Community: Creating an Adobe Experience Manager Newsletter HTL component

Copy the file node and paste under the MF dialog. Open the example page and open the dialog - you will see the FIleUpload and you can drag images onto it. Now - you would need to change the Java code to make it render in the page - but the file upload does work in a MF.

Avatar

Level 2

Thanks, i will try this. I have few questions.

1, if multi-field has more number of fields, it will become hard to author(lot to scroll). How to solve this ?

2, Is there an option to put separator(line) after each field-set in multi-field ?

3, Is multi-field good approach to add more records dynamically into the page by author ?

4, I have a path-field inside multi-field and author can enter external url (http:.//something.com) or choose an aem page. Problem is i have to check if it's external or internal and if it internal, i need to add ".html" ? (by default i am getting like "/content/myapp/myhome" and it's not working without adding .html)

If i need to add ".html" how to do that in js use api ?

     var contactLinkResource = resource.getChild(CONST.CONTACT_LINKS);

     var items = contactLinkResource.listChildren();

     // i need to loop here and get item.purl and check if external or internal based on that add ".html"?

     // I can do this java, but how to do this js use api ?

Avatar

Level 1

Hi Scott,

I tried your approach but unfortunately on 6.3 I don't see a drop target, instead I see the upload Image asset button. I tried adding allowUpload to false but it's still an issue. Following is what I see.

1320588_pastedImage_0.png

I also tried the core image components fileupload resourcetype i.e cq/gui/components/authoring/dialog/fileupload, with this I do see the drop container but when I submit the dialog acs commons gets the value of the field as empty so in jcr the file attribute is set to "". tried both NODE_STORE and JSON_STORE.