Multifield Issue in AEM6.3

[vinothk82343618]

In AEM6.3 multifield element values are not getting stored as JSON array. Instead it is getting stored as separate properties.

Please let me know how can i have multifield values in an JSON array ?

[kautuk_sahni]

Couple of folks got this working.

Would share with you blog links sooner.

~kautuk

[susheel]

Hi,

That is ootb functionality. We need a write some custom js to show it as json array. You can find that in acs commons, where in you can save either in separate nodes or as json array.

Previous version of ootb multifield has similar behavior only issue was values were getting stored but not retrieved when the dialog was opened. Now itseems like it works in 6.3.

Its better to use ootb functionality instead of writing extra code.

[AnkurAhlawat]

Hi Vinoth,

Please go through below tutorials to create touch ui  multi field component in AEM 6.3.

http://www.aemcq5tutorials.com/tutorials/touchui-multifield-component-using-htl/

[susheel]

Hi Vinoth,

You can also try using JS api.

I think it would be easier to do with JS api in few lines of code.

Coral UI multifield dialog

<?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="List Collection"
    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"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <Basic
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Basic"
                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                        margin="{Boolean}false">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <multifieldcollection
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                        composite="{Boolean}true"
                                        fieldDescription="Click + to add a new page"
                                        fieldLabel="Multifield collection"
                                        name="./multiCol">
                                        <field
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container"
                                            name="./items1">
                                            <items jcr:primaryType="nt:unstructured">
                                                <linkurl
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                    fieldDescription="Select Link Path"
                                                    fieldLabel="Link Url"
                                                    name="./linkUrl"/>
                                                <enterlinktext
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldDescription="Enter Link Text"
                                                    fieldLabel="Enter link text"
                                                    name="./linkText"/>
                                            </items>
                                        </field>
                                    </multifieldcollection>
                                    <multifieldcollection1
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                        composite="{Boolean}true"
                                        fieldDescription="Click + to add a new page"
                                        fieldLabel="Multifield collection"
                                        name="./multiCol1">
                                        <field
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container"
                                            name="./items2">
                                            <items jcr:primaryType="nt:unstructured">
                                                <linkurl
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                    fieldDescription="Select Link Path"
                                                    fieldLabel="Link Url"
                                                    name="./linkUrl"/>
                                                <enterlinktext
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldDescription="Enter Link Text"
                                                    fieldLabel="Enter link text"
                                                    name="./linkText"/>
                                            </items>
                                        </field>
                                    </multifieldcollection1>
                                </items>
                            </column>
                        </items>
                    </Basic>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

JS Api : listcollection.js

"use strict";
use(["/libs/sightly/js/3rd-party/q.js"], function (Q) {
    var childProperties = Q.defer();
    granite.resource.resolve(granite.resource.path + "/" + this.multifieldName).then(function (currentResource) {
        currentResource.getChildren().then(function(child) {
        childProperties.resolve(child);
    });
});
    return childProperties.promise;
});

Sightly: listcollection.html

<sly data-sly-use.listUse="${'listcollection.js' @ multifieldName='items1'}">
  <ul data-sly-list="${listUse}">
    <li><a href="${item.properties.linkUrl}">${item.properties.linkText}</a></li>
  </ul>
</sly>
<sly data-sly-use.listUse="${'listcollection.js' @ multifieldName='items2'}">
  <ul data-sly-list="${listUse}">
    <li><a href="${item.properties.linkUrl}">${item.properties.linkText}</a></li>
  </ul>
</sly>