AEM 6.4: cq:dialog multifield saves attribute with @Delete

[jackie_chan_]

I'm setting up my cq:dialog to use multifield, which contains either a form select or checkbox field in my component.

However, when I set the value when configuring the component, the field is stored with an additional "@Delete" appended to it and I can't access/read this field in my page. Here's my context.xml for the cq 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="Test Component"
        sling:resourceType="cq/gui/components/authoring/dialog"
        width="960">
        <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="Main Options"
                    sling:resourceType="granite/ui/components/foundation/section">
                    <layout
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                    <items jcr:primaryType="nt:unstructured">
                        <column
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/container">
                            <items jcr:primaryType="nt:unstructured">
                                <features
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/multifield"
                                    fieldLabel="Config Items"
                                    required="{Boolean}false">
                                    <field
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                        acs-commons-nested=""
                                        name="./features">
                                        <layout
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                            method="absolute"/>
                                        <items jcr:primaryType="nt:unstructured">
                                            <column
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/container">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <optionA
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/select"
                                                        name="./optionA"
                                                        fieldLabel="Option A"
                                                        >
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <valueA
                                                                jcr:primaryType="nt:unstructured"
                                                                text="Value A"
                                                                value="valueA"/>
                                                            <valueB
                                                                jcr:primaryType="nt:unstructured"
                                                                text="Value B"
                                                                value="valueB"/>                                   
                                                        </items>
                                                    </optionA>                                                                                                 
                                                </items>
                                            </column>
                                        </items>
                                    </field>
                                </features>                         
                            </items>
                        </column>
                    </items>
                </tab1>                    
            </items>
        </content>
    </jcr:root>

and when I look at CRX for the properties of the configured component, I get the following:

• Name: features
• Type: String
• Value: {"optionA@Delete":"valueA"}

In my component jsp (yes, I know I'm not using Sightly), I access the configuration as follows:

<c:set var="items" value="${widgets:getMultiFieldPanelValues(resource, 'features')}"/>
<c:forEach items="${features}" var="feature">
      ${feature.optionA}
</c:forEach>

but it never finds that optionA.  What am I missing here?

Thanks in advance!

[smacdonald2008 · Accepted solution]

The first issue is you are working on 6.4 and using old granite types. You should be using:

• granite/ui/components/coral/foundation/form/multifield

not:  granite/ui/components/foundation/form/multifield

Building Experience Manager Components using Granite/Coral Resource Types

See this article that explains how to use the latest AEM granite types.

[jackie_chan_]

Thanks smacdonald2008​!

This is working however, the saved configuration is not being displayed again when opening up the configuration dialog again, even though the configuration is saved when viewing in CRX.

I'm not creating a HTL component, but I'm not sure if that will impact the displaying of the saved config.

[smacdonald2008]

The problem is with that version of the multifield. If you really want to use that previous granite multifield version - you need to add ACS-COMMONS package and then set it as shown here:

Adobe Experience Manager Help | Creating a Repeating Data Set HTL Component for Adobe Experience Man...

See the discussion about ACS-COMMONS in that article.

However -- for best results - Adobe Strongly recommends that you use granite/coral multifield as specified in this AEM HELPX article.

Building Experience Manager Components using Granite/Coral Resource Types

This version of granite/coral MF does not have a dependency on ACS-COMMONS and works OOTB.

PS - whether you use HTL or JSP - it does not impact the functionality of granite MF. Move to granite/coral.

[Gaurav-Behl]

the new granite/coral multifields store the data in "node" format as compare to "json" format stored with the old version that you were using. You may validate the same.

If your code (either jsp/HTL) expects the same in 'json' format then obviously, you'd need to rewrite the code or go back to old version of multifield as Scott suggested. 

[jackie_chan_]

Thanks again.

I've got the new granite/coral multifield working now and it's showing the stored values.

However (and this is likely the wrong thread to ask, but figured it's relevant), in a jsp page, is there a way to iterate over the child nodes (i.e. item0, item1, etc) of the multifield node that's created?

[smacdonald2008]

We do not use JSP - to roll over MF items Its best to use Sling Models and HTL - its very easy. Little code - check out this article:

Scott's Digital Community: Creating a HTL Repeating Data Set 6.4 Component that uses Sling Models

Java code:

import javax.annotation.PostConstruct;

import javax.inject.Inject;

import javax.inject.Named;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.models.annotations.Default;

import org.apache.sling.models.annotations.Model;

import org.apache.sling.models.annotations.Optional;

import org.apache.sling.settings.SlingSettingsService;

@Model(adaptables = Resource.class)

public class Multifield {

    // Inject the products node under the current node

    @Inject

    @Optional

    public Resource products;

    // No need of a post construct as we don't have anything to modify after the

    // model is constructed

}

HTL --

<style>

h2 {

    display: inline;

}

img{

    float:left;

}

</style>

<h2>Current Issue</h2>

<div

    data-sly-use.multiItems="aem.community.mf.core.models.Multifield">

    <div data-sly-list.head="${multiItems.products.listChildren}">

        <div style="height:250px;"><img src=${head.pathbr} height=200 width=270 style="padding:4px"/><h2>${head.product}</h2>

                             <p>${head.desc}</p>

                             </div>

                             <hr>

   </div>

</div>

So little code when using Sling Models, HTL and MultiField!

[smacdonald2008]

Follow that article to learn this concept with hands on.

Glad you got it working - that is the entire reason why we do these end to end HELPX articles.