Nested Multifield in Content Fragment - AEM 6.5 ?

[kchaurasiya]

I have implemented  multi-field  in content fragment and it working and there is no any issue.

Also, Implementing nested multi-field but somehow it is working but not working fully. Values are getting save at backend but when i open the content fragment there are no auto value rendering in CF.

Has anyone implemented it or written JS code for the same . Please let me know. Thank You..!!

[Asutosh_Jena_]

Hi @kchaurasiya 

Here is a good article for Content Fragment with Multifield:

https://jimfrenette.com/aem/content-fragments/composite-multifield/

Thanks!

[kchaurasiya]

@Asutosh_Jena_ Thanks Ashutosh for reply. Multifield i have already implemented in CF. I am looking for nested multifield in content fragment that is somehow working but not fully. For that we need to write the custom js code, I need that. Thanks

[SYED1111]

@kchaurasiya 

Is This Solved Issue

[bgatya789654532120]

While closing browser tab of authored Content Fragment without making any changes, losing the value from content fragment. I am using 6.5.16 AEM version, I had downgrade AEM version 6.5.7 but same issue. Followed same implementation as you suggest. Can you check once from your side @kchaurasiya 

[Kishore_Kumar_]

Please refer this https://allaembykiran.wordpress.com/2021/01/13/nested-multi-field/ 

[kchaurasiya]

@Kishore_Kumar_ Thanks Kishor. I have already implemented multifield in component but  I need to implement in Content Fragment not in component. Thanks

[Kishore_Kumar_]

Oh ok my bad sorry. I haven't tried customizing CF for nested multifield capability in 6.5. But if you can share us some sample code what you have achieved so far, me/someone may help to fix.

[ibishika]

This is what you can try:

• Add a content reference multifield in the first content fragment model.
• Create a 2nd content fragment model and again add a multifield of required type there.
• Reference the content fragments of second type from the first type

I think this would be the simpliest way to achieve this. May me you can try customizing as given in the links shared here in previous comments depending on your requirement. 

[kchaurasiya]

@ibishika I have already implemented nested multi field in Content fragment but it is not working fully. Have u implemented it ??

[kautuk_sahni]

@ibishika  Good to see you back inside the AEM Community. Keep the great work of assisting others going. Looking forward to more contributions from you. 

[priyak]

@ibishika can you help me in referencing one content fragment with another?

[prashantonkar · Accepted solution]

I have tried this once and had to do a lot of customization to get it working.

