Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Multifield component not storing values.

Avatar

Level 1

Hi, I've created a multifield component that uses jsonDeserializer but the values get automatically deleted after I author it.

 

cq dialog:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Panel 16 - HDFC Now"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs">
<items jcr:primaryType="nt:unstructured">
<Panel_x0020_16
jcr:primaryType="nt:unstructured"
jcr:title="Panel 16"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<side-image-desktop
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Side Image Desktop"
name="./image"/>
<side-image-mobile
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Side Image Mobile"
name="./mimage"/>
</items>
</Panel_x0020_16>
<left-column
jcr:primaryType="nt:unstructured"
jcr:title="Left Column"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<highlights-list
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<highlights
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="Highlight">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./highlightsLeft">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldSetName
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/accordion"
multiple="{Boolean}true"
variant="default">
<items jcr:primaryType="nt:unstructured">
<fieldSet
jcr:primaryType="nt:unstructured"
jcr:title="Highlights"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldSet
jcr:primaryType="nt:unstructured"
jcr:title="Highlights"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<highlights
jcr:primaryType="nt:unstructured"
jcr:title="Highlights"
sling:resourceType="granite/ui/components/coral/foundation/container">
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue1="ctaVariation"/>
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Image of the highlight"
fieldLabel="Image"
name="image"/>
<count
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Count of the highlight"
fieldLabel="Count"
name="count"/>
<detail
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="The maximum length for this field is 150"
fieldLabel="Detail"
maxlength="150"
name="detail"/>
</items>
</highlights>
</items>
</fieldSet>
</items>
<parentConfig
jcr:primaryType="nt:unstructured"
active="{Boolean}true"/>
</fieldSet>
</items>
</fieldSetName>
</items>
</column>
</items>
</field>
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-multifield-label="Add More"/>
</highlights>
</items>
</highlights-list>
</items>
</left-column>
<right-column
jcr:primaryType="nt:unstructured"
jcr:title="Right Column"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<highlights-list
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<highlights
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="Highlight">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./highlightsRight">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldSetName
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/accordion"
multiple="{Boolean}true"
variant="default">
<items jcr:primaryType="nt:unstructured">
<fieldSet
jcr:primaryType="nt:unstructured"
jcr:title="Highlights"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldSet
jcr:primaryType="nt:unstructured"
jcr:title="Highlights"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<highlights
jcr:primaryType="nt:unstructured"
jcr:title="Highlights"
sling:resourceType="granite/ui/components/coral/foundation/container">
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue1="ctaVariation"/>
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Image of the highlight"
fieldLabel="Image"
name="image"/>
<count
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Count of the highlight"
fieldLabel="Count"
name="count"/>
<detail
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="The maximum length for this field is 150"
fieldLabel="Detail"
maxlength="150"
name="detail"/>
</items>
</highlights>
</items>
</fieldSet>
</items>
<parentConfig
jcr:primaryType="nt:unstructured"
active="{Boolean}true"/>
</fieldSet>
</items>
</fieldSetName>
</items>
</column>
</items>
</field>
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-multifield-label="Add More"/>
</highlights>
</items>
</highlights-list>
</items>
</right-column>
</items>
</content>
</jcr:root>

 Component HTML:

<sly data-sly-use.leftHighlightsObj="${'/apps/HDFCNow/utility/site/jsonDeserializer.js' @ fieldName = 'highlightsLeft',fieldValue = ''}"></sly>
<sly data-sly-use.rightHighlightsObj="${'/apps/HDFCNow/utility/site/jsonDeserializer.js' @ fieldName = 'highlightsRight',fieldValue = ''}"></sly>
<section id="panel16" class="slide-section">
<picture>
<source media="(max-width:767px)" srcset="/content/dam/HDFCNow/home/images/home_16_bg_mob.jpg"><img src="/content/dam/HDFCNow/home/images/home_16_bg.jpg" alt="hdfc-now" title="HDFC NOW" class="social-bg">
</picture>
<div class="il-container sec-wrap">
<div class="cont-column-inner">
<div class="left-column marquee">
<div class="left-inner-column">

<sly data-sly-list.leftItemObj=${leftHighlightsObj.listJson}>
<div class="cardwrap">
<div class="numberwrap"> <img data-sly-test="${leftItemObj.image}" src="${leftItemObj.image}" alt="hdfc-now" title="HDFC NOW"> <span data-sly-test="${leftItemObj.count}" class="counter">${leftItemObj.count}</span></div>
<div class="contwrap">
<p class="cont">${leftItemObj.detail}</p>
</div>
</div>
</sly>

