AEM 6530 - Touch UI add numbering to Multifield Items

Goal


Add numbers to composite multifield items for easy identification...

Demo | Package Install | Github


Product



Extension



Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-multifield-items-numbering

2) Create node /apps/eaem-touchui-multifield-items-numbering/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.authoring.dialog.all], String[] property dependencies with value lodash.

3) Create file (nt:file) /apps/eaem-touchui-multifield-items-numbering/clientlib/js.txt, add

                        mf-items-numbering.js

4) Create file (nt:file) /apps/eaem-touchui-multifield-items-numbering/clientlib/mf-items-numbering.js, add the following code

(function ($, $document) {
    var COMPOSITE_MULTIFIELD_SELECTOR = "coral-multifield[data-granite-coral-multifield-composite]";

    $document.on("foundation-contentloaded", addNumbering);

    function addNumbering(){
        _.each( [COMPOSITE_MULTIFIELD_SELECTOR], function(mfSel){
            var $mField = $(mfSel);

            $mField.on("coral-collection:add coral-collection:remove", function(event){
                var $mField = $(this);

                Coral.commons.ready(event.detail.item, function(){
                    numberMFItem($mField);
                });
            });

            numberMFItem($mField);
        });

        function numberMFItem($mField){
            var $mfContentItems = $mField.find("coral-multifield-item-content");

            _.each($mfContentItems, function(mfContentItem, index){
                var $mfContentItem = $(mfContentItem);

                if(_.isEmpty($mfContentItem.find(".eaem-mf-counter"))){
                    $mfContentItem.wrapInner('<div style="display:inline-block; margin-left: 5px; width: 96%">');
                }else{
                    $mfContentItem.find(".eaem-mf-counter").remove();
                }

                $mfContentItem.prepend(getIndexHtml(index + 1));
            });
        }

        function getIndexHtml(index){
            return '<div class="eaem-mf-counter" style="display:inline-block; width: 2%; vertical-align: top; ">' +
                '<label class="coral-Form-fieldlabel">'
                + index +
                '.</label>' +
                '</div>'
        }
    }
}(jQuery, jQuery(document), Granite.author));

2 comments:

  1. Nice blog with Amazing information .. love to read about this.
    Awaiting for your new post
    We at Fullassignment.com bring to you the most significant Management assignment help writing service at the best cost. With long stretches of understanding we are prepared to give online assignment help over the globe.You will be guided here with a portion of the information of Management assignment which could assist you in deciding writing a Manageent assignment. Nonetheless, we unequivocally prescribe you to benefit Leadership Assignment help from our specialist to find out about marketing and its scope.We also provide Macro Economics Assignment Help from our experts.

    https://fullassignment.com/

    ReplyDelete