In your content fragment model, you need to make the change similar to this: ( i am just showing a part of CFM which I had made composite multifield.

<multifieldtest
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
	composite="{Boolean}true"
	fieldLabel="Test Service"
	listOrder="1"
	maxlength="255"
	metaType="text-single"
	name="testSection"
	renderReadOnly="false"
	showEmptyInReadOnly="true"
	valueType="string[]">
	<field
		jcr:primaryType="nt:unstructured"
		sling:resourceType="granite/ui/components/coral/foundation/container"
		name="./testSection">
		<items jcr:primaryType="nt:unstructured">
			<column
				jcr:primaryType="nt:unstructured"
				sling:resourceType="granite/ui/components/coral/foundation/container">
				<items jcr:primaryType="nt:unstructured">
					<!-- your fields go heare -->
				</items>
			</column>
		</items>
	</field>
</multifieldtest>

After that, used the following code to populate the data into the fields:

(function ($) {
    var CFM = window.Dam.CFM,
        MASTER = "master",
        CFM_EDITOR_SEL = ".content-fragment-editor",
        CORAL_MF_ITEM = "coral-multifield-item",
        EAEM_COMPOSITE_ITEM_VALUE = "data-eaem-composite-item-value",
        MF_NAME_ATTR = "data-granite-coral-multifield-name",
        COMPOSITE_MF_SEL = "[data-granite-coral-multifield-composite]";

    CFM.Core.registerReadyHandler(getMultifieldsContent);

    extendRequestSave();

    function getMultifieldsContent(){
        if(!compositeMutifieldsExist()){
            return;
        }

        var url = CFM.EditSession.fragment.urlBase + "/jcr:content/data.2.json";

        $.ajax(url).done(loadContentIntoMultiFields);
    }

    function loadContentIntoMultiFields(data){
        var $composites = $(COMPOSITE_MF_SEL), mfValArr, mfAddEle,
            vData = data[getVariation()], $lastItem;

        if(_.isEmpty(vData)){
            return;
        }

        _.each($composites, function(mField){
            mfValArr = vData[getNameDotSlashRemoved(($(mField)).attr(MF_NAME_ATTR))];

            if(_.isEmpty(mfValArr)){
                return;
            }

            mfAddEle = mField.querySelector("[coral-multifield-add]");

            _.each(mfValArr, function(mfMap){
                mfAddEle.click();

                $lastItem = $(mField).find(CORAL_MF_ITEM).last();
                $lastItem.attr(EAEM_COMPOSITE_ITEM_VALUE, mfMap);
                Coral.commons.ready($lastItem[0], function (lastItem) {
                    fillMultifieldItems(lastItem);
                });

            });
        });
    }

    function fillMultifieldItems(mfItem){
        if(mfItem == null){
            return;
        }

        var mfMap = mfItem.getAttribute(EAEM_COMPOSITE_ITEM_VALUE);

        if(_.isEmpty(mfMap)){
            return;
        }

        mfMap = JSON.parse(mfMap);

        _.each(mfMap, function(fValue, fKey){
            const field = mfItem.querySelector("[name$='" + fKey + "']");

            if(field == null){
                return;
            }

            setFieldValue(field, fValue);
        });
    }

    function setFieldValue(field, value){
        if( field.tagName == "CORAL-CHECKBOX"){
            field.checked = (field.getAttribute("value") == value);
        }else{
            field.value = value;
        }
    }

    function getVariation(){
        var variation = $(CFM_EDITOR_SEL).data('variation');

        variation = variation || "master";

        return variation;
    }

    function compositeMutifieldsExist(){
        return !_.isEmpty($(COMPOSITE_MF_SEL));
    }

    function extendRequestSave(){
        var orignFn = CFM.editor.Page.requestSave;

        CFM.editor.Page.requestSave = requestSave;

        function requestSave(callback, options) {
            orignFn.call(this, callback, options);

            if(!compositeMutifieldsExist()){
                return;
            }

            var mfsData = getMultifieldData();

            if(_.isEmpty(mfsData)){
                return;
            }

            var url = CFM.EditSession.fragment.urlBase + ".cfm.content.json",
                variation = getVariation(),
                createNewVersion = (options && !!options.newVersion) || false;

            var data = {
                ":type": "multiple",
                ":newVersion": createNewVersion,
                "_charset_": "utf-8"
            };

            if(variation !== MASTER){
                data[":variation"] = variation;
            }

            var request = {
                url: url,
                method: "post",
                dataType: "json",
                data: _.merge(data, mfsData),
                cache: false
            };

            CFM.RequestManager.schedule({
                request: request,
                type: CFM.RequestManager.REQ_BLOCKING,
                condition: CFM.RequestManager.COND_EDITSESSION,
                ui: (options && options.ui)
            })
        }
    }

    function getMultifieldData(){
        var $composites = $(COMPOSITE_MF_SEL), value,
            mfData = {}, values, $fields;

        _.each($composites, function(mField){
            values = [];

            _.each(mField.items.getAll(), function(item) {
                $fields = $(item.content).find("[name]");

                value = {};

                _.each($fields, function(field){
                    if(canbeSkipped(field)){
                        return;
                    }

                    value[getNameDotSlashRemoved(field.getAttribute("name"))] =  getFieldValue(field);
                });

                values.push(JSON.stringify(value));
            });

            mfData[ getNameDotSlashRemoved(($(mField)).attr(MF_NAME_ATTR))] = values;
        });

        return mfData;
    }

    function getFieldValue(field){
        var value;

        if( field.tagName == "CORAL-CHECKBOX"){
            value = field.checked ? field.getAttribute("value") : "";
        }else{
            value = field.value;
        }

        return value;
    }

    function canbeSkipped(field){
        return (($(field).attr("type") == "hidden") || (field.type == "checkbox"));
    }

    function getNameDotSlashRemoved(name){
        if(_.isEmpty(name)){
            return name;
        }

        const indexOfLastSlash = name.lastIndexOf("/");
		return (indexOfLastSlash === -1) ? name : name.substr(indexOfLastSlash + 1);
    }
}(jQuery));

[kchaurasiya]

@prashantonkar : Thanks for reply. I have tested multi-field the same way and it is working as expected in the Content Fragment.

But my question is related to nested-multi field.I think the code that you shared it seems its for multifield.

JS code that you shared so is it for multifield or nested-multifield???

Thank You.

[akcena_07]

Hi @kchaurasiya,

Have you found any solution for the scenario you mentioned above, if so kindly share the solution so that we can try from our side.

Thank you

[bgatya789654532120]

While closing browser tab of authored Content Fragment without making any changes, losing the value from content fragment. I am using 6.5.16 AEM version, I had downgrade AEM version 6.5.7 but same issue. Followed same implementation as you suggest. Can you check once from your side

[sateaswa94]

Hi @bgatya789654532120 

We are facing the same issue and we are on AEM 6.5.16. Let me know if you found any workaround for the issue

[tomvocb3]

Hi @bgatya789654532120

I had the same issue. 
The root cause of this issue is from the block code of the file 
/libs/dam/cfm/admin/clientlibs/v2/adminpage/editsession.js

    $(window).on("beforeunload", function() {
        if (isTestingMode) {
            return undefined;
        }
        if ((isActive && ns.EditSession.isDirty()) || ns.RequestManager.hasPendingRequests()) {
            if (window.Dam.CFM.EditSession.isDirty()) {
                saveLastModifiedInfo();
            }
            jQuery(document).trigger(window.Dam.CFM.constants.EVENT_CONTENT_FRAGMENT_BLOCK, {
                unloadHandling: true
            });
            window.Dam.CFM.editor.Page.notifyNavigation();
        }
        return undefined;
    });

My workaround is to disable the beforeunload event is fired when the current window, contained document, and associated resources are about to be unloaded.
by inserting the block code below inside the mutifield js file. 

    disableContentFragmentAutoSave();

    function disableContentFragmentAutoSave() {
        $(window).off("beforeunload");
    }

 Hope it's useful to you.
Thanks

[vsharm]

thank you @tomvocb3 .  I also encoutered the similar issue where the multifield having json array data was getting stored as simple non-json array on browser back and forth button.

Your solution has fixed my issue as well.

Original Saved Date was - 
"items": [
"{\"label\":\"test1\"}",
"{\"label\":\"test2\"}",
"{\"label\":\"test3"}"
]

but after the browser back, it was getting saved as 
"items": [
"test1",
"test2",
"test3"
]

[rsGokulraj4]

Instead of using the following sling:resourceType , 

sling:resourceType

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

use the resourceType : dam/cfm/admin/components/authoring/contenteditor/cfmmultifield

[PreetiPa]

Hi @kchaurasiya  : were you able to achieve your requirement of nested multifield in CF via this solution . Kindly reply