Multifield component not storing values.

Forum|Forum|2 years ago
September 22, 2023
1 reply
1456 views

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.

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 Mahedi_Sabuj

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

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

Mahedi_Sabuj

New Participant

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

Mahedi Sabuj

V

vinayyyyy_Author

New Participant

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

New Participant

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.

Mahedi Sabuj

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded