AEM 6420 - Adding Composite Multifield Items based on Coral Select

Goal


Add composite multifield items dynamically based on coral select change. In sample below, the value of coral select "./count" defines the count of multi field items "./products"

Demo | Package Install | Github



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-select-change-dynamic-multifield

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-select-change-dynamic-multifield/clientlib and set property categories of String[] type to cq.authoring.dialog.all and dependencies String[] to lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-select-change-dynamic-multifield/clientlib/js.txt, add the following

  select-change-dynamic-multifield.js

4) Create file (type nt:file) /apps/eaem-touchui-select-change-dynamic-multifield/clientlib/select-change-dynamic-multifield.js, add the following code

(function ($, $document, gAuthor) {
    var COUNT_SELECT = "./count",
        PRODUCTS_MF = "./products";

    $document.on("dialog-ready", addSelectListener);

    function addSelectListener(){
        var $countSelect = $("coral-select[name='" + COUNT_SELECT + "']");

        if(_.isEmpty($countSelect)){
            return;
        }

        var countSelect = $countSelect[0];

        countSelect.on("change", adjustMultifieldItems);

    }

    function adjustMultifieldItems(event){
        var countSelect = event.target,
            $productsMF = $("coral-multifield[data-granite-coral-multifield-name='" + PRODUCTS_MF + "']");

        if(_.isEmpty($productsMF)){
            return;
        }

        var maxCount = parseInt(countSelect.value),
            productsMF = $productsMF[0],
            mfItems = productsMF.items.getAll();

        if(mfItems.length <= maxCount){
            for(var c = mfItems.length; c < maxCount; c++){
                productsMF.items.add();
            }
        }else{
            for(var c = (mfItems.length - 1) ; c >= maxCount; c--){
                productsMF.items.remove(mfItems[c]);
            }
        }
    }
}(jQuery, jQuery(document), Granite.author));


1 comment:

  1. Hi, We are trying to use the coral multifield with AEM 6.4 & it's usingthe NODE_STORE and our existing multifield is using JSON store. Do you recommend any approach to keep JSON store as is and migrate to coral 3. We are seeing issues with RTE in multifield in 6.4, RTE is not able to retain the value which we authored.Please let me know if you have any example with Coral 3 RTE in multifield.

    ReplyDelete