Adding items on top in multifield component

[sagars]

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?

[VeenaVikraman]

I believe you might have to customize the multifield JS . 

[Nupur_Jain]

Hi @sagars 

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

[sagars]

AEM 6.5 and resourceType is granite/ui/components/coral/foundation/form/multifield

[Nupur_Jain · Accepted solution]

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

[arunpatidar]

I would say this is the right approach. handling using custom js using selector. If you are using multiple dropdown in same dialog then changed Id selector to class(granite:class) and use current multifield object. The above JS code also requires a little bit changes in order to support multiple dropdown in same dialog or in case of multifield..

[sagars]

Thank you @Nupur_Jain. The code snippet is really helpful and it works perfectly with multifield.

[Nupur_Jain]

@sagars Glad to help

[khamat_bn]

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