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

Level 2

Solved

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

Forum|Forum|6 years ago
February 21, 2019
7 replies
6433 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by smacdonald2008

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.

smacdonald2008Accepted solution

Level 10

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_Author

Level 2

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.

Level 10

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 Manager 6.3

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.

Level 10

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_Author

Level 2

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?

Level 10

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!

Level 10

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.