Multifield component not storing values.

[vinayyyyy_]

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.

[Mahedi_Sabuj]

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

[vinayyyyy_]

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.

[Mahedi_Sabuj]

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.

[gartenzaun]

---

@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!

[vinayyyyy_]

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
    }
});

[Mahedi_Sabuj · Accepted solution]

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