Adding items on top in multifield component

Question

Whenever a new entry is added in multifield component that will appear at the bottom and we need to manually move each row upwards unless it reaches top. Is there a way to add items on top in multifield component?

Nupur_Jain · Accepted Answer

Hi @sagars

I have written a code snippet for you that should work.

To allow your multifield to add item to top, follow these steps:
1. Add granite:id property to your multifield node with value "multifield-custom-insert-first". That should look like this:

2. Create clientlib with category "cq.authoring.dialog" and add the below JS code to it.

(function(document, $) {
    "use strict";

    $(document).on("dialog-ready", function() {

        var MULTIFIELD_CUSTOM_FIRST_ID = "multifield-custom-insert-first";

    	var multifieldCustomItemsCount = 0;

		var customMultifield = $('#' + MULTIFIELD_CUSTOM_FIRST_ID);

		if (customMultifield.length) {
			multifieldCustomItemsCount = customMultifield[0].items.length;
		}

        $('#' + MULTIFIELD_CUSTOM_FIRST_ID).on("change",  function(event) {
            if(event.target.id == MULTIFIELD_CUSTOM_FIRST_ID){
                if(event.target.items.length != 1 && event.target.items.length > multifieldCustomItemsCount){
                    event.target.insertBefore(event.target.items.last(), event.target.items.first());
					multifieldCustomItemsCount = event.target.items.length;
                }
            }
        });
	});


})(document, Granite.$);

Try this and let me know.

Hope it helps!

Thanks,

Nupur

khamat_bn · Answer

Hi @sagars,Its whenever we adds item in multifield it will be added at bottom only. In order to make it on top We should try to overlay base component and need to add logic to JS for this.You can overlay multifield component /libs/granite/ui/components/foundation/form/multifield/render.jsp and add custom js logic to add on top. While solution provided by @nupur_jain Should work.Try and let us know the magic after adding js &#128578;

Sign up

Login with SSO

Login to the community

Login with SSO