</div>
<div class="right-inner-column">

<sly data-sly-list.rightItemObj=${rightHighlightsObj.listJson}>
<div class="cardwrap">
<div class="numberwrap"> <img data-sly-test="${rightItemObj.image}" src="${rightItemObj.image}" alt="hdfc-now" title="HDFC NOW"> <span data-sly-test="${rightItemObj.count}" class="counter">${rightItemObj.count}</span></div>
<div class="contwrap">
<p class="cont">${rightItemObj.detail}</p>
</div>
</div>
</sly>

</div>
</div>
</div>
<div class="img-wrap">
<picture>
<source media="(max-width:767px)" srcset="${properties.mimage}"><img src="${properties.image}" alt="hdfc-now" title="HDFC NOW">
</picture>
</div>
</div>
</section>

 Any help is appreciated.

1 Accepted Solution

Avatar

Correct answer by
Level 10

To fetch multifield data using fieldName, you need to make few adjustments 

readJson = resource.getResourceResolver().getResource(
    currentNode.getPath() + "/" + this.fieldName);
listArr = readJson ? readJson.listChildren() : {};

https://varunaem.blogspot.com/2019/06/javascript-use-api.html

 

 

View solution in original post

6 Replies

Avatar

Level 10

You need to make few updates in the component dialog:

1. In the multifield node, include the property "composite" with value "{Boolean}true" .  

<highlights jcr:primaryType="nt:unstructured"
  composite="{Boolean}true" <!-- Add this line -->
  sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
  fieldLabel="Highlight">

2. Update name property of multifield fields (image, count, details) 

<image jcr:primaryType="nt:unstructured"
 ....
 name="./image"/> <!-- Update -->
<count jcr:primaryType="nt:unstructured"
  ....
  name="./count"/> <!-- Update -->
<detail jcr:primaryType="nt:unstructured"
  ....
  name="./detail"/> <!-- Update -->

 

Avatar

Level 1

Hey Sabuj, thanks for solution,

Now the component stores the values in the dialog however the content is still not visible when the site is previewed.

Avatar

Level 10

Can you confirm whether jsonDeserializer.js returns the expected values? You need to define context for few properties such as image src. https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#121-display-context

Also, Please share your jsonDeserializer.js implementation. However, I would recommend to use Sling Model instead of JavaScript Use API.

Avatar

Level 1

@Mahedi_Sabuj wrote:

Can you confirm whether jsonDeserializer.js returns the expected values? You need to define context for few properties such as image src. https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#121-display-context

Also, Please share your jsonDeserializer.js implementation. However, I would recommend to use Sling Model instead of JavaScript Use API.

Der rein feuerverzinkte Doppelstabmattenzaun bietet eine kostengünstigere Option und wird in erster Linie für gewerbliche Grundstücke bevorzugt eingesetzt. Dennoch findet diese Variante auch im privaten Bereich Verwendung, insbesondere wenn ein funktionaler Zaun gewünscht wird.


Thank you for the helpfull link!

Avatar

Level 1

Even after defining context, the issue remains the same, really don't know what the issue is. Due to project requirement we have to use JavaScript instead of sling model. Here is the jsonDeserializer.js implementation:

"use strict";
use(function () {


var readJson = null;
var itemJson = "";
var listArr = [];
var count = 0;

if (String(this.fieldValue) != '') {
readJson = this.fieldValue;
if (readJson != null && String(readJson) != "") {
readJson.forEach(function (entry) {
itemJson = JSON.parse(entry);
listArr[count++] = itemJson;
});
}
} else if (this.fieldName != '') {
readJson = granite.resource.properties[this.fieldName];
if (typeof readJson != "undefined" && readJson != null && readJson != "") {
if (readJson.length > 0) {
readJson.forEach(function (entry) {
itemJson = JSON.parse(entry);
listArr[count++] = itemJson;
});
} else {
listArr[0] = JSON.parse(readJson);
}
}
}
return {
listJson: listArr,
count: count
}
});

Avatar

Correct answer by
Level 10

To fetch multifield data using fieldName, you need to make few adjustments 

readJson = resource.getResourceResolver().getResource(
    currentNode.getPath() + "/" + this.fieldName);
listArr = readJson ? readJson.listChildren() : {};

https://varunaem.blogspot.com/2019/06/javascript-use-api.html