Adding items on top in multifield component

sagars

04-06-2020

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?

Accepted Solutions (1)

Accepted Solutions (1)

Nupur_Jain

MVP

04-06-2020

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:
Screenshot from 2020-06-04 20-20-42.png

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



Answers (3)

Answers (3)

khamat_bn

04-06-2020

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 🙂 

 

Nupur_Jain

MVP

04-06-2020

Hi @sagars 

 

Can you tell which aem version are you using?  what is the resourceType of the multifield?